Angular 2 lazy loading is a core feature of Angular 2. Lazy loading allows your application to start up faster because it only needs to use the main App Module when the page initially loads. As you navigate between routes, it will load the additional modules as you define them in your routes. Make sure to properly organize your files into Angular 2’s module pattern so that files that belong to each module don’t get required by other modules.

First we need to arrange the component into different module.

Create Four files

  • home.module.ts
  • home.routes.ts
  • contact.module.ts
  • contact.routes.ts

Each modue.ts will the entery file for this module, Angualr2 lazy loads the module in by router.

app.routes.ts:

import {RouterModule} from "@angular/router";
const routes = [
{path: '', loadChildren: 'app/home/home.module'},
{path: 'contact', loadChildren: 'app/contact/contact.module'},
]; export default RouterModule.forRoot(routes);

Here we use 'loadChildren' instead of 'component'. This helps lazy loading, to deduce the bundle size.

Also we point to the location of the module file for each component.

'forRoot': because app.routes.ts is the main entery point, for each child module, we will use 'forChild'

home.routes.ts:

import {HomeComponent} from "./home.component";
import {RouterModule} from "@angular/router";
const routes = [
{path: '', component: HomeComponent}
];
export default RouterModule.forChild(routes);

home.module.ts:

import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {HomeComponent} from "./home.component";
import {SearchBarComponent} from "./search-bar/search-bar.component";
import {ResultListComponent} from "./result-list/result-list.component";
import homeRoutes from './home.routes';
@NgModule({
imports: [
CommonModule,
homeRoutes
],
declarations: [HomeComponent, SearchBarComponent, ResultListComponent],
exports: [HomeComponent, SearchBarComponent, ResultListComponent]
}) export default class HomeModule{}

In module file, we import routes.

The same partten for contact component. To prove that, when we click the contact routeLink, we can see from the Devtool Netwrok panel, it load the contact module:

Github

[Angular2 Router] Lazy Load Angular 2 Modules with the Router的更多相关文章

  1. [AngularJS] Lazy loading Angular modules with ocLazyLoad

    With the ocLazyLoad you can load AngularJS modules on demand. This is very handy for runtime loading ...

  2. [Angular Router] Lazy loading Module with Auxiliary router

    Found the way to handle Auxiliary router for lazy loading moudle and erge load module are different. ...

  3. [Angular2 Router] Exiting an Angular 2 Route - How To Prevent Memory Leaks

    In this tutorial we are going to learn how we can accidentally creating memory leaks in our applicat ...

  4. [Angular] Lazy Load CSS at runtime with the Angular CLI

    Ever had the need for multiple "app themes", or even to completely dynamically load CSS ba ...

  5. [Vuex] Lazy Load a Vuex Module at Runtime using TypeScript

    Sometimes we need to create modules at runtime, for example depending on a condition. We could even ...

  6. [Vue] Lazy Load a Route by using the Dynamic Import in Vue.js

    By default, vue-router doesn’t lazy load the routes unless you tell it to do it. Lazy loading of the ...

  7. Lazy Load, 延迟加载图片的 jQuery 插件.

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  8. jQuery延迟加载插件(Lazy Load)详解

    最 新版本的Lazy Load并不能替代你的网页.即便你使用JavaScript移除了图片的src属性,有些现代的浏览器仍然会加载图片.现在你必须修改你的html代 码,使用占位图片作为img标签的s ...

  9. D:/apache2/conf/httpd.conf:Cannot load D:/apache2/modules/mod_actions.so

    报错如下: errors reported here must be corrected before service can be started.httpd:Syntax error on lin ...

随机推荐

  1. OpenGl从零开始之坐标变换(下)

    这节主要来理解投影变换和视口变换的使用. 1.正射投影:glOrtho 函数原型: void glOrtho(GLdouble left,GLdouble right,GLdouble bottom, ...

  2. leetcode:ZigZag Conversion 曲线转换

    Question: The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of ...

  3. mybatis源码学习: 动态代理的应用(慢慢改)

    动态代理概述 在学spring的时候知道使用动态代理实现aop,入门的列子:需要计算所有方法的调用时间.可以每个方法开始和结束都获取当前时间咋办呢.类似这样: long current=system. ...

  4. 【C#】Abstract和Virtual的区别

    一.Virtual方法(虚方法) virtual 关键字用于在基类中修饰方法.virtual的使用会有两种情况: 情况1:在基类中定义了virtual方法,但在派生类中没有重写该虚方法.那么在对派生类 ...

  5. Flex通信-与Java实现Socket通信实例

    Flex通信-与Java实现Socket通信实例  转自:http://blessht.iteye.com/blog/1136888 博客分类: Flex 环境准备 [服务器端] JDK1.6,“ja ...

  6. Strom学习笔记一

    ---恢复内容开始--- Storm 是个实时的.分布式以及具备高容错的计算系统.同Hadoop一样Storm也可以处理大批量的数据,然而Storm在保证高可靠性的前提下还可以让处理进行的更加实时:也 ...

  7. Ubuntu 下无法Tab键自动补全功能解决办法

    在Ubuntu下 使用Tab键报错:cannot create temp file for here-document: no space left on device 解决: rm -rf /var ...

  8. iOS 后台退出app时不执行applicationWillTerminate的临时解决方法

    - (void)applicationDidEnterBackground:(UIApplication *)application { // Use this method to release s ...

  9. sqlserver中GUID的默认值设置

    sqlserver中GUID的默认值设置 YID uniqueidentifier not null default (NEWSEQUENTIALID()), //有序GUID(只能用于表设计的时候的 ...

  10. 【转】从零开始编写自己的C#框架(7)——需求分析

    转自:http://www.cnblogs.com/EmptyFS/p/3653934.html 本章内容虽然叫“需求分析”,实际上关于具体的需求分析操作步骤并没有深入去写,因为细化的话那将是一本厚厚 ...