Ionic5 prod build fails with "not a known element" in components

Ionic Framework ionic-v3
1

Please describe the question in detail and share your code, configuration, and other relevant info.My issue with ionic capacitor build --prod ios is that my working components starting with the likes of

<ion-content>
  <ion-grid class="ion-no-padding">
    <ion-row>
      <ion-col>

fail build with

'ion-grid' is not a known element:
1. If 'ion-grid' is an Angular component, then verify that it is part of this module.
2. If 'ion-grid' is a Web Component then add 'CUSTOM_ELEMENT

Without the --prod it works fine. However, without the --prod I am not able to sucessfully run

    import { Component, enableProdMode } from '@angular/core';

    ...

    try{
        enableProdMode();
    }catch{
        this.logger.logError('Prod Mode Failed');
    }

I managed to get --prod to build with setting aot and buildOptimizer in angular.json to false

              "aot": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": false,

However, this seems to make the --prod irrelevant? At least enableProdMode is still failing… ?

Adding CUSTOM_ELEMENTS_SCHEMA like proposed here has not made any difference either.

2

Hard to see without the source, but I suspect you’re using lazy loading and forgetting to include IonicModule somewhere.

1 Like
3

Most likely. Sure about lazy loading. Here is one component:

<ion-content>
  <ion-grid class="ion-no-padding">
    <ion-row>
      <ion-col>
        STUFF
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col class='ion-text-center'>
        STUFF
    </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
      STUFF
      </ion-col>
  </ion-row>
  </ion-grid>
</ion-content>

I have one component module to load all components

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ComponentA } from './station/a.component';
import { ComponentB } from './tide/b.component';

const APP_COMPONENTS = [
  ComponentA,
  ComponentB,
...
];

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: APP_COMPONENTS,
  exports: APP_COMPONENTS
})
export class ComponentsModule { }

Might have few renaming errors after copy paste.

4

Well, does anything change if you import IonicModule into that module?

Incidentally, if you’re already going to have one big module with all these components, why not just ditch lazy loading entirely and just let the AppModule be that big module?

I remain steadfast in my belief that it was a huge mistake for Ionic to promote lazy loading so heavily.

2 Likes
5

How should I “add” IonicModule to that module? Replace the NgModule reference?

6

I didn’t say “add”; I said “import”. Add it to the imports stanza next to the CommonModule.

1 Like
7

Thanks, that worked ! :slight_smile:

1 Like