Custom Component Lazy Loading


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

    declarations: [
    imports: [
     providers: [
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.





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