Question

我遇到了一些使用Webpack让AoT在Angular 5中工作的问题。 Webpack AoT构建完成没有错误。

1）使用@ ngtools / webpack AngularCompilerPlugin时，由于延迟加载模块导致的代码拆分没有发生。当使用标准的Angular / TS非AoT加载器时（请参阅下面的webpack配置中的注释规则），我正确地为每个惰性路由生成单独的包。但是，使用AngularCompilerPlugin，不会生成与延迟加载的模块对应的包。请参阅下面的相关文件内容。我错过了什么？

套餐版本：

"@angular/cli": "1.6.3",
"@angular/compiler-cli": "5.1.3",
"@angular/language-service": "4.4.6",
"@ngtools/webpack": "1.9.3",
"@types/core-js": "0.9.34",
"webpack": "3.10.0",
"@angular/animations": "5.1.3",
"@angular/common": "5.1.3",
"@angular/compiler": "5.1.3",
"@angular/compiler-cli": "5.1.3",
"@angular/core": "5.1.3",
"@angular/forms": "5.1.3",
"@angular/http": "5.1.3",
"@angular/platform-browser": "5.1.3",
"@angular/platform-browser-dynamic": "5.1.3",
"@angular/platform-server": "5.1.3",
"@angular/router": "5.1.3",

Webpack配置：

const webpack = require('webpack');
const helpers = require('./helpers');

const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;

module.exports = function(options) {
    return {
        entry: {
            app: './app/main.ts',
            vendor: './app/vendor.ts'
        },

        output: {
            publicPath: '/app/dist/bundles/',
            path: helpers.root('./dist/bundles'),
            filename: '[name].js',
            sourceMapFilename: '[name].map',
            chunkFilename: '[name].chunk.js'
        },

        resolve: {
            extensions: ['.ts', '.js'],
            modules: [helpers.root('node_modules'), helpers.root('libs')]
        },

        module: {
            rules: [
                //{
                //    test: /\.ts$/,
                //    loaders: [
                //        'awesome-typescript-loader',
                //        'angular-router-loader',
                //        'angular2-template-loader',
                //        'source-map-loader'
                //    ]
                //},
                {
                     test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
                     loader: '@ngtools/webpack',
                },
                {test: /\.css$/, loaders: ['to-string-loader', 'css-loader']},
                {test: /\.htm(l)*$/, loader: 'raw-loader'},
                {test: /\.(eot|svg|cur)$/, loader: 'file-loader?name=[name].[hash:20].[ext]'},
                {
                    test: /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
                    loader: 'url-loader?name=[name].[hash:20].[ext]&limit=10000'
                }
            ]
        },

        plugins: [
            // Workaround for angular/angular#11580
            new ContextReplacementPlugin(
                /**
                 * The (\\|\/) piece accounts for path separators in *nix and Windows
                 */
                /\@angular(\\|\/)core(\\|\/)esm5/,
                helpers.root('app'), // location of your src
                {
                    /**
                     * Your Angular Async Route paths relative to this root directory
                     */
                }
            ),

            new AngularCompilerPlugin({
                tsConfigPath: helpers.root('tsconfig.json'),
                entryModule: helpers.root('app/app.module') + '#AppModule',
                sourceMap: true
            }),

            new CommonsChunkPlugin({
                name: ['vendor', 'bootstrap'],
                minChunks: 2
            })

        ],

        node: {
            global: true,
            crypto: 'empty',
            process: true,
            module: false,
            clearImmediate: false,
            setImmediate: false
        }
    };
};

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "typeRoots": [
      "./node_modules/@types/"
    ],
    "lib": [
      "es6",
      "dom"
    ]
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules/*"
  ],
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  }
}

app.routes.module.ts

...
export const EVENTS_GUARD_TOKEN = new InjectionToken('events-access.guard');

const routes: Routes = [
    {path: '', redirectTo: 'home', pathMatch: 'full'},
    {path: 'admin', loadChildren: './admin/admin.module#AdminModule'},
    {path: 'application', loadChildren: './curated-views/application/application.module#ApplicationModule'},
    {path: 'demo', loadChildren: './demo/demo.module#DemoModule'},
    {path: 'events', loadChildren: './events/events.module#EventsModule', canLoad: [EVENTS_GUARD_TOKEN]},
    ...
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: [
        RouteAccessGuardProvider(EVENTS_GUARD_TOKEN, FEATURE_EVENTS)
    ]
})
export class AppRoutesModule {}

2）我的另一个问题是，当尝试运行生成的AoT构建时，我收到以下运行时错误：

错误本身（以及它引用的代码）似乎是一个红色的鲱鱼，但错误会阻止应用程序加载。

我完全陷入了困境。请帮忙！：）

Angular 5 / AoT / Webpack /代码拆分问题

0 个答案: