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

Restart your server and you will be fine.

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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

Answer 6

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

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

In app.components.ts

rootPage: string = 'tabs-page';

Please try it!