大佬教程收集整理的这篇文章主要介绍了Angular 4 Ahead-of-Time – lazyload不起作用,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
{ "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() ] }
使用roll-up运行AOT之后一切正常,但是当我尝试对我的应用程序使用lazyload时,它不起作用.
const routes: Routes = [ { path: "test/:id",loadChildren: "./src/app/app.module#TestModule" } ];
AOT构建传递没有任何错误,并且在使用AOT运行应用程序之后我没有在开发工具中看到任何错误.但懒惰负载也不起作用.
UPD在JIT编译所有工作正常与延迟加载.
知道如何解决这个问题吗?
你必须使用webpack for AOT&懒加载.汇总不起作用(至少截至目前).
使用@ 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$/,{ test: /\.ts$/,loader: '@ngtools/webpack' } ] },devServer: { historyApiFallback: true } };
在tsconfig.json中
{ "compilerOptions": { "module": "es2015","target": "es5","noImplicitAny": false,"mapRoot": "","lib": [ "es2015","dom" ],"outDir": "lib","skipLibCheck": true,"rootDir": "." },"angularCompilerOptions": { "genDir": "./app/ngfactory","entryModule": "app/app.module#AppModule" } }
以上是大佬教程为你收集整理的Angular 4 Ahead-of-Time – lazyload不起作用全部内容,希望文章能够帮你解决Angular 4 Ahead-of-Time – lazyload不起作用所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。