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

问题

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.js:3)
    at Object.reject (polyfills.js:3)
    at NavControllerBase._fireError (nav-controller-base.js:322)
    at NavControllerBase._failed (nav-controller-base.js:310)
    at nav-controller-base.js:365
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.es5.js:4125)
    at t.invoke (polyfills.js:3)
    at n.run (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.es5.js:4116)
    at t.invokeTask (polyfills.js:3)
    at n.runTask (polyfills.js:3)

I'm not aware of any steps to reproduce and this error is not causing any problem at all The app is working normally and the Menu Page is displayed correctly.

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Nav, Platform } from 'ionic-angular';

@IonicPage({
  name: "menu",
  segment: "app"
}
)
@Component({
  selector: 'page-menu',
  templateUrl: 'menu.html'
})
export class MenuPage {}

I had checked my project and the menu page is only used by its IonicPage name "menu".

There is already an ionic forum post but I am already following the proposed accepted solution which is about giving a name to the IonicPage annotation.

回答1:

Same thing happens to me sometimes. Likewise I was not able to determine where the error comes from, as it happens only rarely. Looks like a bug with the app scripts, as stopping and starting "ionic serve" seems to solve the issue.

回答2:

According to your error, it looks like you are trying to use the class name MenuPage as a deep link. this.navCtrl.push('MenuPage');

ERROR Error: Uncaught (in promise): invalid link:MenuPage

In your case, you declared the deep link as "menu". So you should use:

this.navCtrl.push('menu');

Or if you want, keep using the class, but without quotes: this.navCtrl.push(MenuPage);

回答3:

Restart your server and you will be fine.

回答4:

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.

回答5:

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.

回答6:

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"

回答7:

In MenuPage.ts : add this over the class MenuPage:

@IonicPage(
{
  name: 'tabs-page'
})

In app.components.ts

rootPage: string = 'tabs-page';

Please try it!

回答8:

I had a similar issue. Solved it by changing the "@ionic/app-scripts" to version "2.1.3" under devDependencies.

"devDependencies": {
"@angular/tsc-wrapped": "^4.4.6",
"@ionic/app-scripts": "2.1.3",
"typescript": "2.4.0" }

回答9:

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.

回答10:

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.

回答11:

If you want lazy loading of components :

Just add @IonicPage() decorator above the @Component decorator imported from 'ionic-angular' and restart your server after saving your work

Example:

....
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
....

@IonicPage()
@Component({
templateUrl : '',
})
export class XYZ{
   ........
}

Make sure you do not added the same page in app.module.ts file neither in declarations array nor in imports array.

来源：https://stackoverflow.com/questions/43821742/lazy-load-pages-random-errorerror-error-uncaught-in-promise-invalid-link

标签

ionic3