Ionic 5 cordova build prod generate CUSTOM_ELEMENTS_SCHEMA error

Hi all,

When trying to build a release of my Ionic 5 project i’m getting CUSTOM_ELEMENTS_SCHEMA error.
All Ionic components and my custom components not recognized

Command use : ionic cordova build android --prod --release

Error description :

ERROR in src/app/pages/traduction/traduction.page.html:1:1 - error NG8001: 'app-header' is not a known element:
1. If 'app-header' is an Angular component, then verify that it is part of this module.
2. If 'app-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 <app-header></app-header>
  ~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/pages/traduction/traduction.page.ts:22:18
    22     templateUrl: "./traduction.page.html",
                        ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component TraductionPage.
src/app/pages/traduction/traduction.page.html:3:1 - error NG8001: 'ion-content' is not a known element:
1. If 'ion-content' is an Angular component, then verify that it is part of this module.
2. If 'ion-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3 <ion-content>
  ~~~~~~~~~~~~~

  src/app/pages/traduction/traduction.page.ts:22:18
    22     templateUrl: "./traduction.page.html",
                        ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component TraductionPage.
src/app/pages/traduction/traduction.page.html:4:5 - error NG8001: 'ion-refresher' is not a known element:
1. If 'ion-refresher' is an Angular component, then verify that it is part of this module.
2. If 'ion-refresher' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

app-header(header.component) by example is a custom component declare and exported in Shared module(shared.module) and finally used in page called Traduction(traduction.page)

shared.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { CommonModule } from "@angular/common";
import { DisplayValidationErrorMessageComponent } from "./components/display-validation-error-message/display-validation-error-message.component";
import { IonicModule } from "@ionic/angular";
import { HideHeaderDirective } from "./directives/hide-header-directive.directive";
import { HeaderComponent } from "./components/header/header.component";
import { TextBoxComponent } from "./components/text-box/text-box.component";
import { TraductionTextBoxActionsComponent } from "./components/traduction-text-box-actions/traduction-text-box-actions.component";
import { RootComponent } from "./components/root/root.component";

@NgModule({
    declarations: [
        DisplayValidationErrorMessageComponent,
        HideHeaderDirective,
        HeaderComponent,
        TextBoxComponent,
        TraductionTextBoxActionsComponent,
        RootComponent,
    ],
    imports: [CommonModule, IonicModule],
    exports: [
        DisplayValidationErrorMessageComponent,
        HideHeaderDirective,
        HeaderComponent,
        TextBoxComponent,
        TraductionTextBoxActionsComponent,
        RootComponent,
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class SharedModule {}

Please Notice CUSTOM_ELEMENTS_SCHEMA added in SharedModule.

header.component.ts is part of shared module

@Component({
    selector: "app-header",
    templateUrl: "./header.component.html",
    styleUrls: ["./header.component.scss"],
})
export class HeaderComponent implements OnInit {
    userInitials: string;
    constructor(private storageService: StorageService) {}
    ngOnInit() {
        if (this.storageService.isAuthorized) {
            const userData = this.storageService.userData;
            this.userInitials = userData.first_name[0].concat(
                userData.last_name[0]
            );
        }
    }
}

Header component(app-header) is then used in TraductionPage
traduction.page.html

<app-header></app-header>
<ion-content>
    <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
        <ion-refresher-content> </ion-refresher-content>
    </ion-refresher>
</ion-content>

I’m importing SharedModule in TraductionPage module
traduction.module.ts

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";
import { IonicModule } from "@ionic/angular";
import { TraductionPageRoutingModule } from "./traduction-routing.module";
import { SharedModule } from "../../shared/shared.module";
import { Media } from "@ionic-native/media/ngx";
import { File } from "@ionic-native/file/ngx";
import { AndroidPermissions } from "@ionic-native/android-permissions/ngx";
@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        SharedModule,
        IonicModule,
        TraductionPageRoutingModule,
    ],
    declarations: [],
    providers: [Media, File, AndroidPermissions],
})
export class TraductionPageModule {}

Below is my ionic info output

Ionic:

   Ionic CLI                     : 5.4.16 (C:\Users\Folabi\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.901.7
   @angular-devkit/schematics    : 9.1.7
   @angular/cli                  : 9.1.7
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, browser 6.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 14 other plugins)

Utility:

   cordova-res (update available: 0.14.0) : 0.9.0
   native-run (update available: 1.0.0)   : 0.2.9

System:

   Android SDK Tools : 26.1.1 (C:\Users\Folabi\AppData\Local\Android\Sdk)
   NodeJS            : v12.17.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.14.4
   OS                : Windows 10

Not sure where is the problem since I’m importing SharedModule in TraductionPageModule and also add CUSTOM_ELEMENTS_SCHEMA to SharedModule.

What am I doing wrong guys ?

Thanks in advance for your help.

1 post - 1 participant

Read full topic