angular-cli lazy loading 懒加载

安装angular-cli

npm install -g @angular/cli

如果你使用的的是 beta.28或更以前的版本升级前需要先卸载angular-cli,因为 angular-cli 已经变成了 @angular/cli

升级Angular CLI,你需要同时升级全局的和项目本地目录中的,避免出现一些难以排查的问题

安装完成后运行命令?ng version?我现在使用的版本是1.0.0 ,安装时候请注意node的版本

 

新建项目

使用命令

ng new angular-cli-lazyloading

注意:npm 包下载安装会需要一段时间,请耐心等待出现successfully created

 

路由

我们参照官方的教程(https://www.angular.cn/docs/ts/latest/tutorial/toh-pt5.html)来配置一下路由实现home页和about页面的切换

我们创建两个组件,home和about

在这里我还创建了一个about的module,随后的懒加载会用到

 

app.module.ts

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

import {AppComponent} from './app.component';
import {HomeComponent} from './home/home.component';
import {RouterModule, Routes} from '@angular/router';
import {AboutComponent} from './about/about.component';

const rootRoutes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'about', component: AboutComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(rootRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

 

app.component.html

<nav>
  <a routerLink="/home">Home</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

 

修改以上代码就可以实现一个简单的路由功能

 

懒加载 Lazy Loading

现在开始我们修改代码来实现懒加载

首先我们来修改稍早建立的about.module.ts

 

然后修改app.module.ts的路由部分

完成!就是这么简单,通过loadChildren来实现懒加载

 

现在运行 ng serve看看效果

可以看到在加载about的时候多了一个0.chunk.js的文件

安装angular-cli

npm install -g @angular/cli

如果你使用的的是 beta.28或更以前的版本升级前需要先卸载angular-cli,因为 angular-cli 已经变成了 @angular/cli

升级Angular CLI,你需要同时升级全局的和项目本地目录中的,避免出现一些难以排查的问题

安装完成后运行命令?ng version?我现在使用的版本是1.0.0 ,安装时候请注意node的版本

 

新建项目

使用命令

ng new angular-cli-lazyloading

注意:npm 包下载安装会需要一段时间,请耐心等待出现successfully created

 

路由

我们参照官方的教程(https://www.angular.cn/docs/ts/latest/tutorial/toh-pt5.html)来配置一下路由实现home页和about页面的切换

我们创建两个组件,home和about

在这里我还创建了一个about的module,随后的懒加载会用到

 

app.module.ts

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

import {AppComponent} from './app.component';
import {HomeComponent} from './home/home.component';
import {RouterModule, Routes} from '@angular/router';
import {AboutComponent} from './about/about.component';

const rootRoutes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'about', component: AboutComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(rootRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

 

app.component.html

<nav>
  <a routerLink="/home">Home</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

 

修改以上代码就可以实现一个简单的路由功能

 

懒加载 Lazy Loading

现在开始我们修改代码来实现懒加载

首先我们来修改稍早建立的about.module.ts

 

然后修改app.module.ts的路由部分

完成!就是这么简单,通过loadChildren来实现懒加载

 

现在运行 ng serve看看效果

可以看到在加载about的时候多了一个0.chunk.js的文件