How to build web in Ionic 5

user_13774019 0
Viewed 4189

I am trying to build web app using Ionic 5 I have tried:

ionic cordova build browser --prod --release

and

ionic serve --prod

both failed and have error like:

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.

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-label' is 
not a known element:
1. If 'ion-label' is an Angular component, then verify that it is part of this module.
2. If 'ion-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

It seems that when building production, it doesnot regconize ionic component.

I am fine when I use following command:

ionic serve

so how to deal with it? Thanks

ionic-framework
2 Answers

The command for building ionic code for web is ionic build.

If you want to build the code for production then use - ionic build --prod.

This is build all of the Ionic code into www folder which you can use it serve with nginx or any other web server.

user_63039290

For anyone coming here in the future, one big difference between

ionic build

compared to

ionic build --prod

is that the compiler will validate the code in way more detail.

I used to run into these issues on my last Ionic app so much that I never built with the production flag because I didn't understand.

Now with my new Ionic app I've realized the problem was with my code.

In the case of the question above, I'd say the developer is missing some dependencies that were supposed to be imported into NgModule. Especially if they are using lazy loading they might be missing the import on that specific page module.

For example, on Ionic 5/6 the pageName.module.ts file must include the IonicModule like this example:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { PageNameRoutingModule } from './pageName-routing.module';

import { PageName } from './pageName.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    PageNameRoutingModule
  ],
  declarations: [PageName]
})
export class PageNameRoutingModule {}

The best way to avoid this is to use the following CLI command when creating a new page:

ionic generate page pageName

There is also another situation where you can get these sorts of errors when all imports are correct. It can happen if you are trying to incorrectly use the ionic component. For example if you are using a component that doesn't exist or you are trying to attach some sort of function that is incompatible with that ionic component. These errors will normally show up in build without the production flag but maybe not.

Always refer to https://ionicframework.com/docs/components for proper use of the Ionic components.

user_51296410
Related