ionic3 項目 懶加載配置

配置懶加載須要如下幾個步驟：

1.給須要懶加載的頁面配置module.ts；
2.在對應頁面的.ts文件裏增長@IonicPage()特性；
3.在app.module.ts移除頁面引用；
4.使用懶加載；
5.懶加載運行效果圖；

1.配置module.ts

依次配置about.module.ts、contact.module.ts、home.module.ts、tabs.module.ts

about.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AboutPage } from './about';

@NgModule({
    declarations: [
        AboutPage,
    ],
    imports: [
        IonicPageModule.forChild(AboutPage),
    ],
})
export class AboutPageModule { }

配置完成後目錄以下

2.增長@IonicPage()特性

以about.ts爲例，在@Component上方加上@IonicPage(),其餘須要懶加載的頁面也須要配置

3.在app.module.ts移除頁面引用；

4.使用懶加載

使用懶加載，只須要將以前的頁面名字用引號引發來便可，對應的也不須要在頂部進行import導入

tabs.ts

import { IonicPage } from 'ionic-angular';
import { Component } from '@angular/core';
@IonicPage()
@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  tab1Root = 'HomePage';
  tab2Root = 'ContactPage';
  tab3Root = 'AboutPage';
  constructor() {
  }
}

注意：當某個頁面使用懶加載後，報錯沒有找到，緣由是tabs裏面引入要加 雙引號 tab2Root = "AboutPage";