Skip to content

Commit f7ca77a

Browse files
mgechevmgechev
committed
feat(lazyLoading): implement lazy loading with inline templates
1 parent 1c88368 commit f7ca77a

File tree

6 files changed

+48
-57
lines changed

6 files changed

+48
-57
lines changed

‎src/client/app/about/about.module.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,4 @@ import { AboutRoutingModule } from './about-routing.module';
88
declarations: [AboutComponent],
99
exports: [AboutComponent]
1010
})
11-
export default class AboutModule { }
11+
export class AboutModule { }

‎src/client/app/app-routing.module.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export const AppRoutingModule = RouterModule.forRoot([
66
pathMatch: 'full',
77
redirectTo: 'home'
88
},
9-
{ path: 'home', loadChildren: './app/home/home.module' },
10-
{ path: 'about', loadChildren: './app/about/about.module' }
9+
{ path: 'home', loadChildren: './app/home/home.module#HomeModule' },
10+
{ path: 'about', loadChildren: './app/about/about.module#AboutModule' }
1111
]);
1212

‎src/client/app/app.module.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
33
import { APP_BASE_HREF } from '@angular/common';
4-
import { RouterModule } from '@angular/router';
54
import { HttpModule } from '@angular/http';
65
import { AppComponent } from './app.component';
76
import { AppRoutingModule } from './app-routing.module';

‎src/client/app/home/home.module.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { NgModule } from '@angular/core';
22
import { CommonModule } from '@angular/common';
3-
import { RouterModule } from '@angular/router';
43
import { SharedModule } from '../shared/shared.module';
54
import { HomeComponent } from './home.component';
65
import { NameListService } from '../shared/name-list/index';
@@ -12,5 +11,5 @@ import { HomeRoutingModule } from './home-routing.module';
1211
exports: [HomeComponent],
1312
providers: [NameListService]
1413
})
15-
export default class HomeModule { }
14+
export class HomeModule { }
1615

‎tools/config/seed.config.ts‎

