ionic4 懒加载

码云Git：Ionic4_Tabs

效果图Gif：

lazy.gif

新建app-routing.moduie.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes, NoPreloading } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./login/login.module').then(m => m.LoginPageModule)
  },
  {
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  }
];
@NgModule({
  imports: [
    //preloadingStrategy: 提供2种策略
    RouterModule.forRoot(routes, { preloadingStrategy: NoPreloading }) //无预加载
    //RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) //加载全部
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

在app.module.ts引入AppRoutingModule ：

1.png

---

至此，浏览器输入http://localhost:8100，只加载login模块。
接着，点击【登录】，只加载tabs模块和home模块,
点击【推荐】，加载recommend模块，
点击【发现】，加载find模块，
点击【我的】，加载me模块。

---

新建tabs.router.module.ts，

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: 'home',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../home/home.module').then(m => m.HomePageModule)
          },
        ]
      },
      {
        path: 'recommend',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../recommend/recommend.module').then(m => m.RecommendPageModule)
          }
        ]
      },
      {
        path: 'find',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../find/find.module').then(m => m.FindPageModule)
          }
        ]
      },
      {
        path: 'me',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../me/me.module').then(m => m.MePageModule)
          }
        ]
      },
      {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class TabsPageRoutingModule {}

在tabs.module.ts引入TabsPageRoutingModule ：

2.png

最后，列举【首页】的路由：

import { IonicModule } from '@ionic/angular';
import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import { OpenNativeSettings } from '@ionic-native/open-native-settings/ngx';

const routes: Routes = [
  {
    path: '',
    component: HomePage
  },
  {
    path: 'site',
    loadChildren: () =>
      import('../home/site/site.module').then(m => m.SiteModule)
  }
]
@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    HomePage
  ],
  providers: [
    OpenNativeSettings
  ]
})

export class HomePageModule { }