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";
import { TraductionPage } from "./traduction.page";
@NgModule({
imports: [
CommonModule,
FormsModule,
SharedModule,
IonicModule,
TraductionPageRoutingModule,
],
declarations: [TraductionPage],
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.
