Problem with lazy loading of components with Angular 9

Hi there,

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';

    declarations: [InAppAboutDialogComponent],
    imports: [
class InAppAboutDialogModule {

What am I doing wrong? What needs to be done to lazy load Ionic based components?

Thanks in advance,


Aaarg. Found the reason: If you create a module, you should import the component from that module, not from the component file directly.

Adding a

export * from './in-app-about-dialog.component';

and changing the import at the lazy loading stuf fixed the issue.

1 Like

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.