ng-bootstrap AoT 构建失败，出现意外令牌和缺少加载程序

Question

我正在尝试在我的项目中使用 ng-bootstrap 库。使用 webpackdevserver 和 jit build 运行良好，但 aot build 抛出类似于以下的错误

Module parse failed: E:\SVNCode\Learning\spa\aot\node_modules\@ng-
bootstrap\ng-bootstrap\alert\alert.ngfactory.ts Unexpected token (13:21)
You may need an appropriate loader to handle this file type.

我已经搜索过这个问题，但与 ng-bootstrap 相关的唯一参考是票号。 github 上的 #1381，已关闭，没有任何进一步的详细信息。所以，我相信我可能会遗漏一些非常小的东西。以下是相关详情

节点：8.1.3
Angular & 编译器-cli: 4.2.4
网络包：2.6.1
打字稿：2.3.4
ng-bootstrap : 1.0.0-alpha.26
bootstrap : 4.0.0-alpha.6（使用 CDN 但在安装后也尝试过同样的结果）

webpack.prod.js

let ExtractTextPlugin = require('extract-text-webpack-plugin');
let webpack = require('webpack');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CompressionPlugin = require("compression-webpack-plugin");
let CopyWebpackPlugin = require('copy-webpack-plugin');

let path = require('path');
let rootDir = path.resolve(__dirname, '..');

module.exports = {
    entry: {
        'polyfills': './spa/polyfills.ts',
        'vendor': './spa/vendor-aot.ts',
        'app': './spa/main-aot.ts' // AoT compilation
    },

    output: {
        path: path.join(rootDir,'wwwroot'),
        filename: 'js/[name]-[hash:6].bundle.js',
        chunkFilename: 'js/[id]-[hash:6].chunk.js',
        publicPath: '/'
    },

    resolve: {
        extensions: ['.ts', '.js', '.json', '.css', '.html']
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    'babel-loader?presets[]=es2015',
                    'awesome-typescript-loader?configFileName=tsconfig-aot.json',
                    'angular-router-loader?aot=true&genDir=spa/aot/'
                ],
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                loaders: ['to-string-loader', 'css-loader']
            },
            {
                test: /\.html$/,
                use: 'html-loader'
            }
        ],
        exprContextCritical: false
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true,
            debug: false
        }),
        new webpack.optimize.UglifyJsPlugin({
            beautify: false,
            compress: {
                warnings: false
            },
            output: {
                comments: false
            },
            sourceMap: false,
            mangle: {keep_fnames: true}
        }),
        new CompressionPlugin({
            asset: "[path].gz[query]",
            algorithm: "gzip",
            test: /\.js$|\.html$/,
            threshold: 10240,
            minRatio: 0.8
        }),
        new ExtractTextPlugin("[name].css"),
        new HtmlWebpackPlugin({
            template: './spa/index.html'
        }),
        new CopyWebpackPlugin([
            { from: path.join(rootDir,'spa','assets'), to: 'assets'}
        ]),
        new webpack.NoEmitOnErrorsPlugin()
    ]
};

tsconfig-aot.js

{
    "compilerOptions": {
        "target": "es2015",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": true,
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true,
        "lib": ["es2015","dom"],
        "typeRoots": ["node_modules/@types"],
        "types":["node", "core-js"]
    },
    "files": [
        "spa/app/app.module.ts",
        "spa/main-aot.ts"
    ],
    "exclude": ["node_modules"],
    "angularCompilerOptions": {
        "genDir": "spa/aot",
        "skipMetadataEmit": true
    },
    "awesomeTypescriptLoaderOptions":{
        "useWebpackText": true,
        "useCache": true
    }
}

供应商-aot.ts

import '@angular/platform-browser';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/forms';
import '@angular/router';
import '@angular/platform-browser/animations';

import 'rxjs';
//can import others e.g. bootstrap, jquery etc
//can import js, ts, css, sass etc..
import '@ng-bootstrap/ng-bootstrap';

感谢和问候

Answer 1

在互联网上到处搜索，浏览了几个 Whosebug 帖子和 github 项目 configurations/samples 之后，我终于设法修复了它（胶带方式）。

要解决此问题，我所要做的就是删除 webpack 配置文件中 node_modules 文件夹的排除项。

现在，为什么排除 node_modules 适用于 angular 和 rxjs 包但不适用于 ng-bootstrap，我仍然无法理解。

排除在为 jit 构建时有效，但要使 aot 成功 node_modules 必须包含在 ts 加载程序链中。现在 aot 的构建时间增加了数倍，但至少它有效。

ng-bootstrap AoT 构建失败，出现意外令牌和缺少加载程序

ng-bootstrap AoT build failure with Unexpected Token and missing loader

webpack-2

ng-bootstrap

angular2-aot