ionic3 - sistematicos - errores accidentales

Error al azar de las páginas de carga diferida: ERROR Error: No detectado(en promesa): enlace no válido:

Question

Me encuentro con el siguiente error de vez en cuando.

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)

No tengo conocimiento de ningún paso para reproducir y este error no causa ningún problema. La aplicación funciona normalmente y la página de menú se muestra correctamente.

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

IonicPage mi proyecto y la página del menú solo se usa por su nombre de "menu" IonicPage .

Ya hay un post foro iónico, pero ya estoy siguiendo la solución aceptada propuesta que se trata de darle un nombre a la anotación IonicPage .

Answer 1

A veces me pasa lo mismo. Del mismo modo, no pude determinar de dónde proviene el error, ya que ocurre muy raramente. Parece un error con los scripts de la aplicación, ya que detener e iniciar el "servicio iónico" parece resolver el problema.

Answer 2

Elimine el siguiente código de su archivo

import { IonicPage } from ''ionic-angular'';

@IonicPage()

Esto funciona para mi.

Answer 3

En MenuPage.ts: agregue esto a la clase MenuPage:

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

En app.components.ts

rootPage: string = ''tabs-page'';

¡Por favor pruebalo!

Answer 4

Estoy estudiando la carga perezosa en Ionic 3 también. Hoy tuve un problema con eso. Este video explica cómo usarlo Ionic 3 - Módulos / rutas de carga diferida

No necesito usar @IonicPage ({name: ''name-of-my-page''}), solo siga los pasos en el video y trabaje perfectamente para mí.

Espero que esto le ayude también.

Answer 5

No te veo mencionando nada sobre un archivo menu.module.ts . Para configurar la carga diferida, necesita un archivo de módulo por página / componente.

Este archivo es necesario para que Ionic pueda comprender qué componentes deben cargarse cuando se inicializa su página. Aquí hay un ejemplo de un archivo de módulo para una página:

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

El componente en este archivo es solo un ejemplo. Entonces si tienes un componente llamado SomeComponent en tu proyecto. Luego, debe importarlo en su página. Módulo, solo si está utilizando ese componente en su página, por supuesto.

SomeComponent también tiene un archivo de módulo que exporta SomeComponent como SomeComponentModule que se puede importar en el archivo page.module.

IonicPageModule.forChild(MenuPage) es necesario agregar IonicPageModule.forChild(MenuPage) a las importaciones.

Finalmente, si creó un archivo de módulo por componente / página, puede eliminar todas las importaciones de componente / página de su archivo app.module.ts .

El resto que has mencionado está configurado correctamente. La anotación de IonicPage() aún es necesaria por página y debería poder navegar usando this.navCtrl.push(''menu'') ya que ha establecido el nombre en ''menu''.

NOTA: asegúrese de que el nombre de archivo de su archivo de módulo tenga el mismo nombre que el nombre de archivo de la página pero con .module anexado. Por ejemplo, un archivo de página menu.ts debe tener un archivo menu.module.ts correspondiente.

Answer 6

Reinicie su servidor y estará bien.

Answer 7

Según su error, parece que está intentando usar el nombre de clase MenuPage como un enlace profundo. this.navCtrl.push(''MenuPage'');

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

En su caso, declaró el enlace profundo como "menú". Así que debes usar:

this.navCtrl.push(''menu'');

O si lo desea, siga usando la clase, pero sin comillas: this.navCtrl.push(MenuPage);

Answer 8

Si no reinició su servidor después de agregar su nueva página (en este caso MenuPage), detenga y reinicie el servicio iónico. El error será resuelto.

Answer 9

Si quieres carga perezosa de componentes:

Simplemente agregue el decorador @IonicPage() sobre el decorador @Component importado de ''ionic-angular'' y reinicie su servidor después de guardar su trabajo

Ejemplo:

....
import { IonicPage, NavController, NavParams, AlertController } from ''ionic-angular'';
....
@IonicPage()
@Component({
templateUrl : '''',
})
export class XYZ{
........
}

Asegúrese de no agregar la misma página en el archivo app.module.ts ni en la matriz de declaraciones ni en la matriz de importaciones.

Answer 10

Tuve el mismo problema y puedo resolver esto al crear el módulo de archivado.ts para mi página en este caso eran pestañas

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

solo en caso de que se haya agregado, la importación, las declaraciones y los comentarios de entrada en el archivo app.module.ts eliminan eso. Todo este proceso funciona bien para mí.

Answer 11

Tuve este error cuando estaba haciendo algo como

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

Terminé rastreando el hecho de que el literal que se pasa no es válido. No quería más errores tipográficos ni mayúsculas en minúsculas en los nombres, centralizando esto.

Como consecuencia, definí una enumeración de páginas y la usé en todas partes.

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

Luego usé algo como:

openPage(Page.LOGIN);

Lo localicé a través de view-controller.js en "ionic-angular": "3.6.0"

Answer 12

Tuve un problema similar Se solucionó cambiando "@ ionic / app-scripts" a la versión "2.1.3" en DevDependencies.

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