Unable to make a production (--prod) build in Ionic

Question

I have an Ionic app that is already almost done. Until now, I've been testing it with the regular ionic build method, and then using Capacitor to make an APK to test. That works well, just as the app does in the navigator, when developing it.

But when I try to use the --prod flag to optimize my code, I receive a huge amount of template errors that don't allow me to compile the code. Needless to say, these errors never show up on regular builds.

Steps to Reproduce: Having a normally working version (both for Android and web), try to build a production version with ionic build --prod.

Output: Here you have a part of my output. You can see it mainly affects the templates:

`

Error: src/app/app.component.html:10:5 - error NG8001: 'ion-menu' is not a known element:

1. If 'ion-menu' is an Angular component, then verify that it is part of this module.
2. If 'ion-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

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', ~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:10:60 - error NG8002: Can't bind to 'disabled' since it isn't a known property of 'ion-menu'.

1. If 'ion-menu' is an Angular component and it has 'disabled' input, then verify that it is part of this module.
2. If 'ion-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

10 <ion-menu side="start" menuId="first" contentId="main" [disabled]="userTraining" [maxEdgeStart]="15">

This is my main module:

@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]
})

My ionic info:

`Ionic:

Ionic CLI : 6.11.1 (C:\Users\zerok\AppData\Roaming\npm\node_modules@ionic\cli) Ionic Framework : @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

Capacitor:

Capacitor CLI : 2.4.6 @capacitor/core : 2.4.6

Utility:

cordova-res : not installed native-run : not installed

System:

NodeJS : v15.7.0 (C:\Program Files\nodejs\node.exe) npm : 6.14.11 OS : Windows 10`

EDIT: Providing my app.component.html as requested

<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>

UPDATE 2: I just tried making a new project with ionic start, and then, copying all my files, then, all dependencies from one package.json to another, one by one. After npm i and serving the app, I tried doing the ionic build --prod, but it kept throwing the very same errors you see in the original project. The fact that these errors happen at app.component.html should tell us something, but I'm still not able to fix it.

Answer 1

If anyone finds this to be a problem with modals specifically, I had a similar issue. It worked in the testing builds, but when adding the --prod flag it failed. Make sure the modal child modules are being imported to the parent module using them. See here https://github.com/ionic-team/ionic-cli/issues/4657#issuecomment-848615468

Answer 2

I had similar issue but in my case, i missed the path entry for some pages in app-routing.modules.ts, as it doesn't raise any error during debugging but did throw 'ion-content' is not a known element when building with --prod flag, after adding all the missing files, it seems fine.

Answer 3

After many days, I managed to fix this!

If anyone else is having this problem, try moving your main app component, that one usually declared on app.component.ts, and put it into a different module. If you have a shared components module, you can put it there, for example.

In conclussion, my app.module.ts changed from this:

@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 { }

... to this:

@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 { }

Now, the main component called AppComponent, is both in the declare and exports properties of the ComponentsModule, which makes the component usable for other modules that import that module.

This is how the ComponentsModule looks:

@NgModule({
      declarations: [
            AppComponent,
            // more components
      ],
      imports: [
            IonicModule,
            CommonModule,
            FormsModule,
            RouterModule,
            CommentsModule
      ],
      exports: [
            AppComponent,
            // more components
      ],
})
export class ComponentsModule { }

Now, when I do a production build with ionic build --prod, I don't get the weird errors I was having before.

Answer 4

Have you exported the RouterModule from AppRoutingModule

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule] // <-- does this exist
})
export class AppRoutingModule { }

For limitTo if it is used in the `app.component.html' it will need to be added to a declaration.

@NgModule({
  imports: [
    AppRoutingModule,
    // and others
  ],
  declarations: [ LimitToPipe ], // <-- try here
})
export class AppModule{ }

Answer 5

Import IonicModule in your all modules where ever you used ionic components and also in your app.module.ts.

@NgModule({
...
imports: [
...
IonicModule.forRoot(),
...],
...})

export class YourCustomModule {}