Lines changed: 19 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -396,56 +396,35 @@ export class SeedConfig {
396396
SYSTEM_BUILDER_CONFIG: any = {
397397
defaultJSExtensions: true,
398398
base: this.PROJECT_ROOT,
399-
packageConfigPaths: [
400-
join('node_modules', '*', 'package.json'),
401-
join('node_modules', '@angular', '*', 'package.json')
402-
],
403399
paths: {
404400
// Note that for multiple apps this configuration need to be updated
405401
// You will have to include entries for each individual application in
406402
// `src/client`.
407403
[join(this.TMP_DIR, this.BOOTSTRAP_DIR, '*')]: `${this.TMP_DIR}/${this.BOOTSTRAP_DIR}/*`,
408404
'dist/tmp/node_modules/*': 'dist/tmp/node_modules/*',
405+
'@angular/common': 'node_modules/@angular/common/bundles/common.umd.js',
406+
'@angular/compiler': 'node_modules/@angular/compiler/bundles/compiler.umd.js',
407+
'@angular/core': 'node_modules/@angular/core/bundles/core.umd.js',
408+
'@angular/forms': 'node_modules/@angular/forms/bundles/forms.umd.js',
409+
'@angular/http': 'node_modules/@angular/http/bundles/http.umd.js',
410+
'@angular/platform-browser': 'node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
411+
'@angular/platform-browser-dynamic': 'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
412+
'@angular/router': 'node_modules/@angular/router/bundles/router.umd.js',
413+
414+
'@angular/common/testing': 'node_modules/@angular/common/bundles/common-testing.umd.js',
415+
'@angular/compiler/testing': 'node_modules/@angular/compiler/bundles/compiler-testing.umd.js',
416+
'@angular/core/testing': 'node_modules/@angular/core/bundles/core-testing.umd.js',
417+
'@angular/http/testing': 'node_modules/@angular/http/bundles/http-testing.umd.js',
418+
'@angular/platform-browser/testing':
419+
'node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js',
420+
'@angular/platform-browser-dynamic/testing':
421+
'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
422+
'@angular/router/testing': 'node_modules/@angular/router/bundles/router-testing.umd.js',
423+
409424
'node_modules/*': 'node_modules/*',
410425
'*': 'node_modules/*'
411426
},
412427
packages: {
413-
'@angular/common': {
414-
main: 'index.js',
415-
defaultExtension: 'js'
416-
},
417-
'@angular/compiler': {
418-
main: 'index.js',
419-
defaultExtension: 'js'
420-
},
421-
'@angular/core/testing': {
422-
main: 'index.js',
423-
defaultExtension: 'js'
424-
},
425-
'@angular/core': {
426-
main: 'index.js',
427-
defaultExtension: 'js'
428-
},
429-
'@angular/forms': {
430-
main: 'index.js',
431-
defaultExtension: 'js'
432-
},
433-
'@angular/http': {
434-
main: 'index.js',
435-
defaultExtension: 'js'
436-
},
437-
'@angular/platform-browser': {
438-
main: 'index.js',
439-
defaultExtension: 'js'
440-
},
441-
'@angular/platform-browser-dynamic': {
442-
main: 'index.js',
443-
defaultExtension: 'js'
444-
},
445-
'@angular/router': {
446-
main: 'index.js',
447-
defaultExtension: 'js'
448-
},
449428
'rxjs': {
450429
main: 'Rx.js',
451430
defaultExtension: 'js'

‎tools/tasks/seed/build.lazy-bundles.app.ts‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { appendFileSync } from 'fs';
12
import { join } from 'path';
23
import * as Builder from 'systemjs-builder';
34

@@ -28,24 +29,37 @@ const normalizeConfig = (bundles: any[]) => {
2829
});
2930
};
3031

32+
const addExtensions = `
33+
System.config({ defaultJSExtensions: true });
34+
(function () {
35+
Object.keys(System.defined).forEach(function (m) {
36+
if (!/\.js$/.test(m)) {
37+
System.defined[m + '.js'] = System.defined[m];
38+
}
39+
});
40+
}());
41+
`;
42+
3143
const bundleMain = () => {
32-
let builder = new Builder(Config.SYSTEM_BUILDER_CONFIG);
44+
const builder = new Builder(Config.SYSTEM_BUILDER_CONFIG);
45+
const mainpath = join(Config.TMP_DIR, Config.BOOTSTRAP_PROD_MODULE);
46+
const outpath = join(Config.JS_DEST, Config.JS_PROD_APP_BUNDLE);
3347
return builder
34-
.buildStatic(join(Config.TMP_DIR, Config.BOOTSTRAP_PROD_MODULE),
35-
join(Config.JS_DEST, Config.JS_PROD_APP_BUNDLE),
36-
BUNDLER_OPTIONS);
48+
.bundle(mainpath,
49+
outpath,
50+
Object.assign({ format: 'umd', BUNDLER_OPTIONS }))
51+
.then((res: any) => {
52+
appendFileSync(outpath, `System.import('${mainpath}.js');${addExtensions}`);
53+
return res.modules;
54+
});
3755
};
3856

39-
const bundleModule = (config: Bundle[], bundle: Bundle) => {
40-
const rest = config.filter(b => b !== bundle);
57+
const bundleModule = (config: Bundle[], exclude: string[], bundle: Bundle) => {
4158
let builder = new Builder(Config.SYSTEM_BUILDER_CONFIG);
4259
let all = join(Config.TMP_DIR, Config.BOOTSTRAP_DIR);
43-
let restModules = rest.map(b => {
44-
return join(Config.TMP_DIR, Config.BOOTSTRAP_DIR, b.path, b.module);
45-
}).join(' + ');
4660
let bootstrap = join(Config.TMP_DIR, Config.BOOTSTRAP_DIR, bundle.path, bundle.module);
4761
let bootstrapDir = join(Config.TMP_DIR, Config.BOOTSTRAP_DIR, bundle.path);
48-
let expression = `${bootstrap} - (${all}/**/*.js - ${bootstrapDir}/**/*.js)`;
62+
let expression = `${bootstrap} - (${all}/**/*.js - ${bootstrapDir}/**/*.js) - ${exclude.join(' - ')}`;
4963
console.log('bundling', expression);
5064
return builder
5165
.buildStatic(
@@ -65,7 +79,7 @@ const bundleModule = (config: Bundle[], bundle: Bundle) => {
6579
export = (done: any) => {
6680
const config = normalizeConfig(Config.BUNDLES);
6781
bundleMain()
68-
.then(() => Promise.all(config.map(bundleModule.bind(null, config))))
82+
.then((bundled: string[]) => Promise.all(config.map(bundleModule.bind(null, config, bundled))))
6983
.then(() => done())
7084
.catch((e: any) => done(e));
7185
};

0 commit comments

Comments
 (0)