Angular/Ionic 构建无法正确显示且没有错误

Question

我开发了一个 Angular/Ionic 项目。但现在在构建（npm run 或 npm run --prod）时，构建实际上不起作用。浏览器中只显示一半页面，控制台中没有提供任何错误。为了清楚起见：我正在尝试将其部署在网络上。构建运行成功，没有任何错误，但是出现以下警告；

21 rules skipped due to selector errors

Warning: node_modules\ngx-quill\fesm2022\ngx-quill.mjs depends on 'quill'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: \src\app\pages\events\single\single.page.ts depends on 'moment'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

依赖项是（独立工作）

  "dependencies": {
    "@angular/animations": "^17.0.2",
    "@angular/common": "^17.0.2",
    "@angular/compiler": "^17.0.2",
    "@angular/core": "^17.0.2",
    "@angular/forms": "^17.0.2",
    "@angular/platform-browser": "^17.0.2",
    "@angular/platform-browser-dynamic": "^17.0.2",
    "@angular/router": "^17.0.2",
    "@capacitor/app": "5.0.6",
    "@capacitor/core": "5.5.1",
    "@capacitor/haptics": "5.0.6",
    "@capacitor/keyboard": "5.0.6",
    "@capacitor/status-bar": "5.0.6",
    "@ionic/angular": "^7.5.0",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "ionicons": "^7.2.1",
    "moment": "^2.29.4",
    "ngx-quill": "^24.0.4",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },

构建后显示页面如下：

同时，本地服务构建（ionicserve）显示此页面，因为它应该是

• 将基本 href 更改为 ./ 或 / 也无法解决问题。
• 使用不同的设备来构建不起作用
• 在不同的网络托管服务器上发布不起作用

Answer 1

经过长时间的研究，我终于弄清楚了。诀窍是导入 Ionic 元素。

例如而不是做

import { IonicModule } from '@ionic/angular';

@Component({
  imports: [ExploreContainerComponent, IonicModule],
})

应该变成

import { IonInput, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';

@Component({
  imports: [ExploreContainerComponent, IonInput, IonHeader, IonToolbar, IonTitle, IonContent],
})

但是，我不知道为什么它没有显示任何错误。