Skip to content
This repository was archived by the owner on Dec 7, 2018. It is now read-only.

Commit 90a573a

Browse files
Ks89Ks89
committed
AOT is working also with webpack with the dedicated npm script. ATTENTION: temporary removed lazy loading
1 parent ac3e249 commit 90a573a

16 files changed

+94
-160
lines changed

‎config/helpers.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,19 @@
33
const path = require('path');
44
const _root = path.resolve(__dirname, '..');
55
const root = (...args) => path.join.apply(path, [_root].concat(args));
6+
7+
8+
const EVENT = process.env.npm_lifecycle_event || '';
9+
10+
function hasProcessFlag(flag) {
11+
return process.argv.join('').indexOf(flag) > -1;
12+
}
13+
14+
function hasNpmFlag(flag) {
15+
return EVENT.includes(flag);
16+
}
17+
18+
19+
exports.hasProcessFlag = hasProcessFlag;
20+
exports.hasNpmFlag = hasNpmFlag;
621
exports.root = root;

‎config/resource-override.js‎

Whitespace-only changes.

‎config/webpack.common.js‎

Lines changed: 49 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const ManifestPlugin = require('webpack-manifest-plugin');
1515
const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin');
1616
const autoprefixer = require('autoprefixer');
1717
const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
18+
const ngcWebpack = require('ngc-webpack');
1819

1920
const helpers = require('./helpers');
2021
const TITLE = 'My MEAN Website';
@@ -24,11 +25,13 @@ const TEMPLATE_ADMIN_PATH = './src/admin.ejs';
2425
const TEMPLATE_HTML = 'index.html';
2526
const TEMPLATE_ADMIN_HTML = 'admin.html';
2627

