Question

我正在尝试在我的项目中使用ng-bootstrap库。使用webpackdevserver和jit 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相关的唯一参考是票号。＃1381在github上，没有任何进一步的细节而关闭。所以，我相信我可能会遗漏一些非常小的东西。以下是相关细节

节点：8.1.3
Angular＆amp; Compiler-cli：4.2.4
Webpack：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';

谢谢＆amp;此致

Answer 1

在搜索互联网的高低之后，通过几个stackoverflow帖子和github项目配置/样本，我终于设法解决它（胶带方式）。

我要解决的问题是删除webpack配置文件中node_modules文件夹的排除。

现在，为什么排除node_modules适用于angular和rxjs包但不适用于ng-bootstrap，这仍然超出了我的范围。

在为jit构建时，排除有效，但是为了成功，node_modules在ts加载器链中必须包含。现在，aot的构建时间增加了多倍，但至少它可以工作。

ng-bootstrap AoT构建失败，带有意外令牌和丢失的加载器

1 个答案: