Custom Component Lazy Loading

Ionic Framework ionic-v3
1

Hi All

I have a custom component that I need to access from a lazy loaded page and a non-lazy loaded page. The issue is I can get either one working but not at the same time.

I’ve tried using the component.module.ts as so:

import { NgModule } from '@angular/core';
import {InfoComponent} from "./info/info";
import {IonicModule} from "ionic-angular";
@NgModule({
    declarations: [InfoComponent],
    imports: [IonicModule],
    exports: [InfoComponent]
})
export class ComponentsModule {}

and then import it into the lazy loaded page with

import {NgModule} from '@angular/core';
import {IonicPageModule} from 'ionic-angular';
import {StatsPage} from './stats';
import {ExpandableComponent} from "../../components/expandable/expandable";
import {ComponentsModule} from "../../components/components.module";

@NgModule({
    declarations: [
        StatsPage,
        ExpandableComponent,
    ],
    imports: [
        IonicPageModule.forChild(StatsPage),
        ComponentsModule
     ],
     providers: [
         ExpandableComponent,
     ],
})
export class StatsPageModule {
}

This results in

If 'info' is an Angular component, then verify that it is part of this module

I could change every page to be lazy loaded, but I’m confident this is the best way forward.
Any help would be much appreciated.

Mark

2

See: https://blog.angularindepth.com/avoiding-common-confusions-with-modules-in-angular-ada070e6891f

3

You can add Lazy Loading by three simple steps explained in detail here