[英]Angular 4 Ahead-of-Time - lazyload doesn't work
我有一個SystemJS項目。 我將NGC和匯總用於AOT編譯。 一切正常,但用於路由的延遲加載不起作用。 例如,這是我的tsconfig-aot.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"baseUrl": ".",
"paths": {
"app/*": [ "../src/app/*" ]
}
},
"typeRoots": [
"node_modules/@types"
],
"files": [
"../src/app/app.module.aot.ts"
],
"exclude": [
"node_modules",
"typings"
],
"angularCompilerOptions": {
"genDir": "../",
"skipMetadataEmit": false,
"skipTemplateCodegen": false
}
}
和rollup.config.app.js
'use strict';
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify'
export default {
entry: './src/app/app.module.aot.js',
dest: './src/dist/app.module.min.js',
sourceMap: true,
format: 'iife',
onwarn: function(warning) {
// Skip certain warnings
if ( warning.message.indexOf('\'default\' is not exported by rollup') === -1) { return; }
if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
if ( warning.code === 'EVAL' ) { return; }
console.warn( warning.message );
},
plugins: [
nodeResolve({jsnext: true, module: true}),
commonjs({
include: [
'./node_modules/rxjs/**'
]
}),
uglify()
]
}
在匯總運行AOT之后,所有功能都可以正常運行,但是當我嘗試對應用程序使用lazyload時,它將無法正常工作。
const routes: Routes = [
{
path: "test/:id",
loadChildren: "./src/app/app.module#TestModule"
}
];
AOT構建通過沒有任何錯誤,並且在使用AOT運行應用程序之后,我在開發工具中沒有看到任何錯誤。 但是,延遲加載也不起作用。
UPD在JIT編譯上,所有工作都可以在延遲加載下正常運行。
任何想法如何解決此問題?
(只需從我的評論中進行回答即可,如果可以的話,請隨時支持/接受答案)
您必須使用webpack
進行AOT和延遲加載。 Rollup
將不起作用(至少到目前為止)。
使用@ngtools/webpack
配置AOT +延遲加載。
在webpack.config.js
const ngToolsWebpack = require('@ngtools/webpack');
var webpack = require('webpack');
module.exports = {
resolve: {
extensions: ['.ts', '.js']
},
entry: './app/main.aot.ts',
output: {
path: './dist',
publicPath: 'dist/',
filename: 'app.main.js'
},
plugins: [
new ngToolsWebpack.AotPlugin({
tsConfigPath: './tsconfig.json'
}),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
output: {
comments: false
},
sourceMap: true
})
],
module: {
loaders: [
{ test: /\.scss$/, loaders: ['raw-loader', 'sass-loader'] },
{ test: /\.css$/, loader: 'raw-loader' },
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.ts$/, loader: '@ngtools/webpack' }
]
},
devServer: {
historyApiFallback: true
}
};
在tsconfig.json
{
"compilerOptions": {
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"noImplicitAny": false,
"sourceMap": true,
"mapRoot": "",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"es2015",
"dom"
],
"outDir": "lib",
"skipLibCheck": true,
"rootDir": "."
},
"angularCompilerOptions": {
"genDir": "./app/ngfactory",
"entryModule": "app/app.module#AppModule"
}
}
參考: http : //www.dzurico.com/angular-aot-webpack-lazy-loading/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.