Страница имеет декоратор @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