├── .gitignore
├── src
    ├── app
    │   ├── home
    │   │   ├── home.component.html
    │   │   ├── home.component.ts
    │   │   ├── home.module.ts
    │   │   └── home.routing.ts
    │   ├── +about
    │   │   ├── about.component.html
    │   │   ├── about.component.ts
    │   │   ├── about.module.ts
    │   │   └── about.routing.ts
    │   ├── app.component.ts
    │   ├── app.component.html
    │   ├── app.routing.ts
    │   └── app.module.ts
    ├── polyfills.ts
    ├── main.ts
    ├── index.html
    └── vendor.ts
├── webpack.config.js
├── README.md
├── typings.json
├── config
    ├── helpers.js
    ├── webpack.dev.js
    ├── webpack.prod.js
    └── webpack.common.js
├── tsconfig.json
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | typings
2 | node_modules
3 | dist
4 | 


--------------------------------------------------------------------------------
/src/app/home/home.component.html:
--------------------------------------------------------------------------------
1 | <h1>Home</h1>


--------------------------------------------------------------------------------
/src/app/+about/about.component.html:
--------------------------------------------------------------------------------
1 | <h1>About</h1>


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./config/webpack.dev.js');


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # angular2-lazy-load-example
 2 | Angular 2 lazy load example
 3 | 
 4 | ## How run run the application
 5 | 
 6 | npm install
 7 | npm run start
 8 | 
 9 | navigate to localhost:8080
10 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |   selector: 'my-app',
5 |   templateUrl: './app.component.html'
6 | })
7 | export class AppComponent { }
8 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <nav>
2 |   <a routerLink="/home" routerLinkActive="active">Home</a>
3 |   <a routerLink="/about" routerLinkActive="active">About (lazy)</a>
4 | </nav>
5 | 
6 | <router-outlet></router-outlet>


--------------------------------------------------------------------------------
/typings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "globalDependencies": {
3 |     "core-js": "registry:dt/core-js#0.0.0+20160725163759",
4 |     "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
5 |     "node": "registry:dt/node#6.0.0+20160909174046"
6 |   }
7 | }


--------------------------------------------------------------------------------
/config/helpers.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var _root = path.resolve(__dirname, '..');
3 | 
4 | function root(args) {
5 |   args = Array.prototype.slice.call(arguments, 0);
6 |   return path.join.apply(path, [_root].concat(args));
7 | }
8 | 
9 | exports.root = root;


--------------------------------------------------------------------------------
/src/app/+about/about.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'about',
 5 |   templateUrl: 'about.component.html'
 6 | })
 7 | export class AboutComponent implements OnInit {
 8 |   constructor() { }
 9 | 
10 |   ngOnInit() { }
11 | }


--------------------------------------------------------------------------------
/src/app/home/home.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'home',
 5 |   templateUrl: './home.component.html'
 6 | })
 7 | export class HomeComponent implements OnInit {
 8 |   constructor() { }
 9 | 
10 |   ngOnInit() { }
11 | }


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | import 'core-js/es6';
 2 | import 'core-js/es7/reflect';
 3 | require('zone.js/dist/zone');
 4 | 
 5 | if (process.env.ENV === 'production') {
 6 |   // Production
 7 | } else {
 8 |   // Development
 9 |   Error['stackTraceLimit'] = Infinity;
10 |   require('zone.js/dist/long-stack-trace-zone');
11 | }


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | import { enableProdMode } from '@angular/core';
3 | import { AppModule } from './app/app.module';
4 | 
5 | if (process.env.ENV === 'production') {
6 |   enableProdMode();
7 | }
8 | 
9 | platformBrowserDynamic().bootstrapModule(AppModule);


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <base href="/">
 5 |     <title>Angular Lazy Load Example</title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   </head>
 9 |   <body>
10 |     <my-app>Loading...</my-app>
11 |   </body>
12 | </html>


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "commonjs",
 5 |     "moduleResolution": "node",
 6 |     "sourceMap": true,
 7 |     "emitDecoratorMetadata": true,
 8 |     "experimentalDecorators": true,
 9 |     "removeComments": false,
10 |     "noImplicitAny": true,
11 |     "suppressImplicitAnyIndexErrors": true
12 |   }
13 | }


--------------------------------------------------------------------------------
/src/vendor.ts:
--------------------------------------------------------------------------------
 1 | // Angular 2
 2 | import '@angular/platform-browser';
 3 | import '@angular/platform-browser-dynamic';
 4 | import '@angular/core';
 5 | import '@angular/common';
 6 | import '@angular/http';
 7 | import '@angular/router';
 8 | 
 9 | // RxJS
