web-dev-qa-db-fra.com

Cette page contient un décorateur @IonicPage, mais aucun "NgModule" ne correspond.

Je travaillais sur la navigation de page dans Ionic. Après avoir utilisé ionic serve, j'ai eu cette erreur:

The Page with .ts extension has a @IonicPage decorator, but it does not have a corresponding "NgModule". 

Quelqu'un peut-il expliquer pourquoi je reçois cette erreur?.

angularionic-framework
18
devAsh

Ceci est dû au fait que le décorateur @IonicPage() est destiné à la liaison en profondeur, cela enregistrera la page dans le système de liaison en profondeur de ionic.

Vous pouvez supprimer le décorateur si vous ne voulez pas de lien profond sur cette page.

Ou vous pouvez enregistrer cette page dans votre YOURPAGE.module.ts avec ce code: 

@NgModule({
  declarations: [
    MyPage
  ],
  imports: [
    IonicPageModule.forChild(MyPage)
  ],
  entryComponents: [
    MyPage
  ]
})

Vous pouvez trouver plus d’informations dans la docs

16
dlcardozo

Je viens de supprimer l'attribut suivant de la page du composant:

<!-- /src/app/pages/{page-name}/{page-name.ts} -->
@IonicPage()

D'autres exemples de pages ioniques ne l'ont même pas. On dirait que la CLI ionique est obsolète (je suppose que vous avez utilisé cela pour générer le composant de page).

7
Brayden Hancock

Si vous souhaitez utiliser la liaison en profondeur, commencez par lire le doc API

et maintenant, regardons un exemple pour ajouter une page avec des liens profonds:

Voici la structure de notre dossier src:

-src
 --app
 --assets
 --pages
    --home
       *home.html
       *home.scss
       *home.ts
 --thems
 *some file we not working with them in here

pour ajouter une page, utilisez cette commande dans le dossier de votre application:

$ ionic g page show

show est le nom de la page ..__ et voici la structure de notre dossier src:

-src
 --app
 --assets
 --pages
    --home
       *home.html
       *home.scss
       *home.ts
    --show
       *show.html
       *show.scss
       *show.ts
 --thems
 *some file we not working with them in here

Si maintenant vous exécutez votre application avec la commande ci-dessous dans votre dossier d'applications:

$ ionic serve

vous obtenez une erreur comme ceci:

/path/to/app/src/pages/show/show.ts a un décorateur @IonicPage, mais c'est n'a pas de "NgModule" correspondant à /path/to/app/src/pages/show/show.module.ts

maintenant vous devriez créer un fichier nommé show.module.ts (en erreur, il dit) dans le dossier show, alors notre structure de dossier src devrait ressembler à ceci:

-src
     --app
     --assets
     --pages
        --home
           *home.html
           *home.scss
           *home.ts
        --show
           *show.html
           *show.scss
           *show.ts
           *show.module.ts
     --thems
     *some file we not working with them in here

et voici le contenu du fichier show.module.ts:

import { NgModule } from '@angular/core';
import {IonicPageModule} from 'ionic-angular';

import { ShowPage } from './show';

@NgModule({
  declarations: [
    ShowPage
  ],
  imports: [
    IonicPageModule.forChild(ShowPage)
  ],
  entryComponents: [
    ShowPage
  ]
})
export class ShowPageModule {}

Terminé . Lancez votre application avec ionic serve et l'erreur disparaît.

Vous pouvez naviguer vers votre nouvelle page avec

goToMyPage() {
    // go to the ShowPage component
    this.navCtrl.Push('ShowPage');
  }

voir doc pour navigation .

3
Mr.Sun

Lorsque vous ajoutez une page en utilisant Ionic CLI par exemple

ionic générer une page nouvelle page

puis il génère automatiquement le fichier newPage.module.ts et à l'intérieur de newPage.ts, il génère une ligne de texte

@IonicPage ()

Eh bien, vous devez supprimer newPage.module.ts et supprimer @IonicPage () de newPage.ts

ensuite, ouvrez app.module.ts et ajoutez newPage à l'intérieur des déclarations et des composants d'entrée. 

2
Yury Euceda

Vous devez vous assurer que le nom de fichier du module que ionic recherche correspond au nom de fichier que vous avez. J'ai eu le même problème parce que ionic recherchait "home.modules.ts" et que j'avais "home.module.ts" (aucun s à la fin), donc ionic ne pouvait pas trouver le décorateur @NgModule.

1
Adolfo

dans mon cas, mon nom de fichier n'était pas sensible à la casse, j'aiNews.ts & n ews.module.ts

maintenant fonctionne bien 

1
mohammed rashed

En effet, @IonicPage () decorator est utilisé pour la liaison en profondeur et le chargement paresseux. Pour l'implémenter, vous avez besoin d'un module dédié pour charger tous les composants requis pour cette page. Jetez un coup d'œil à la documentation Ionic:

Documents de l'API @IonicPage

0
Gabriel

Utilisant seulement:

import { IonicPage } from 'ionic-angular';

@IonicPage()

@Component({
  selector: 'page-abc',
  templateUrl: 'abc.html',
})
0
user11124624

Dans votre page .ts, ajoutez le code suivant, remplacez le mot "nom" par le nom de votre page. N'oubliez pas d'ajouter votre nouvelle page dans la page app.module.ts.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
selector: 'page-name',
templateUrl: 'name.html',
})

export class NamePage {
   constructor(public navCtrl: NavController) {
  }
}
0
Jamhson

Aujourd'hui, j'ai eu le même problème lors de la génération d'une page. Cela n'est pas arrivé il y a quelques jours.

J'ai supprimé la page NgModule et ensuite le décorateur @IonicPage(), qui a restauré la fonctionnalité. Un peu hacky, mais c'est opérationnel pour l'instant ...

0
user3934205