本篇文章带大家了解一下angular中的路由配置，简单介绍一下预加载配置、懒加载配置，希望对大家有所帮助！
ngmodule作为angular模块的核心，下面首先就来讲一讲。
1、@ngmodule的作用：
ngmodule 最根本的意义是帮助开发者组织业务代码，开发者可以利用 ngmodule 把关系比较紧密的组件组织到一起，这是首要的。ngmodule 用来控制组件、指令、管道等是否可以使用，处于同一个 ngmodule 里面的组件默认互相可见，而对于外部的组件来说，只能看到 ngmodule 导出（ exports ）的内容，也就是说，如果你定义的 ngmodule 不 exports 任何内容，那么外部使用者即使 import 了你这个模块，也没法使用里面定义的任何内容。ngmodule 是打包时候用到的最小单位，打包的时候会检查所有 @ngmodule 和路由配置，angular底层是使用webpack打包。因为angular已经帮我们配置好了webpack，所以开发者轻松很多，否则就需要自己配置环境。ngmodule 是 router 进行异步加载的最小单位，router 能加载的最小单位是模块，而不是组件。当然，模块里面只放一个组件是允许的，很多组件库都是这样做的。【相关教程推荐：《angular教程》】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的相对路径#分隔符导出模块类的名称（3）预加载
在使用懒加载的情况下，路由第一次加载某个模块时，有时反应有延迟。这时就可以用预加载策略来解决这个问题。
angular提供了两种加载策略，
preloadallmodules-预加载nopreloading-没有预加载（默认）。routermodule.forroo()的第二个参数可以添加配置选项，配置选项中就有一个是preloadingstrategy配置，这个配置是一个预加载策略配置。
//使用默认预加载-预加载全部模块import { ngmodule } from '@angular/core'; import { appcomponent } from './app.component'; import { routes } from './main.routing'; import { routermodule } from '@angular/router'; import { preloadallmodules } from '@angular/router'; @ngmodule({ declarations: [appcomponent], imports: [ browsermodule, routermodule.forroot(routes, { preloadingstrategy: preloadallmodules }) ], providers: [], bootstrap: [appcomponent] }) export class appmodule { }
但是，我们更喜欢自己去控制对模块的预加载，这时就需要自定义预加载策略
a、自定义-5秒后加载所有模块
在app组建的同级新建一个custom-preloading-strategy.ts文件
import { route } from '@angular/router';import { preloadingstrategy } from '@angular/router';import { observable } from 'rxjs/rx';export class custompreloadingstrategy implements preloadingstrategy { preload(route: route, fn: () => observable<boolean>): observable<boolean> { return observable.of(true).delay(5000).flatmap((_: boolean) => fn()); }}
在app.modules.ts的providers中注入
import { browsermodule } from '@angular/platform-browser';import { ngmodule } from '@angular/core';import { appcomponent } from './app.component';import { homecomponent } from './home/home.component';import { routes } from './main.routing';import { routermodule } from '@angular/router';import { custompreloadingstrategy } from './preload';@ngmodule({ declarations: [ appcomponent, homecomponent ], imports: [ browsermodule, routermodule.forroot(routes, { preloadingstrategy: custompreloadingstrategy }) ], providers: [custompreloadingstrategy ], bootstrap: [appcomponent]})export class appmodule { }
b、自定义-指定模块预加载
在app组建的同级新建一个selective-preloading-strategy.ts文件（需要在app-routing.module.ts中的providers注入，然后在路由中定义的data通过附加参数来设置是否预加载）
import { injectable } from '@angular/core';import { preloadingstrategy, route } from '@angular/router';import { observable} from 'rxjs/observable';import 'rxjs/add/observable/of';@injectable()export class selectivepreloadingstrategy implements preloadingstrategy { preloadedmodules: string[] = []; preload(route: route, load: () => observable<any>): observable<any> { if (route.data && route.data['preload']) { return load(); } else { return observable.of(null); } }}
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: 'mian', loadchildren: './main/mian.module#mainmodule' }, // 懒加载(在这个层级的router配置文件及module文件都不需要引入该组建){ path: 'home', loadchildren: './home/home.module#homemodule', data: { preload: true } }, // 懒加载 + 预加载{ path: '**', component: pagenotfoundcomponent } // 注意要放到最后];@ngmodule({imports: [routermodule.forroot(approutes,{enabletracing: true, // <-- debugging purposes onlypreloadingstrategy: 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
目录aa.component.htmla.component.scssa.component.ts目录bb.component.htmlb.component.scssb.component.ts
比如在上面main.component.html有个区域用于放子视图（以下我都先讲思路，再放关键代码，其他不赘述）
<div>下面的区域是另一个路由出口</div><router-outlet></router-outlet><!--此处依照下面的路由配置，默认显示acomponent组件的内容-->
(1)、在main-routing.module.ts里面配置文件夹main下的路由，需要引用各组件的component(需要配置路由的组件)
import {ngmodule} from '@angular/core';import {routermodule, routes} from '@angular/router';import {maincomponent} from './main.component';import{acomponent} from './a/a.component';import{bcomponent} from './b/b.component';const mainroute: routes = [ { path: '', component: maincomponent, data: { title: '面试预约', }, children: [ { path: '',//path为空表示默认路由 component: acomponent, data: { title: '大活动', } }, { path: 'activity', component: bcomponent, data: { title: '中活动', } } ] }];@ngmodule({ imports: [ routermodule.forchild(mainroute) ], exports: [ routermodule ]})export class mainroutingmodule{}
（2）、main.service.ts一般用于放http请求
import { appservice } from './../../app.service';import { observable } from 'rxjs/observable';import { injectable } from '@angular/core';import { httpparams } from '@angular/common/http';import { pagedata, activitysmanage } from './model/activitys-manage';import { behaviorsubject } from 'rxjs';import {pagedatabig, activitysmall, pagedatasmall } from './model/activitys-manage';@injectable()export class mainservice { }
main文件夹下的组件如要调用mainservice,需要在组件的ts文件引入mainservice
（3）、在main.module.ts中引入各组件（包括自身、路由配置文件所用到的所有组件以及路由的module）
import { formsmodule } from '@angular/forms';import { commonmodule } from '@angular/common';import { maincomponent } from './interview-appointment.component';import { acomponent } from './a/a.component';import { bcomponent } from './b/b.component';import { ngmodule } from '@angular/core';import { coreframecommonmodule } from '../../common/common.module';import { mainroutingmodule } from './main-routing.module';import { ngzorroantdmodule } from '../../zorro/ng-zorro-antd.module';import { mainservice } from './interview-appointment.service';@ngmodule({ imports: [formsmodule,coreframecommonmodule, commonmodule, mainroutingmodule,ngzorroantdmodule], exports: [], declarations: [maincomponent,acomponent,bcomponent], providers: [mainservice],})export class mainmodule{ }
更多编程相关知识，请访问：编程视频！！
以上就是浅谈angular中的预加载配置、懒加载配置的详细内容。