anguar4 模块懒加载

发布时间:2019-07-03 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了anguar4 模块懒加载脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

Angular2+实现了模块化,组件化,所以如果一次加载所有模块,势必界面反应会比较慢,用户体验不好,所以实现模块的懒加载,单机路由的时候才加载相应的模块。

如果实际开发中,有一级菜单,二级菜单,那么一级菜单每个项目就可以作为一个模块。
1、定义一个懒加载的模块,现在app.module中配置路由

import {browserModule} From '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {HttpModule} from "@angular/http";

import {Appcomponent} from './app.COMponent';
import {MyFormComponent} from './my-form/my-form.component';
import {MyHttpComponent} from './my-http/my-http.component';

import {HttpClientModule} from "@angular/common/http";
import * as _ from "lodash";
import {HTTP_INTERCEPTORS} from "@angular/common/http";

import {
    ButtonModule
} from "PRimeng/primeng";
import {MyInterceptorService} from "./my-form/my-interceptor.service";


import {RouterModule, Routes} from "@angular/router";
import {OneModule} from "./one-module/one.module";

let routes: Routes = [
    {
        path: "",
        redirectTo: "one",
        pathMatch: "full"
    },
    {
        path: "one",
        loadChildren: "./one-module/one.module#OneModule"
    }
];

@NgModule({
    declarations: [
        AppComponent,
        MyFormComponent,
        MyHttpComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        HttpClientModule,
        ButtonModule,
        OneModule,
        RouterModule.forRoot(routes)
    ],
    providers: [
        // 导入拦截器
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MyInterceptorService,
            multi: true
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

2、one-module, 懒加载模块中定义自己的路由,实现二级菜单。

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {HttpModule} from "@angular/http";

import {AppComponent} from './app.component';
import {MyFormComponent} from './my-form/my-form.component';
import {MyHttpComponent} from './my-http/my-http.component';

import {HttpClientModule} from "@angular/common/http";
import * as _ from "lodash";
import {HTTP_INTERCEPTORS} from "@angular/common/http";

import {
    ButtonModule
} from "primeng/primeng";
import {MyInterceptorService} from "./my-form/my-interceptor.service";


import {RouterModule, Routes} from "@angular/router";
import {OneModule} from "./one-module/one.module";

let routes: Routes = [
    {
        path: "",
        redirectTo: "one",
        pathMatch: "full"
    },
    {
        path: "one",
        loadChildren: "./one-module/one.module#OneModule"
    }
];

@NgModule({
    declarations: [
        AppComponent,
        MyFormComponent,
        MyHttpComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        HttpClientModule,
        ButtonModule,
        OneModule,
        RouterModule.forRoot(routes)
    ],
    providers: [
        // 导入拦截器
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MyInterceptorService,
            multi: true
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

注意:

  1. app.module.ts中配置懒加载路由语法
let routes: Routes = [
    {
        path: "",
        redirectTo: "one",
        pathMatch: "full"
    },
    {
        path: "one",
        loadChildren: "./one-module/one.module#OneModule"
    }
];

2、记住要在app.module.ts中导入懒加载的模块

imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        HttpClientModule,
        ButtonModule,
        OneModule,
        RouterModule.forRoot(routes)
    ]

3、添加路由

<router-outlet></router-outlet>

4、配置懒加载模块中的路由

// 子模块中的路由
let routes: Routes = [
    {
        path: '',
        component: OneComponent
    }
];

懒加载模块中不需要再次引入
import {BrowserModule} from '@angular/platform-browser';

脚本宝典总结

以上是脚本宝典为你收集整理的anguar4 模块懒加载全部内容,希望文章能够帮你解决anguar4 模块懒加载所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。