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

@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?

Thanks in advance,

Heiner

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.

Hey, can you elaborate on what you exactly did? I might be facing the same issue but I don’t quite understand your solution.

At least I can try to recall. Like I said, the component is loaded dynamically in a function:

    async showAboutDialog(): Promise<void> {
        const { InAppAboutDialogComponent } = await import('path/to/in-app-about-dialog.component');
        const modal = await this.modalController.create({
            component: InAppAboutDialogComponent
        });
        return modal.present();
    }

But here the import was wrong. Instead, you have to load it from the module:

    async showAboutDialog(): Promise<void> {
        const { InAppAboutDialogComponent } = await import('path/to/misc-dialogs.module');
        const modal = await this.modalController.create({
            component: InAppAboutDialogComponent
        });
        return modal.present();
    }

Unfortunately, the IDE does not do this automatically, but instead prefers to import from the dedicated source file directly.

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.