[英]Unable to make a production (--prod) build in Ionic
我有一个几乎已经完成的 Ionic 应用程序。 到目前为止，我一直在使用常规的 ionic 构建方法对其进行测试，然后使用 Capacitor 制作 APK 进行测试。 这很好用，就像应用程序在导航器中所做的那样，在开发它时。
但是当我尝试使用 --prod 标志来优化我的代码时，我会收到大量不允许我编译代码的模板错误。 不用说，这些错误永远不会出现在常规构建中。
重现步骤：拥有正常工作的版本（Android 和 web），尝试使用 ionic build --prod 构建生产版本。
Output：这里有我的 output 的一部分。 您可以看到它主要影响模板：
`
错误：src/app/app.component.html:10:5 - 错误 NG8001：'ion-menu' 不是已知元素：
- 如果 'ion-menu' 是 Angular 组件，则验证它是该模块的一部分。
- 如果“ion-menu”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。
10 <ion-menu side="start" menuId="first" contentId="main" [disabled]="userTraining" [maxEdgeStart]="15"> ~~~~~~~~~~~~~~~ ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
src/app/app.component.ts:18:16 18 templateUrl: 'app.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ 模板出现错误组件应用组件。
错误：src/app/app.component.html:10:60 - 错误 NG8002：无法绑定到“已禁用”，因为它不是“离子菜单”的已知属性。
- 如果“ion-menu”是 Angular 组件并且它具有“禁用”输入，则验证它是否是该模块的一部分。
- 如果“ion-menu”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。
- 要允许任何属性，请将“NO_ERRORS_SCHEMA”添加到此组件的“@NgModule.schemas”。
10 <ion-menu side="start" menuId="first" contentId="main" [disabled]="userTraining" [maxEdgeStart]="15">
这是我的主要模块：
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
ComponentsModule,
FormsModule,
// AssistanceCheckerModule,
// ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
],
providers: [
ParseHandlerService,
StatusBar,
Geolocation,
SplashScreen,
AppStateService,
SpinnerService,
IconGetterService,
ReactiveChannel,
// DatePicker,
ImageResizer
],
bootstrap: [AppComponent]
})
我的离子信息：
`离子：
离子 CLI：6.11.1 (C:\Users\zerok\AppData\Roaming\npm\node_modules@ionic\cli) 离子框架：@ionic/angular 5.5.4 @angular-devkit/build-angular：0.1101.4 @angular -devkit/schematics：9.1.9 @angular/cli：11.1.4 @ionic/angular-toolkit：2.2.0
电容器：
电容器 CLI：2.4.6 @capacitor/core：2.4.6
效用：
cordova-res：未安装本机运行：未安装
系统：
NodeJS: v15.7.0 (C:\Program Files\nodejs\node.exe) npm: 6.14.11 操作系统: Windows 10`
编辑：根据要求提供我的app.component.html
<div class="waiting" *ngIf="!appLoaded">
Cargando datos...
<div class="waiting-sub">
Esto podría llevar un momento
</div>
</div>
<ion-app *ngIf="appLoaded">
<ion-split-pane contentId="main">
<ion-menu side="start" menuId="first" contentId="main" [disabled]="userTraining" [maxEdgeStart]="15">
<ion-header>
<ion-toolbar>
<ion-title>My App</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list *ngIf="!userRef">
<ion-item *ngFor="let p of appPages" [routerDirection]="'root'" [routerLink]="[p.url]"
[queryParams]="p?.parameters ? p.parameters : null">
<ion-icon slot="start" [name]="p.icon" [style.color]="'#00c1ff'"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-list>
<ion-list *ngIf="userRef">
<ion-menu-toggle auto-hide="false">
<ion-row class="menu-profile" [routerDirection]="'root'" [routerLink]="'/user-profile'"
[queryParams]="{user_id: userRef?.id}">
<ion-col size="5">
<span class="level-badge level-fix" style="right:10px;top:10px">
{{ userRef?.get('level') }}
</span>
<img imgAsyncLoader class="user-avatar-menu small-shadow"
[src]="userRef?.get('avatar')?.url() || 'assets/no-avatar.png'">
</ion-col>
<ion-col>
<div>
<span class="username">{{ userRef?.get('username') }}</span>
</div>
<div class="progress-outer">
<div class="progress-inner" [style.width]="getLevelPercentage()">
</div>
</div>
<div class="progress-numbers">
{{ userRef?.get('exp') }} / {{ userRef?.get('requiredExp') }}
</div>
</ion-col>
</ion-row>
<ion-item *ngFor="let p of appPages" [routerDirection]="'root'" [routerLink]="[p.url]"
[queryParams]="p?.parameters ? p.parameters : null">
<ion-icon slot="start" [name]="p.icon" [style.color]="'#00c1ff'"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
<span class="menu-item-circle" *ngIf="p.circle">{{ p.circle }}</span>
</ion-item>
<!-- specific item for logging out-->
<ion-item (click)="logOut()" style="cursor:pointer">
<ion-icon slot="start" [name]="'arrow-back'"></ion-icon>
<ion-label>
Salir de la cuenta
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="main">
</ion-router-outlet>
<div *ngIf="training_fabbutton?.training" class="global-fabbutton">
<div class="fabbutton-txt">Volver al entreno</div>
<div (click)="openTraining()" >
<img class="fabbutton-img" src="assets/framed_icons/professionalgym.png">
</div>
<div class="fabbutton-timer">{{training_fabbutton?.training?.elapsedTime}}</div>
</div>
</ion-split-pane>
</ion-app>
更新2：我刚刚尝试使用ionic start制作一个新项目，然后复制我的所有文件，然后将所有依赖项从一个package.json一个一个复制到另一个。 在npm i并为应用程序提供服务之后，我尝试执行ionic build --prod ，但它一直抛出您在原始项目中看到的相同错误。 这些错误发生在app.component.html的事实应该告诉我们一些事情，但我仍然无法修复它。
在您使用离子组件的所有模块中以及在您的 app.module.ts 中导入 IonicModule。
@NgModule({
...
imports: [
...
IonicModule.forRoot(),
...],
...})
export class YourCustomModule {}
你有没有从 AppRoutingModule 导出AppRoutingModule
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule] // <-- does this exist
})
export class AppRoutingModule { }
对于limitTo ，如果它在“app.component.html”中使用，则需要将其添加到声明中。
@NgModule({
imports: [
AppRoutingModule,
// and others
],
declarations: [ LimitToPipe ], // <-- try here
})
export class AppModule{ }
几天后，我设法解决了这个问题！
如果其他人遇到此问题，请尝试移动您的主要应用程序组件，该组件通常在app.component.ts上声明，并将其放入不同的模块中。 例如，如果你有一个共享组件模块，你可以把它放在那里。
总之，我的app.module.ts改变：
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
ComponentsModule,
FormsModule,
// AssistanceCheckerModule,
// ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
],
providers: [
ParseHandlerService,
StatusBar,
Geolocation,
SplashScreen,
AppStateService,
SpinnerService,
IconGetterService,
ReactiveChannel,
// DatePicker,
ImageResizer
],
bootstrap: [AppComponent]
})
export class AppModule { }
...对此：
@NgModule({
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
ComponentsModule,
FormsModule,
// AssistanceCheckerModule,
// ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
],
providers: [
ParseHandlerService,
StatusBar,
Geolocation,
SplashScreen,
AppStateService,
SpinnerService,
IconGetterService,
ReactiveChannel,
// DatePicker,
ImageResizer
],
bootstrap: [AppComponent]
})
export class AppModule { }
现在，名为AppComponent的主要组件位于 ComponentsModule 的declare和exports属性中，这使得该组件可用于导入该模块的其他模块。
这是 ComponentsModule 的外观：
@NgModule({
declarations: [
AppComponent,
// more components
],
imports: [
IonicModule,
CommonModule,
FormsModule,
RouterModule,
CommentsModule
],
exports: [
AppComponent,
// more components
],
})
export class ComponentsModule { }
现在，当我使用ionic build --prod进行生产构建时，我没有遇到以前遇到的奇怪错误。
我有类似的问题，但就我而言，我错过了app-routing.modules.ts中某些页面的路径条目，因为它在调试期间不会引发任何错误，但在使用--prod标志构建，添加所有丢失的文件后，它似乎很好。
如果有人发现这是特定于模态的问题，我也有类似的问题。 它在测试版本中有效，但在添加 --prod 标志时失败。 确保使用它们将模态子模块导入到父模块。 见这里https://github.com/ionic-team/ionic-cli/issues/4657#issuecomment-848615468
** ionic build --prod ** 在我为生产而构建时不起作用
[英]** ionic build --prod ** is not working when i going to build for production
问题“离子cordova build android --prod --release”
[英]issue with “ ionic cordova build android --prod --release”
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.