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 had the same problem and i can resolve this creating the archive module.ts for mi page in this case was tabs

import { TabsPage } from './tabs';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';

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

only in case this was added the import,declarations and entryComponents in the app.module.ts file remove that. All this process work fine to me.

Answer 2

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.

Answer 3

I am studying the Lazy load in Ionic 3 too. Today I had an issue with it. This video explains how to use it Ionic 3 - Lazy Loading Modules/Routes

I do not need to use @IonicPage({name: 'name-of-my-page'}), just follow the steps in the video and work perfectly to me.

Hope this helps you too.

Answer 4

If you didn't restart your server after adding your new page(in this case MenuPage) stop and restart ionic serve. Error will be solve.

Answer 5

I had this error when I was doing something like

@ViewChild(Nav) nav: Nav;
...
openPage(page:string) {
  this.nav.setRoot(page);
}

I ended up tracking it down to the fact the literal being passed in was invalid. I wanted no more typos or upper instead of lower case in the names, centralising this stuff.

As a consequence I defined an enum of pages and used that everywhere.

export enum Page {
  HOME = <any>'HomePage',
  LOGIN = <any>'LoginPage'
}

Then used something like:

openPage(Page.LOGIN);

I tracked it down via view-controller.js in "ionic-angular": "3.6.0"

Answer 6

Another case that can cause the problem is load a lazy-loaded page as a modal. If you want to use a page as a modal you should not make it lazy-loaded! After that you can use that page as a modal:

modalCtrl.create(this.somePage).present();