如何使用 Ionic 生成的页面作为应用程序根页面答案

【问题标题】：How to use an Ionic generated page as app root page如何使用 Ionic 生成的页面作为应用程序根页面
【发布时间】：2017-12-21 04:11:41
【问题描述】：

我只是想用 Ionic 和 Angular 弄湿我的脚。我用ionic start tabs-app tabs --ts 创建了一个Ionic 应用程序。然后我用ionic g page event-home 创建了一个页面。

接下来，我想将生成的页面设置为我的主页，所以在不更改任何其他内容的情况下，我将 app.component.ts 更新为

...
import { EventHomePage } from '../pages/event-home/event-home';
...
export Class MyApp {
    rootPage:any = EventHomePage;
}

现在如果我尝试ionic serve: Error: Uncaught (in promise): Error: No component factory found for EventHomePage. Did you add it to @NgModule.entryComponents?

所以，我尝试将其添加到 app.module.ts 中的entryComponents：

...
import { EventHomePage } from '../pages/event-home/event-home';
...
@NgModule({
  ...
  entryComponents: [
    EventHomePage,
    ...
  ]
})
export class AppModule{}

现在我得到Component EventHomePage is not part of any NgModule or the module has not been imported into your module.

因此，尝试做看似简单的任务被证明是相当困难的。

如何将 ionic 生成的应用的主页更改为 ionic 生成的页面？

【问题讨论】：

最简单的方法是运行ionic g testproject blank。空白项目使用名为“home”的页面完全符合您的要求。接下来运行您的ionic g page EventHomePage 并在项目中搜索 HomePage 并替换文本。我假设您很困惑，因为您使用了选项卡初始项目。

标签： angular ionic2

【解决方案1】：

您还必须导入定义 EventHomePage 的模块，或者您必须在 app.module.ts 的声明中添加 EventHomePage

【讨论】：

【解决方案2】：

如果您使用最新版本的ionic-cli 生成页面，则该页面将使用@IonicPage 装饰器创建。如果是这样，您还必须在与 event-home.ts 文件相同的文件夹中拥有一个 event-home.module.ts 文件。

使用该表示法，您不必在app.component.ts 中导入页面组件，而是将页面称为字符串：

rootPage:any = 'EventHomePage';

见http://blog.ionicframework.com/ionic-and-lazy-loading-pt-1/和http://blog.ionicframework.com/ionic-and-lazy-loading-pt-2/

【讨论】：

event-home.ts 文件确实包含装饰器，并且生成了 event-home.module.ts 文件；但是，它不适用于简单地添加 `rootPage:any = 'EventHomePage';
我刚刚创建了一个与您的项目完全相同的新项目，并以相同的方式生成了页面，它对我有用。但是，由于您使用的是选项卡，因此会以这种方式混淆导航。您是否打算在特定选项卡中导航到 EventHomePage？

【解决方案3】：

@NgModule({   
 declarations:[
    EventHomePage
    ],
entryComponents:[
    EventHomePage
]})

添加一个声明，它应该可以工作。

【讨论】：