I just recently migrated our app to the very latest versions of Angular and Ionic. Now I wanted to try out the lazy loading of component. However I’m constantly running into problems.
When the lazy loaded component is part of the same module as the loading component, the app compiles, but the component is included in the main bundle.
When I remove it from the module settings, and create a tiny module just for the lazy loaded component, it is correctly bundled in a separate file. But only, if I remove the content from the template.
As soon as there are any Ionic-components in the template, I get error messages like:
error NG8001: '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.
The module definition is:
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { InAppAboutDialogComponent } from './in-app-about-dialog.component';
@NgModule({
declarations: [InAppAboutDialogComponent],
imports: [
CommonModule,
IonicModule.forRoot()
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
class InAppAboutDialogModule {
}
What am I doing wrong? What needs to be done to lazy load Ionic based components?
Glad you fixed it. As an aside, I have yet to find a situation in which CUSTOM_ELEMENTS_SCHEMA was actually useful. I think all it does is basically shut up warnings that shouldn’t be shut up.
Thanks for your reply.
It doesn’t seem like my problem originates here (Although we get the same error), my imports are done properly by your description.