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.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.

Chris · Accepted Answer · 2017-05-19 15:23:06Z

16

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.

answered May 19, 2017 at 15:23

Chris

4,3776 gold badges29 silver badges50 bronze badges

1

This is usually my go-to solution for most of my issues recently. Works 4 out of 5 times
– hanzo2001
Commented Jul 18, 2017 at 10:46
1

Worked for me! Thanks.
– Patriciu Nista
Commented Aug 16, 2017 at 11:01
I have this many many times a day. The only thing that works is restarting the app.
– A.W.
Commented Apr 19, 2018 at 9:24

Add a comment |

Xavier V. · Accepted Answer · 2017-05-16 16:17:05Z

14

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

answered May 16, 2017 at 16:17

Xavier V.

6,3386 gold badges30 silver badges35 bronze badges

That was the first thing I thought of. I searched the whole code for the literal MenuPage but it is was never used to navigate to the page.
– Amr Eladawy
Commented May 16, 2017 at 17:14

Add a comment |

Alex Onozor · Accepted Answer · 2017-10-03 06:51:16Z

11

Restart your server and you will be fine.

answered Oct 3, 2017 at 6:51

Alex Onozor

7,0131 gold badge23 silver badges27 bronze badges

Add a comment |

SolveSoul · Accepted Answer · 2017-05-17 11:19:05Z

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.

Thanks for the efforts. I already have the module exposing the Page. I did not add it to reduce the question size. — Amr Eladawy, Commented May 17, 2017 at 11:21
I see, well I had the same issue but my problem was the filename of the module file that was not set correctly because I created the files manually instead of via CLI. So I'd advice to double check your filenames. Also what is the current version of your Ionic? — SolveSoul, Commented May 17, 2017 at 11:25

Sudarshana Dayananda · Accepted Answer · 2018-03-10 03:33:24Z

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.

answered Mar 10, 2018 at 3:33

Sudarshana Dayananda

5,2352 gold badges25 silver badges45 bronze badges

2

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
– Danielson
Commented Mar 10, 2018 at 7:07
1

LOL, worked for me too, but @Danielson is right, that's not the best answer though it may work sometimes.
– giovannipds
Commented Jun 13, 2018 at 20:37

Add a comment |

JGFMK · Accepted Answer · 2017-08-16 19:17:56Z

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"

Ivan Fretes · Accepted Answer · 2017-12-07 02:37:32Z

2

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

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

In app.components.ts

rootPage: string = 'tabs-page';

Please try it!

answered Dec 7, 2017 at 2:37

Ivan Fretes

6987 silver badges11 bronze badges

1

De Correcto !! Great !
– Hamza Avvan
Commented May 15, 2018 at 19:26

Add a comment |

De Wet Ellis · Accepted Answer · 2018-01-05 10:17:06Z

1

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

answered Jan 5, 2018 at 10:17

De Wet Ellis

7407 silver badges7 bronze badges

Add a comment |

Rodibel Morales · Accepted Answer · 2017-09-22 17:37:38Z

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.

Saulo Gomes · Accepted Answer · 2017-10-04 14:57:40Z

0

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.

answered Oct 4, 2017 at 14:57

Saulo Gomes

945 bronze badges

Add a comment |

ARSHAD MOHAMMED · Accepted Answer · 2018-11-28 08:18:01Z

0

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.

edited Nov 28, 2018 at 8:18

user1531971

answered Nov 27, 2018 at 18:13

ARSHAD MOHAMMED

211 bronze badge

Add a comment |

Hamid Araghi · Accepted Answer · 2020-10-18 18:28:59Z

0

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

answered Oct 18, 2020 at 18:28

Hamid Araghi

4544 silver badges15 bronze badges

Add a comment |

Collectives™ on Stack Overflow

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

12 Answers 12

Not the answer you're looking for? Browse other questions tagged
ionic3
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

Not the answer you're looking for? Browse other questions tagged ionic3 or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
ionic3
or ask your own question.