Question

我正在Ionic的页面导航工作。使用ionic serve后，我收到了此错误：

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

任何人都可以解释为什么我会收到此错误。

Answer 1

这是因为@IonicPage()装饰器用于深层链接，这将在离子深度链接系统中注册页面。

如果您不想在该页面上进行深层链接，可以删除装饰器。

或者您可以使用以下代码在YOURPAGE.module.ts中注册该页面：

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

您可以在docs

中找到更多信息

Answer 2

我刚从组件页面中删除了以下属性：

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

其他离子示例页面甚至没有它。好像离子CLI已经过时了（我猜你用它来生成页面组件）。

Answer 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

添加页面在app文件夹中使用此命令：

$ ionic g page 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

如果您现在在app文件夹中使用以下命令运行应用程序：

$ ionic serve

你得到这样的错误：

/path/to/app/src/pages/show/show.ts有一个@IonicPage装饰器，但它没有相应的＆＃34; NgModule＆＃34;在 /path/to/app/src/pages/show/show.module.ts

现在你应该在show文件夹中创建名为show.module.ts的文件（错误地说它），然后我们的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');
  }

see doc for navigation

Answer 4

您必须确保模块文件名离子正在寻找与您拥有的文件名匹配的文件名。我有同样的问题，因为离子正在寻找“home.modules.ts”，我有“home.module.ts”（最后没有s），因此离子找不到@NgModule装饰器。

Answer 5

在我的情况下，我的文件名不是敏感的，我有 N ews.ts＆amp; <强>名词 ews.module.ts

现在运行良好

Answer 6

使用Ionic CLI添加页面时，例如

离子生成页面newPage

然后它会自动生成文件newPage.module.ts，在newPage.ts中它会生成一行文本为

@IonicPage（）

好吧，你必须删除newPage.module.ts并从newPage.ts删除@IonicPage（）

然后打开app.module.ts并在声明和条目组件中添加newPage。

Answer 7

当您使用angular 2+命名约定时，可能会发生此问题，以前它类似于my-app.component.ts，更新为ionic 3命名约定my-app.ts，您将可以使用@IonicPage()装饰器（如果需要）。

Answer 8

今天生成页面时遇到了同样的问题。这在几天前没有发生过。

我删除了页面NgModule，然后删除了@IonicPage()装饰器，它恢复了功能。有点hacky，但它现在正在运行......

Answer 9

在您的.ts页面中添加以下代码，替换“＆name”字样＆＃39;用你的名字命名你的页面。别忘了在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) {
  }
}

Answer 10

这是因为 @IonicPage（）装饰器用于深度链接和延迟加载，因此要实现这一点，您需要一个专用模块来加载该页面的所有必需组件。看看Ionic的文档：

@IonicPage API docs

Answer 11

仅使用：

import { IonicPage } from 'ionic-angular';

@IonicPage()

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

页面有一个@IonicPage装饰器，但它没有相应的“NgModule”

11 个答案: