angular - 模块解析失败 : . .. 意外标记。您可能需要适当的加载程序来处理此文件类型

Question

我正在学习如何使用 Angular 4 创建 .NET Core 应用程序。

现在我正在将我的应用程序从 Core 1.1 - Angular 4.1.2 迁移到 Core 2.0 - Angular 4.3.6。

在旧版本中我没有使用 webpack。现在我将它用于 angular/cli、ngx-translate 等。

我能够将旧版本发布到 Azure 或本地，但不能将这个版本发布，因为我收到以下错误:

    ERROR in ./$$_gendir/node_modules/angular2-flash-messages/module/flash-messages.component.ngfactory.ts
    Module parse failed: C:\Users\Andrei\ECV\ECV\$$_gendir\node_modules\angular2-flash-messages\module\flash-messages.component.ngfactory.ts Unexpected token (13:35)
    You may need an appropriate loader to handle this file type.
    | import * as i2 from 'angular2-flash-messages/module/flash-messages.component';
    | import * as i3 from 'angular2-flash-messages/module/flash-messages.service';
    | const styles_FlashMessagesComponent:any[] = ([] as any[]);
    | export const RenderType_FlashMessagesComponent:i0.RendererType2 = i0.╔╡crt({encapsulation:2,
    |     styles:styles_FlashMessagesComponent,data:{}});
     @ ./$$_gendir/ClientApp/app/components/app/app.component.ngfactory.ts 13:0-126
     @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts
     @ ./ClientApp/boot.server.ts

    ERROR in ./$$_gendir/node_modules/ng2-auto-complete/dist/ng2-auto-complete.component.ngfactory.ts
    Module parse failed: C:\Users\Andrei\ECV\ECV\$$_gendir\node_modules\ng2-auto-complete\dist\ng2-auto-complete.component.ngfactory.ts Unexpected token (15:37)
    You may need an appropriate loader to handle this file type.
    | import * as i4 from 'ng2-auto-complete/dist/ng2-auto-complete';
    | import * as i5 from '@angular/http';
    | const styles_Ng2AutoCompleteComponent:any[] = ['\n  @keyframes slideDown {\n    0% {\n      transform:  translateY(-10px);\n    }\n    100% {\n      transform: translateY(0px);\n    }\n  }\n  .ng2-auto-complete {\n    background-color: transparent;\n  }\n  .ng2-auto-complete > input {\n    outline: none;\n    border: 0;\n    padding: 2px; \n    box-sizing: border-box;\n    background-clip: content-box;\n  }\n\n  .ng2-auto-complete > ul {\n    background-color: #fff;\n    margin: 0;\n    width : 100%;\n    overflow-y: auto;\n    list-style-type: none;\n    padding: 0;\n    border: 1px solid #ccc;\n    box-sizing: border-box;\n    animation: slideDown 0.1s;\n  }\n  .ng2-auto-complete > ul.empty {\n    display: none;\n  }\n\n  .ng2-auto-complete > ul li {\n    padding: 2px 5px;\n    border-bottom: 1px solid #eee;\n  }\n\n  .ng2-auto-complete > ul li.selected {\n    background-color: #ccc;\n  }\n\n  .ng2-auto-complete > ul li:last-child {\n    border-bottom: none;\n  }\n\n  .ng2-auto-complete > ul li:hover {\n    background-color: #ccc;\n  }'];
    | export const RenderType_Ng2AutoCompleteComponent:i0.RendererType2 = i0.╔╡crt({encapsulation:2,
    |     styles:styles_Ng2AutoCompleteComponent,data:{}});
     @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts 12:0-115
     @ ./ClientApp/boot.server.ts

    ERROR in ./$$_gendir/node_modules/ng2-toasty/src/toasty.component.ngfactory.ts
    Module parse failed: C:\Users\Andrei\ECV\ECV\$$_gendir\node_modules\ng2-toasty\src\toasty.component.ngfactory.ts Unexpected token (15:28)
    You may need an appropriate loader to handle this file type.
    | import * as i4 from 'ng2-toasty/src/toasty.component';
    | import * as i5 from 'ng2-toasty/src/toasty.service';
    | const styles_ToastyComponent:any[] = ([] as any[]);
    | export const RenderType_ToastyComponent:i0.RendererType2 = i0.╔╡crt({encapsulation:2,
    |     styles:styles_ToastyComponent,data:{}});
     @ ./$$_gendir/ClientApp/app/components/to-do/to-do-list.component.ngfactory.ts 11:0-102
     @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts
     @ ./ClientApp/boot.server.ts

    ERROR in ./$$_gendir/node_modules/ngx-modialog/plugins/bootstrap/src/ngx-modialog-bootstrap.ng-flat.ngfactory.ts
    Module parse failed: C:\Users\Andrei\ECV\ECV\$$_gendir\node_modules\ngx-modialog\plugins\bootstrap\src\ngx-modialog-bootstrap.ng-flat.ngfactory.ts Unexpected token (14:42)
    You may need an appropriate loader to handle this file type.
    | import * as i3 from '@angular/common';
    | import * as i4 from 'ngx-modialog';
    | export const BootstrapModalModuleNgFactory:i0.NgModuleFactory<i1.BootstrapModalModule> = i0.╔╡cmf(i1.BootstrapModalModule,
    |     ([] as any[]),(_l:any) => {
    |       return i0.╔╡mod([i0.╔╡mpd(512,i0.ComponentFactoryResolver,i0.╔╡CodegenComponentFactoryResolver,
     @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts 11:0-130
     @ ./ClientApp/boot.server.ts

    ERROR in ./$$_gendir/node_modules/ngx-modialog/src/ngx-modialog.ng-flat.ngfactory.ts
    Module parse failed: C:\Users\Andrei\ECV\ECV\$$_gendir\node_modules\ngx-modialog\src\ngx-modialog.ng-flat.ngfactory.ts Unexpected token (12:33)
    You may need an appropriate loader to handle this file type.
    | import * as i1 from 'ngx-modialog';
    | import * as i2 from '@angular/common';
    | export const ModalModuleNgFactory:i0.NgModuleFactory<i1.ModalModule> = i0.╔╡cmf(i1.ModalModule,
    |     ([] as any[]),(_l:any) => {
    |       return i0.╔╡mod([i0.╔╡mpd(512,i0.ComponentFactoryResolver,i0.╔╡CodegenComponentFactoryResolver,
     @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts 10:0-102
     @ ./ClientApp/boot.server.ts

这些都是安装的附加库。

不过，我可以在本地运行该项目。

我确实运行了命令:

webpack --config webpack.config.vendor.js

在我的项目的根目录中。

我不知道应该写什么以及在哪里才能让 webpack 能够正确加载这些库。

我认为它一定在 webpack.config.js 中(根据我在互联网上阅读的内容)，但我发现的是 React 的解决方案，或者我不知道在哪里添加更改。

我的 webpack.config.js 是:

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AotPlugin = require('@ngtools/webpack').AotPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

module.exports = (env) => {
    // Configuration in common to both client-side and server-side bundles
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: [ '.js', '.ts' ] },
        output: {
            filename: '[name].js',
            publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                { test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        plugins: [new CheckerPlugin()]
    };

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig, {
        entry: { 'main-client': './ClientApp/boot.browser.ts' },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin(),
            new AotPlugin({
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'),
                exclude: ['./**/*.server.ts']
            })
        ])
    });

    // Configuration for server-side (prerendering) bundle suitable for running in Node
    const serverBundleConfig = merge(sharedConfig, {
        resolve: { mainFields: ['main'] },
        entry: { 'main-server': './ClientApp/boot.server.ts' },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./ClientApp/dist/vendor-manifest.json'),
                sourceType: 'commonjs2',
                name: './vendor'
            })
        ].concat(isDevBuild ? [] : [
            // Plugins that apply in production builds only
            new AotPlugin({
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.module.server#AppModule'),
                exclude: ['./**/*.browser.ts']
            })
        ]),
        output: {
            libraryTarget: 'commonjs',
            path: path.join(__dirname, './ClientApp/dist')
        },
        target: 'node',
        devtool: 'inline-source-map'
    });

    return [clientBundleConfig, serverBundleConfig];
};

谢谢!

Answer 1

这有点猜测，但根据您提供的详细信息，您可能会受到此问题的影响(您的问题听起来与我最近遇到的问题类似):Angular AOT error when having a component within a library .

我删除了 webpack.config.js 中的 include:/ClientApp/, 以使一切重新启动并运行。

旧:

    module: {
        rules: [
            { test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' },

新:

    module: {
        rules: [
            { test: /\.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' },