angular配置懒加载路由的思路

前言

    本人记性不好，对于别人很容易记住的事情，我愣是记不住，所以还是靠烂笔头来帮我长长记性。

　参考文章：https://blog.csdn.net/xif3681/article/details/84584317

正文

NgModule作为Angular模块的核心，下面首先就来讲一讲。

1.@NgModule的作用：

• NgModule 最根本的意义是帮助开发者组织业务代码，开发者可以利用 NgModule 把关系比较紧密的组件组织到一起，这是首要的。
• NgModule 用来控制组件、指令、管道等是否可以使用，处于同一个 NgModule 里面的组件默认互相可见，而对于外部的组件来说，只能看到 NgModule 导出（ exports ）的内容，也就是说，如果你定义的 NgModule 不 exports 任何内容，那么外部使用者即使 import 了你这个模块，也没法使用里面定义的任何内容。
• NgModule 是打包时候用到的最小单位，打包的时候会检查所有 @NgModule 和路由配置，Angular底层是使用webpack打包。因为Angular已经帮我们配置好了webpack，所以开发者轻松很多，否则就需要自己配置环境。
• NgModule 是 Router 进行异步加载的最小单位，Router 能加载的最小单位是模块，而不是组件。当然，模块里面只放一个组件是允许的，很多组件库都是这样做的。

2.@NgModule结构说明：

@NgModule({ 
　　declarations: [], //属于当前模块的组件、指令及管道
　　imports: [], //当前模板所依赖的项，即外部模块（包括httpModule、路由等）
　　export:[],//声明出应用给其他的module使用
　　providers: [], //注入服务到当前模块
　　bootstrap: []//默认启动哪个组件(只有根模块才能设置bootstrap属性)
}) 

3.懒加载说明

（1）RouterModule对象提供了两个静态的方法:forRoot()和forChild()来配置路由信息。

• forRoot()//在主模块中定义主要的路由信息
• forChild()//应用在特性模块（子模块）中

（2）懒加载：loadChildren

此处并没有将对应的模块加入到AppModule中，而是通过loadChildren属性，告诉Angular路由依据loadChildren属性配置的路径去加载对应的模块。这就是模块懒加载功能的具体应用，当用户访问 /xxx/** 路径的时候，才会加载对应的模块，这减少了应用启动时加载资源的大小。 loadChildren的属性值由三部分组成：

• 需要导入Module的相对路径
• #分隔符
• 导出模块类的名称

app-routing.module.ts

import { NgModule } from ‘@angular/core‘;
import { RouterModule, Routes } from ‘@angular/router‘;
import { CanDeactivateGuard } from ‘./guard/can-deactivate-guard.service‘;
import { SelectivePreloadingStrategy } from ‘./selective-preloading-strategy‘; // 预加载
import { PageNotFoundComponent } from ‘./not-found.component‘;
const appRoutes: Routes = [
{ path: ‘‘, redirectTo: ‘home‘, pathMatch: ‘full‘},
{ path: ‘login‘, loadChildren: ‘./login/login.module#LoginModule‘ }, // 懒加载
{ path: ‘home‘, loadChildren: ‘./home/home.module#HomeModule‘, data: { preload: true } }, // 懒加载 + 预加载
{ path: ‘**‘, component: PageNotFoundComponent } // 注意要放到最后
];
@NgModule({
　　imports: [
　　　　RouterModule.forRoot(appRoutes,{
　　　　　　enableTracing: true, // <-- debugging purposes only
　　　　　　preloadingStrategy: SelectivePreloadingStrategy // 预加载
　　　　})
　　],
　　exports: [
　　　　RouterModule
　　],
　　providers: [
　　　　CanDeactivateGuard,
　　　　SelectivePreloadingStrategy
　　]
})
export class AppRoutingModule { }

4.子路由创建步骤（没有靠指令创建，直接手动）

（1）新建主文件夹

目录main

• main.component.html
• main.component.scss
• main.component.ts
• main.module.ts
• main-routing.module.ts
• main.service.ts
目录A
A.component.htmlA.component.scssA.component.ts
目录B
B.component.htmlB.component.scssB.component.ts

angular配置懒加载路由的思路

原文：https://www.cnblogs.com/myyouzi/p/11840067.html