Angular 4 Ahead-of-Time – lazyload不起作用
发布时间:2020-12-17 17:11:25 所属栏目:安全 来源:网络整理
导读:我有一个SystemJS项目.我使用NGC和Rollup进行AOT编译.一切正常但路由的延迟不起作用. 例如,它是我的tsconfig-aot.json { "compilerOptions": { "target": "es5","module": "es2015","moduleResolution": "node","sourceMap": true,"emitDecoratorMetadata":
我有一个SystemJS项目.我使用NGC和Rollup进行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() ] } 使用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" } } 参考:http://www.dzurico.com/angular-aot-webpack-lazy-loading/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- unix – grep Vs cat和grep之间的区别
- twitter-bootstrap – Bootstrap 3.0 Modal
- SBT使用play自动重载,编译时间极慢!和scala-js
- AngularJS指令:多个被剔除的元素
- 第一种编程语言有交互式shell吗?
- yum报错setup has installed conflicts filesystem < (&
- Angular可以激活安全性
- 如何在bash shell中编写一个优雅的linux命令
- 无法在设备上执行shell命令“getprop,dev.bootcomplete”“
- 调用MSSoapInit2时碰到0x80040154错误