Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Angular 4 Ahead-of-Time – lazyload不起作用大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个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/

大佬总结

以上是大佬教程为你收集整理的Angular 4 Ahead-of-Time – lazyload不起作用全部内容,希望文章能够帮你解决Angular 4 Ahead-of-Time – lazyload不起作用所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: