ionic3问题之二创建两个页面工程无法编译及懒加载简介

Posted by LuckXiang on May 26, 2018

我想测试一下ionic的Native Page Transitions这个功能,于是顺手写了一个demo

ionic start nativeTransitions blank
cd nativeTransitions
ionic cordova plugin add com.telerik.plugins.nativepagetransitions
npm install --save @ionic-native/native-page-transitions
ionic g page home
ionic g page second

一运行直接报错

Type HomePage in /home/luckyxiang/Workspace/gitlab/nativeTransiton/src/pages/home/home.ts is part of the 
            declarations of 2 modules: AppModule in 
            /home/luckyxiang/Workspace/gitlab/nativeTransiton/src/app/app.module.ts and HomePageModule in 
            /home/luckyxiang/Workspace/gitlab/nativeTransiton/src/pages/home/home.module.ts! Please consider moving 
            HomePage in /home/luckyxiang/Workspace/gitlab/nativeTransiton/src/pages/home/home.ts to a higher module that 
            imports AppModule in /home/luckyxiang/Workspace/gitlab/nativeTransiton/src/app/app.module.ts and 
            HomePageModule in /home/luckyxiang/Workspace/gitlab/nativeTransiton/src/pages/home/home.module.ts. You can 
            also create a new NgModule that exports and includes HomePage in 
            /home/luckyxiang/Workspace/gitlab/nativeTransiton/src/pages/home/home.ts then import that NgModule in 
            AppModule in /home/luckyxiang/Workspace/gitlab/nativeTransiton/src/app/app.module.ts and HomePageModule in 
            /home/luckyxiang/Workspace/gitlab/nativeTransiton/src/pages/home/home.module.ts. 

头大,啥都不改就报错,研究了一下发现时ionic增加了懒加载机制,直接使用命令’ionic g page home’会创建lazyload的页面.这个具体修改原理需要对比ionic2来解释,我就不多说了,直接上修改方法

1.app.module.ts,注释掉对homepage的引用

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
//import { HomePage } from '../pages/home/home';
import { NativePageTransitions } from '@ionic-native/native-page-transitions';
@NgModule({
  declarations: [
    MyApp
  //  HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
   // HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    NativePageTransitions,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

2.app.component.ts 修改homepage的引用方式,非lazyloady需要import,lazyload只需要字符串引用就好啦

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

//import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  //rootPage:any = HomePage;
  rootPage:any = 'HomePage';

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

只需要修改这两个地方就好了,,个人觉得这个问题算是ionic3的bug吧,详细的可以看这篇博文ionic3 懒加载配置 及 NgModule详解