Typescript error when building with --prod flag

Ionic Framework ionic-v3
1

Hi everyone,

Since yesterday i get this error when i try to build or run with --prod flag.

Anyone have an idea ?

[13:48:44]  typescript error
            'ion-icon' is not a known element: 1. If 'ion-icon' is an Angular component, then verify that it is part of
            this module. 2. If 'ion-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the
            '@NgModule.schemas' of this component to suppress this message. (" <ion-navbar color="secondary"> <button
            ion-button (click)="dismiss()"> [ERROR ->]<ion-icon name="md-arrow-back"></ion-icon> </button>
            <ion-title>Device List</ion-title> ")

[13:48:44]  typescript error
            'ion-title' is not a known element: 1. If 'ion-title' is an Angular component, then verify that it is part
            of this module. 2. If 'ion-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the
            '@NgModule.schemas' of this component to suppress this message. (" <ion-icon
            name="md-arrow-back"></ion-icon> </button> [ERROR ->]<ion-title>Device List</ion-title> </ion-navbar>
            </ion-header> ")

[13:48:44]  typescript error
            'ion-navbar' is not a known element: 1. If 'ion-navbar' is an Angular component, then verify that it is part
            of this module. 2. If 'ion-navbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the
            '@NgModule.schemas' of this component to suppress this message. ("<ion-header> [ERROR ->]<ion-navbar
            color="secondary"> <button ion-button (click)="dismiss()"> <ion-icon name="md-a")

[13:48:44]  typescript error
            'ion-header' is not a known element: 1. If 'ion-header' is an Angular component, then verify that it is part
            of this module. 2. If 'ion-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the
            '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ion-header> <ion-navbar
            color="secondary"> <button ion-button (click)="dismiss()"> ")

[13:48:44]  typescript error
            'ion-col' is not a known element: 1. If 'ion-col' is an Angular component, then verify that it is part of
            this module. 2. If 'ion-col' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas'
            of this component to suppress this message. (" <ion-grid> <ion-row> [ERROR ->]<ion-col col-3> <b>{{
            item.address }}</b> </ion-col> ")

[13:48:44]  typescript error
            'ion-col' is not a known element: 1. If 'ion-col' is an Angular component, then verify that it is part of
            this module. 2. If 'ion-col' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas'
            of this component to suppress this message. (" <b>{{ item.address }}</b> </ion-col> [ERROR ->]<ion-col
            col-6> <b>{{ item.label }}</b> </ion-col> ")

[13:48:44]  typescript error
            'ion-col' is not a known element: 1. If 'ion-col' is an Angular component, then verify that it is part of
            this module. 2. If 'ion-col' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas'
            of this component to suppress this message. (" <b>{{ item.label }}</b> </ion-col> [ERROR ->]<ion-col col-3
            text-right> <b>{{ item.productLabel }}</b> </ion-col> ")

[13:48:44]  typescript error
            'ion-row' is not a known element: 1. If 'ion-row' is an Angular component, then verify that it is part of
            this module. 2. If 'ion-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas'
            of this component to suppress this message. (" <button ion-item> <ion-grid> [ERROR ->]<ion-row> <ion-col
            col-3> <b>{{ item.address }}</b> ")

[13:48:44]  typescript error
            '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_ELEMENTS_SCHEMA' to the
            '@NgModule.schemas' of this component to suppress this message. (" <ion-list *ngFor="let item of itemList">
            <button ion-item> [ERROR ->]<ion-grid> <ion-row> <ion-col col-3> ")

[13:48:44]  typescript error
            'ion-list' is not a known element: 1. If 'ion-list' is an Angular component, then verify that it is part of
            this module. 2. If 'ion-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the
            '@NgModule.schemas' of this component to suppress this message. (" <ion-content padding> [ERROR ->]<ion-list
            *ngFor="let item of itemList"> <button ion-item> <ion-grid> ")

[13:48:44]  typescript error
            Can't bind to 'ngForOf' since it isn't a known property of 'ion-list'. 1. If 'ion-list' is an Angular
            component and it has 'ngForOf' input, then verify that it is part of this module. 2. If 'ion-list' 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. ("
            <ion-content padding> <ion-list [ERROR ->]*ngFor="let item of itemList"> <button ion-item> <ion-grid> ")

[13:48:44]  typescript error
            Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name
            is spelled correctly and all directives are listed in the "@NgModule.declarations". (" <ion-content padding>
            [ERROR ->]<ion-list *ngFor="let item of itemList"> <button ion-item> <ion-grid> ")

[13:48:44]  typescript error
            '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. (" </ion-header> [ERROR ->]<ion-content
            padding> <ion-list *ngFor="let item of itemList"> <button ion-item> ")

Error: The Angular AoT build failed. See the issues above
    at C:\Users\guillaume\ionic\i\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:237:55
    at step (C:\Users\guillaume\ionic\i\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:32:23)
    at Object.next (C:\Users\guillaume\ionic\i\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:13:53)
    at fulfilled (C:\Users\guillaume\ionic\i\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:4:58)

Thanks

2

You probably are not importing IonicModule into one of your page modules.

1 Like
3

You mean i have something missing in my app.module.ts file ?

4

How is any of us supposed to know? You’ve posted no code.

5

This is my app.module.ts

import { PopupPage } from './../pages/popup/popup';
import { DeviceListPage } from './../pages/device-list/device-list';
import { DeviceConfigurationPage } from './../pages/device-configuration/device-configuration';
import { OnboardingPage } from './../pages/onboarding/onboarding';
import { DataReadingPage } from './../pages/data-reading/data-reading';
import { BlueReadConfigurationRfPage } from './../pages/blue-read-configuration-rf/blue-read-configuration-rf';
import { DataserviceProvider } from './../providers/dataservice/dataservice';
import { BlueReadManagementPage } from './../pages/blue-read-management/blue-read-management';
import { crc } from './../models/crc';
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { BluetoothSerial } from '@ionic-native/bluetooth-serial';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { InventoryPage } from '../pages/inventory/inventory';
import { BluereadProvider } from '../providers/blueread/blueread';
import { ExpertPage } from '../pages/expert/expert';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { ConfigProvider } from '../providers/config/config';
import { HttpModule } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import { UtilsProvider } from '../providers/utils/utils';
import { BarcodeScanner } from '@ionic-native/barcode-scanner';
import { IonicStorageModule } from '@ionic/storage';
import { Network } from '@ionic-native/network';
import {File} from '@ionic-native/file';

// AngularFire2 account settings
export const firebaseConfig = {
  // My key here
};

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    BlueReadManagementPage,
    InventoryPage,
    ExpertPage,
    BlueReadConfigurationRfPage,
    DataReadingPage,
    OnboardingPage,
    DeviceConfigurationPage,
    DeviceListPage,
    PopupPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    HttpModule,
    HttpClientModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    BlueReadManagementPage,
    InventoryPage,
    ExpertPage,
    BlueReadConfigurationRfPage,
    DataReadingPage,
    OnboardingPage,
    DeviceConfigurationPage,
    DeviceListPage,
    PopupPage
  ],
  providers: [
    StatusBar,
    Network,
    File,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    BluetoothSerial,
    BluereadProvider,
    crc,
    BarcodeScanner,
    DataserviceProvider,
    ConfigProvider,
    UtilsProvider
  ]
})
export class AppModule {}

And i have created all my pages with ionic -g page <my-page> without changing generated import headlines…So in all of my pages i have

import { Component, OnInit  } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

Anything is missing ?

6

Well !! I finally found my issue !!

I have created a component (with ionic -g component) and i forgot to remove the my-component.module.ts generated file. Now it’s ok i can building / running with --prod flag