10 | import 'rxjs';
11 | 
12 | // Other vendors for example jQuery, Lodash or Bootstrap
13 | // You can import js, ts, css, sass, ...


--------------------------------------------------------------------------------
/src/app/home/home.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | 
 3 | import { HomeRoutingModule } from './home.routing';
 4 | import { HomeComponent }   from './home.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     HomeRoutingModule
 9 |   ],
10 |   exports: [],
11 |   declarations: [HomeComponent],
12 |   providers: [],
13 | })
14 | export class HomeModule { }
15 | 


--------------------------------------------------------------------------------
/src/app/+about/about.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | 
 3 | import { AboutRoutingModule } from './about.routing';
 4 | 
 5 | import { AboutComponent }   from './about.component';
 6 | 
 7 | @NgModule({
 8 |   imports: [
 9 |     AboutRoutingModule
10 |   ],
11 |   exports: [],
12 |   declarations: [AboutComponent],
13 |   providers: [],
14 | })
15 | export class AboutModule { }
16 | 


--------------------------------------------------------------------------------
/src/app/+about/about.routing.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { Routes, RouterModule } from '@angular/router';
 3 | 
 4 | import { AboutComponent } from './about.component';
 5 | 
 6 | const routes: Routes = [
 7 |   { path: '', component: AboutComponent },
 8 | ];
 9 | 
10 | @NgModule({
11 |   imports: [RouterModule.forChild(routes)],
12 |   exports: [RouterModule],
13 | })
14 | export class AboutRoutingModule { }


--------------------------------------------------------------------------------
/src/app/home/home.routing.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { Routes, RouterModule } from '@angular/router';
 3 | 
 4 | import { HomeComponent } from './home.component';
 5 | 
 6 | const routes: Routes = [
 7 |   { path: 'home', component: HomeComponent },
 8 | ];
 9 | 
10 | @NgModule({
11 |   imports: [RouterModule.forChild(routes)],
12 |   exports: [RouterModule],
13 | })
14 | export class HomeRoutingModule { }
15 | 


--------------------------------------------------------------------------------
/src/app/app.routing.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { Routes, RouterModule } from '@angular/router';
 3 | 
 4 | import { AppComponent } from './app.component';
 5 | 
 6 | const routes: Routes = [
 7 |   { path: '', redirectTo: '/home', pathMatch: 'full' },
 8 |   { path: 'about', loadChildren: './+about/about.module#AboutModule' }
 9 | ];
10 | 
11 | @NgModule({
12 |   imports: [RouterModule.forRoot(routes)],
13 |   exports: [RouterModule],
14 | })
15 | export class AppRoutingModule { }
16 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { BrowserModule  } from '@angular/platform-browser';
 3 | import { HttpModule } from '@angular/http';
 4 | 
 5 | import { AppComponent } from './app.component';
 6 | import { AppRoutingModule } from './app.routing'; 
 7 | 
 8 | import { HomeModule } from './home/home.module';
 9 | 
10 | @NgModule({
11 |   imports: [
12 |     BrowserModule,
13 |     HttpModule,
14 |   
15 |     AppRoutingModule,
16 | 
17 |     HomeModule
18 |   ],
19 |   declarations: [AppComponent],
20 |   providers: [],
21 |   bootstrap: [AppComponent],
22 | })
23 | export class AppModule { }
24 | 


--------------------------------------------------------------------------------
/config/webpack.dev.js:
--------------------------------------------------------------------------------
 1 | var webpackMerge = require('webpack-merge');
 2 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 3 | var commonConfig = require('./webpack.common.js');
 4 | var helpers = require('./helpers');
 5 | 
 6 | module.exports = webpackMerge(commonConfig, {
 7 |   devtool: 'cheap-module-eval-source-map',
 8 | 
 9 |   output: {
10 |     path: helpers.root('dist'),
11 |     publicPath: 'http://localhost:8080/',
12 |     filename: '[name].js',
13 |     chunkFilename: '[id].chunk.js'
14 |   },
15 | 
16 |   plugins: [
17 |     new ExtractTextPlugin('[name].css')
18 |   ],
19 | 
20 |   devServer: {
21 |     historyApiFallback: true,
22 |     stats: 'minimal'
23 |   }
24 | });


