Lazy load pages random error:ERROR Error: Uncaught (in promise): invalid link:

Question

I run into the following error every now and then.

ERROR Error: Uncaught (in promise): invalid link:MenuPage
    at d (polyfills.js:3)
    at l (polyfills.j         


        

Answer 1

I don't see you mentioning anything about a menu.module.ts file. To configure lazy loading you need a module file per page/component.

This file is required so Ionic can understand which components need to be loaded when your page is initialized. Here's an example of a module file for a page:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MenuPage } from './menu.page';
import { SomeComponentModule } from '../../components/some/some.component.module';

@NgModule({
    declarations: [
        MenuPage
    ],
    imports: [
        IonicPageModule.forChild(MenuPage),
        HeaderComponentModule
    ],
    exports: [
        MenuPage
    ]
})
export class MenuPageModule { }

The component in this file is just an example. So if you have a component called SomeComponent in your project. Then you should import it in your page.module, only if you're using that component in your page of course.

The SomeComponent also has a module file which exports the SomeComponent as SomeComponentModule which can be imported in the page.module file.

Adding IonicPageModule.forChild(MenuPage) to the imports is required as well.

Finally, if you created a module file per component/page then you can remove all component/page imports from your app.module.ts file.

The rest you've mentioned is configured correctly. The IonicPage() annotation is still required per page and you should be able to navigate use this.navCtrl.push('menu') since you've set the name to 'menu'.

NOTE: please make sure the filename of your module file has the same name as the name of the page filename but with .module appended to it. For example a menu.ts page file should have a corresponding menu.module.ts file.