Страница имеет декоратор @IonicPage, но у него нет соответствующего "NgModule",

Я работал над навигацией по страницам в Ionic. После использования ionic serve я получил эту ошибку:

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

Может кто-нибудь объяснить, почему я получаю эту ошибку.

Ответ 1

Это потому, что декоратор @IonicPage() предназначен для глубокой привязки, это зарегистрирует страницу в ионной системе глубоких ссылок.

Вы можете удалить декоратор, если вам не нужна глубокая ссылка на этой странице.

Или вы можете зарегистрировать эту страницу в своем YOURPAGE.module.ts с помощью этого кода:

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

Дополнительную информацию можно найти в docs

Ответ 2

Я просто удалил на странице компонентов следующий атрибут:

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

Другие страницы с ионными примерами даже не имеют этого. Похоже, что ионный CLI устарел (я предполагаю, что вы использовали его для создания компонента страницы).

Ответ 3

Если вы хотите использовать глубокую ссылку, сначала прочитайте API doc

и теперь рассмотрим пример добавления страницы с глубокой привязкой:

Это наша структура папок src:

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

для добавления страницы используйте эту команду в папке вашего приложения:

$ ionic g page show 

show - это название страницы. и теперь это наша структура папок 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

Если теперь вы запустите свое приложение с помощью следующей команды в папке вашего приложения:

$ ionic serve

вы получите такую ​​ошибку:

/path/to/app/src/pages/show/show.ts имеет декоратор @IonicPage, но он не имеет соответствующего "NgModule" в /path/to/app/src/pages/show/show.module.ts

теперь вы должны сделать файл с именем show.module.ts (по ошибке он говорит) в папке show, тогда наша структура папок src должна выглядеть примерно так:

-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

и это содержимое файла 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 {}

Готово. запустите приложение с помощью ionic serve, и ошибка исчезла.

Вы можете перейти на новую страницу с помощью

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

см. документ для навигации.

Ответ 4

Когда вы добавляете страницу с использованием Ionic CLI, например

ионная генерация страницы newPage

то он автоматически генерирует файл newPage.module.ts и внутри newPage.ts он генерирует строку текста как

@IonicPage()

Ну, вы должны удалить newPage.module.ts и удалить @IonicPage() из newPage.ts

затем откройте app.module.ts и добавьте newPage внутри деклараций и компонентов входа.

Ответ 5

Вы должны убедиться, что имя файла модуля ionic ищет совпадения с именем файла, которое у вас есть. У меня была такая же проблема, потому что ионный искал "home.modules.ts", и у меня был "home.module.ts" (нет s в конце), поэтому ионный не смог найти декодер @NgModule.

Ответ 6

Сегодня у меня была такая же проблема при создании страницы. Это произошло не несколько дней назад.

Я удалил страницу NgModule, а затем декоратор @IonicPage(), который восстановил функциональность. Немного взломанный, но он работает и работает на данный момент...

Ответ 7

в моем случае имя моего файла не было чувствительным к регистру. У меня N ews.ts и n ews.module.ts

теперь выполняется нормально

Ответ 8

На странице .ts добавьте следующий код, замените слово "имя" на то, что вы назовете на своей странице. Не забудьте добавить новую страницу на страницу 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) {
  }
}

Ответ 9

Это связано с тем, что декоратор @IonicPage() используется для глубокой привязки и ленивой загрузки, поэтому для реализации этого вам нужен выделенный модуль для загрузки всех необходимых компонентов для этой страницы. Взгляните на документы Ionic:

@Документы API IonicPage