--------------------------------------------------------------------------------
/config/webpack.prod.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var webpackMerge = require('webpack-merge');
 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 4 | var commonConfig = require('./webpack.common.js');
 5 | var helpers = require('./helpers');
 6 | 
 7 | const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
 8 | 
 9 | module.exports = webpackMerge(commonConfig, {
10 |   devtool: 'source-map',
11 | 
12 |   output: {
13 |     path: helpers.root('dist'),
14 |     publicPath: '/',
15 |     filename: '[name].[hash].js',
16 |     chunkFilename: '[id].[hash].chunk.js'
17 |   },
18 | 
19 |   htmlLoader: {
20 |     minimize: false // workaround for ng2
21 |   },
22 | 
23 |   plugins: [
24 |     new webpack.NoErrorsPlugin(),
25 |     new webpack.optimize.DedupePlugin(),
26 |     new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
27 |       mangle: {
28 |         keep_fnames: true
29 |       }
30 |     }),
31 |     new ExtractTextPlugin('[name].[hash].css'),
32 |     new webpack.DefinePlugin({
33 |       'process.env': {
34 |         'ENV': JSON.stringify(ENV)
35 |       }
36 |     })
37 |   ]
38 | });


--------------------------------------------------------------------------------
/config/webpack.common.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 4 | var helpers = require('./helpers');
 5 | 
 6 | module.exports = {
 7 |   entry: {
 8 |     'polyfills': './src/polyfills.ts',
 9 |     'vendor': './src/vendor.ts',
10 |     'app': './src/main.ts'
11 |   },
12 | 
13 |   resolve: {
14 |     extensions: ['', '.js', '.ts']
15 |   },
16 | 
17 |   module: {
18 |     loaders: [
19 |       {
20 |         test: /\.ts$/,
21 |         loaders: ['awesome-typescript-loader', 'angular2-template-loader', 'angular2-router-loader']
22 |       },
23 |       {
24 |         test: /\.html$/,
25 |         loader: 'html'
26 |       },
27 |       {
28 |         test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
29 |         loader: 'file?name=assets/[name].[hash].[ext]'
30 |       },
31 |       {
32 |         test: /\.css$/,
33 |         exclude: helpers.root('src', 'app'),
34 |         loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
35 |       },
36 |       {
37 |         test: /\.css$/,
38 |         include: helpers.root('src', 'app'),
39 |         loader: 'raw'
40 |       }
41 |     ]
42 |   },
43 | 
44 |   plugins: [
45 |     new webpack.optimize.CommonsChunkPlugin({
46 |       name: ['app', 'vendor', 'polyfills']
47 |     }),
48 | 
49 |     new HtmlWebpackPlugin({
50 |       template: 'src/index.html'
51 |     })
52 |   ]
53 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ng2-lazy-load-example",
 3 |   "version": "1.0.0",
 4 |   "description": "Angular 2 Lazy Load Example",
 5 |   "scripts": {
 6 |     "start": "webpack-dev-server --inline --progress --port 8080",
 7 |     "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
 8 |     "postinstall": "typings install"
 9 |   },
10 |   "license": "MIT",
11 |   "dependencies": {
12 |     "@angular/common": "2.0.0",
13 |     "@angular/compiler": "2.0.0",
14 |     "@angular/core": "2.0.0",
15 |     "@angular/forms": "2.0.0",
16 |     "@angular/http": "2.0.0",
17 |     "@angular/platform-browser": "2.0.0",
18 |     "@angular/platform-browser-dynamic": "2.0.0",
19 |     "@angular/router": "3.0.0",
20 |     "core-js": "^2.4.1",
21 |     "rxjs": "5.0.0-beta.12",
22 |     "zone.js": "^0.6.23"
23 |   },
24 |   "devDependencies": {
25 |     "angular2-router-loader": "^0.2.2",
26 |     "angular2-template-loader": "^0.4.0",
27 |     "awesome-typescript-loader": "^3.0.0-beta.17",
28 |     "css-loader": "^0.23.1",
29 |     "extract-text-webpack-plugin": "^1.0.1",
30 |     "file-loader": "^0.8.5",
31 |     "html-loader": "^0.4.3",
32 |     "html-webpack-plugin": "^2.15.0",
33 |     "jasmine-core": "^2.4.1",
34 |     "karma": "^1.2.0",
35 |     "karma-jasmine": "^1.0.2",
36 |     "karma-phantomjs-launcher": "^1.0.2",
37 |     "karma-sourcemap-loader": "^0.3.7",
38 |     "karma-webpack": "^1.8.0",
39 |     "phantomjs-prebuilt": "^2.1.7",
40 |     "raw-loader": "^0.5.1",
41 |     "reflect-metadata": "^0.1.8",
42 |     "rimraf": "^2.5.2",
43 |     "style-loader": "^0.13.1",
44 |     "ts-loader": "^0.8.1",
45 |     "typescript": "^2.1.4",
46 |     "typings": "^1.3.2",
47 |     "webpack": "^1.13.0",
48 |     "webpack-dev-server": "^1.14.1",
49 |     "webpack-merge": "^0.14.0"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------