web-dev-qa-db-fra.com

Erreur aléatoire de pages de chargement différé: ERROR Erreur: Non capturé (promis): lien non valide:

Je rencontre de temps en temps l'erreur suivante. 

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)

Je ne suis au courant d'aucune procédure pour reproduire et cette erreur ne pose aucun problème L'application fonctionne normalement et la page de menu s'affiche correctement. 

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

J'avais vérifié mon projet et la page de menu n'est utilisée que par sa IonicPage nom "menu".

Il existe déjà un forum ionique post mais je suis déjà la solution acceptée proposée qui consiste à donner un nom à l’annotation IonicPage. 

ionic3
19
Amr ElAdawy

La même chose m'arrive parfois. De même, je n'ai pas pu déterminer d'où venait l'erreur, car cela n'arrive que rarement. Cela ressemble à un bug avec les scripts de l'application, car arrêter et démarrer "Ion Serv" semble résoudre le problème.

16
Chris

Redémarrez votre serveur et tout ira bien.

11
Alex Onozor

Je ne vous vois pas mentionner quoi que ce soit à propos d'un fichier menu.module.ts. Pour configurer le chargement paresseux, vous avez besoin d’un fichier de module par page/composant.

Ce fichier est requis pour permettre à Ionic de savoir quels composants doivent être chargés lors de l’initialisation de votre page. Voici un exemple de fichier de module pour une 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 { }

Le composant dans ce fichier est juste un exemple. Donc, si vous avez un composant appelé SomeComponent dans votre projet. Ensuite, vous devriez l'importer dans votre page.module, uniquement si vous utilisez ce composant dans votre page bien sûr.

SomeComponent a également un fichier de module qui exporte le SomeComponent en tant que SomeComponentModule qui peut être importé dans le fichier page.module.

L'ajout de IonicPageModule.forChild(MenuPage) aux importations est également requis.

Enfin, si vous avez créé un fichier de module par composant/page, vous pouvez supprimer toutes les importations de composant/page de votre fichier app.module.ts.

Le reste que vous avez mentionné est configuré correctement. L'annotation IonicPage() est toujours requise par page et vous devriez être capable de naviguer à l'aide de this.navCtrl.Push('menu') puisque vous avez défini le nom sur 'menu'.

REMARQUE: assurez-vous que le nom de fichier de votre fichier de module porte le même nom que le nom de la page nom de fichier, auquel est ajouté .module. Par exemple, un fichier de page menu.ts doit avoir un fichier menu.module.ts correspondant.

9
SolveSoul

Si vous n'avez pas redémarré votre serveur après avoir ajouté votre nouvelle page (ici, MenuPage), arrêtez et redémarrez le service ionique. L'erreur sera résolue.

5
Sudarshana Dayananda

Dans MenuPage.ts: Ajoutez ceci sur la classe MenuPage:

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

Dans app.components.ts  

rootPage: string = 'tabs-page';

Essayez-le!

2
Ivan Fretes

J'ai eu cette erreur quand je faisais quelque chose comme

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

J'ai fini par comprendre que le littéral transmis était invalide. Je ne voulais plus de fautes de frappe ni de majuscules au lieu de minuscules dans les noms, centralisant ce genre de choses.

En conséquence, j'ai défini une énumération de pages et l'ai utilisée partout.

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

Puis utilisé quelque chose comme:

openPage(Page.LOGIN);

Je l'ai traqué via view-controller.js dans "ionic-angular": "3.6.0"

2
JGFMK

J'ai eu un problème similaire. Résolu le problème en remplaçant "@ ionic/app-scripts" par la version "2.1.3" sous devDependencies.

"devDependencies": {
"@angular/tsc-wrapped": "^4.4.6",
"@ionic/app-scripts": "2.1.3",
"TypeScript": "2.4.0" }
1
De Wet Ellis

j'ai eu le même problème et je peux résoudre ce problème en créant l'archive module.ts pour mi page dans ce cas, c'était des onglets

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

ce n'est que si cela a été ajouté que l'importation, les déclarations et entryComponents du fichier app.module.ts suppriment cela Tout ce processus fonctionne bien pour moi.

0
Rodibel Morales

J'étudie aussi la charge paresseuse dans Ionic 3.… Aujourd'hui, j'ai eu un problème avec elle. Cette vidéo explique comment l'utiliser Ionic 3 - Modules de chargement différés/Routes

Je n'ai pas besoin d'utiliser @IonicPage ({name: 'nom-de-ma-page'}), il suffit de suivre les étapes de la vidéo et de travailler parfaitement pour moi.

J'espère que ça va t'aider aussi.

0
Saulo Gomes

Si vous souhaitez charger des composants paresseux:

Ajoutez simplement le décorateur @IonicPage() au-dessus du décorateur @Component importé de 'ionic-angular' et redémarrez votre serveur après avoir enregistré votre travail. 

Exemple: 

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

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

Assurez-vous de ne pas ajouter la même page dans le fichier app.module.ts, ni dans le tableau de déclarations, ni dans le tableau d'import.

0
ARSHAD MOHAMMED