28+
const AOT = helpers.hasNpmFlag('aot');
29+
2730
module.exports = {
2831
entry: {
2932
polyfills: './src/polyfills.ts',
30-
app: './src/main.ts',
31-
admin: './src/admin.ts'
33+
app: AOT ? './src/main.aot.ts' : './src/main.ts',
34+
admin: AOT ? './src/admin.aot.ts' : './src/admin.ts',
3235
},
3336
resolve: {
3437
descriptionFiles: ['package.json'],
@@ -43,29 +46,49 @@ module.exports = {
4346
loader: 'tslint-loader',
4447
exclude: [/\.(spec|e2e)\.ts$/, /node_modules/]
4548
},
49+
4650
{
4751
test: /\.ts$/,
48-
loaders: 'awesome-typescript-loader',
49-
query: {
50-
forkChecker: true
51-
},
52-
exclude: [/\.(spec|e2e)\.ts$/]
53-
},
54-
{
55-
test: /\.ts$/,
56-
loaders: [
52+
use: [
53+
'@angularclass/hmr-loader',
54+
'awesome-typescript-loader?{configFileName: "tsconfig-aot.json"}',
5755
'angular2-template-loader',
58-
'@angularclass/hmr-loader'
59-
],
60-
exclude: [/\.(spec|e2e)\.ts$/]
61-
},
62-
{
63-
test: /\.ts$/,
64-
loaders: [
65-
'angular-router-loader' // lazy Loading
56+
{
57+
loader: 'ng-router-loader',
58+
options: {
59+
loader: 'async-system',
60+
genDir: 'compiled',
61+
aot: AOT
62+
}
63+
}
6664
],
6765
exclude: [/\.(spec|e2e)\.ts$/]
6866
},
67+
68+
69+
// {
70+
// test: /\.ts$/,
71+
// loaders: 'awesome-typescript-loader',
72+
// query: {
73+
// forkChecker: true
74+
// },
75+
// exclude: [/\.(spec|e2e)\.ts$/]
76+
// },
77+
// {
78+
// test: /\.ts$/,
79+
// loaders: [
80+
// 'angular2-template-loader',
81+
// '@angularclass/hmr-loader'
82+
// ],
83+
// exclude: [/\.(spec|e2e)\.ts$/]
84+
// },
85+
// {
86+
// test: /\.ts$/,
87+
// loaders: [
88+
// 'angular-router-loader' // lazy Loading
89+
// ],
90+
// exclude: [/\.(spec|e2e)\.ts$/]
91+
// },
6992
{
7093
test: /\.html$/,
7194
loader: 'raw-loader'
@@ -198,7 +221,14 @@ module.exports = {
198221
formattersDirectory: "./node_modules/tslint-loader/formatters/"
199222
}
200223
}
224+
}),
225+
226+
new ngcWebpack.NgcWebpackPlugin({
227+
disabled: !AOT,
228+
tsConfig: helpers.root('tsconfig-aot.json'),
229+
resourceOverride: helpers.root('config/resource-override.js')
201230
})
231+
202232
],
203233
node: {
204234
global: true,

‎config/webpack.prod.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
1212
const commonConfig = require('./webpack.common.js');
1313
const helpers = require('./helpers');
1414

15-
const ENV = process.env.NODE_ENV = 'prod';
15+
const ENV = process.env.NODE_ENV = 'production';
1616
const METADATA = {env: ENV};
1717

1818
module.exports = webpackMerge(commonConfig, {

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
"npm": ">=3.8.6"
1414
},
1515
"scripts": {
16+
"build:aot:prod": "./node_modules/.bin/webpack --config config/webpack.prod.js --colors --progress --display-error-details --display-cached --profile",
17+
"build:aot": "npm run build:aot:prod",
1618
"start": "./node_modules/.bin/webpack-dev-server --progress --port 8080",
1719
"pretest": "npm run clean-coverage",
1820
"test": "./node_modules/.bin/karma start --single-run",
@@ -70,7 +72,6 @@
7072
"@types/lodash": "^4.14.50",
7173
"@types/node": "^7.0.0",
7274
"@types/selenium-webdriver": "^2.53.39",
73-
"angular-router-loader": "^0.5.0",
7475
"angular2-template-loader": "^0.6.0",
7576
"autoprefixer": "^6.6.1",
7677
"awesome-typescript-loader": "^2.2.4",
@@ -109,6 +110,8 @@
109110
"karma-sourcemap-loader": "^0.3.7",
110111
"karma-webpack": "^2.0.1",
111112
"mkdirp": "^0.5.1",
113+
"ng-router-loader": "^2.0.0",
114+
"ngc-webpack": "^1.1.2",
112115
"node-sass": "^4.3.0",
113116
"node-static": "^0.7.8",
114117
"null-loader": "^0.1.1",

‎src/admin.aot.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
import { enableProdMode } from '@angular/core';
22
import { platformBrowser } from '@angular/platform-browser';
33
import { AdminModuleNgFactory } from '../aot/src/admin/admin.module.ngfactory';
4+
import { decorateModuleRef } from './environment';
45

56
if (webpack.ENV === 'production') {
67
enableProdMode();
78
}
89

910
export function main(): any {
10-
return platformBrowser().bootstrapModuleFactory(AdminModuleNgFactory)
11-
.catch(err => console.log(err));
11+
return platformBrowser()
12+
.bootstrapModuleFactory(AdminModuleNgFactory)
13+
.then(decorateModuleRef)
14+
.catch((err: any) => console.error(err));
1215
}
1316

1417
export function bootstrapDomReady(): any {

‎src/admin/admin.module.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { NgModule, ApplicationRef } from '@angular/core';
22
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
33
import { BrowserModule } from '@angular/platform-browser';
44
import { HttpModule } from '@angular/http';
5-
import { routing } from './admin.routing';
5+
import { ROUTES } from './admin.routing';
66

77
// Third party opensource libraries (that are using scss/css)
88
import 'bootstrap-loader';
@@ -19,6 +19,7 @@ import { SERVICES } from './common/services/services';
1919
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
2020
import { createNewHosts, createInputTransfer, removeNgStyles } from "@angularclass/hmr";
2121
import { IdlePreloadModule } from "@angularclass/idle-preload";
22+
import { RouterModule, PreloadAllModules } from "@angular/router";
2223

2324
@NgModule({
2425
imports: [
@@ -28,7 +29,7 @@ import { IdlePreloadModule } from "@angularclass/idle-preload";
2829
FormsModule,
2930
ReactiveFormsModule,
3031
NgbModule.forRoot(),
31-
routing
32+
RouterModule.forRoot(ROUTES, { useHash: false, preloadingStrategy: PreloadAllModules })
3233
],
3334
declarations: [
3435
ApplicationAdminComponent,

‎src/admin/admin.routing.ts‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
1-
import { ModuleWithProviders } from '@angular/core';
2-
import { Routes, RouterModule } from '@angular/router';
3-
1+
import { Routes } from '@angular/router';
42
import { NotFound404Component } from "./pages/404/not-found404.component";
53
import { DashboardAdminComponent } from './pages/dashboard/dashboard.component';
6-
import { IdlePreload } from "@angularclass/idle-preload";
74

8-
const appRoutes: Routes = [
5+
export const ROUTES: Routes = [
96
// use http://localhost:3300/admin.html to login
107
{path: '', component: DashboardAdminComponent},
118
{path: '**', component: NotFound404Component}
12-
];
13-
14-
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { useHash: false, preloadingStrategy: IdlePreload });
9+
];

‎src/app/app.module.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { NgModule, ApplicationRef } from '@angular/core';
22
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
33
import { BrowserModule } from '@angular/platform-browser';
44
import { HttpModule } from '@angular/http';
5-
import { routing } from './app.routing';
5+
import { ROUTES } from './app.routing';
66

77
// Third party opensource libraries (that are using scss/css)
88
import 'bootstrap-loader';
@@ -11,14 +11,14 @@ import '../loading.css'; // css to show a centered spinner before angular's boot
1111

1212
import { ApplicationComponent } from './application/application.component';
1313
import { HomeComponent } from './pages/home/home.component';
14-
1514
import { FooterComponent } from './common/components/footer/footer.component';
1615
import { NavbarComponent } from './common/components/navbar/navbar.component';
1716
import { PageHeaderComponent } from './common/components/page-header/page-header.component';
1817
import { NotFound404Component } from "./pages/404/not-found404.component";
1918

2019
import { removeNgStyles, createNewHosts, createInputTransfer } from "@angularclass/hmr";
2120
import { IdlePreloadModule } from "@angularclass/idle-preload";
21+
import { RouterModule, PreloadAllModules } from "@angular/router";
2222

2323
@NgModule({
2424
imports: [
@@ -27,8 +27,9 @@ import { IdlePreloadModule } from "@angularclass/idle-preload";
2727
HttpModule,
2828
FormsModule,
2929
ReactiveFormsModule,
30-
routing
31-
],
30+
//RouterModule.forRoot(appRoutes, { useHash: false, preloadingStrategy: IdlePreload }); <- NOT WITH AOT
31+
RouterModule.forRoot(ROUTES, { useHash: false, preloadingStrategy: PreloadAllModules })
32+
],
3233
declarations: [
3334
ApplicationComponent,
3435
HomeComponent,

‎src/app/app.routing.ts‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
1-
import { ModuleWithProviders } from '@angular/core';
2-
import { Routes, RouterModule } from '@angular/router';
3-
4-
import { IdlePreload } from "@angularclass/idle-preload";
5-
1+
import { Routes } from '@angular/router';
62
import { HomeComponent } from './pages/home/home.component';
73
import { NotFound404Component } from "./pages/404/not-found404.component";
84

9-
const appRoutes: Routes = [
10-
5+
export const ROUTES: Routes = [
116
{path: '', component: HomeComponent},
127
{path: 'home', component: HomeComponent},
13-
{path: 'lazy', loadChildren: './pages/lazy/index#LazyModule'}, // lazy loading
148
{path: '**', component: NotFound404Component}
15-
];
16-
17-
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { useHash: false, preloadingStrategy: IdlePreload });
9+
];

0 commit comments

Comments
 (0)