Angular 模块分析失败：。。。意外标记。您可能需要适当的加载程序来处理此文件类型

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

现在我正在将我的应用程序从Core1.1-Angular 4.1.2迁移到Core2.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正确加载这些库

我猜想它一定在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];
};

---

谢谢大家!

这有点像猜测，但根据您提供的详细信息，您可能会受到此问题的影响（您的问题听起来与我最近遇到的问题相似）：

我删除了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' },

新建：

    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' },

---

我通过改变这一行解决了这个问题：

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

为此：

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

在webpack.config.js中

---

我没有使用@yfisaqt的解决方案…

您好，我在很多网站上看到了这个解决方案，但它对我不起作用。我将我的答案贴在下面。您的帖子帮助我意识到失败的

.ts

文件没有满足

/ClientApp/

的要求。为了避免一刀切的规则，我添加了包含我的项目的vuex存储的缺少的模式，

include:[/ClientApp/，/store/]

，我建议使用此解决方案时要小心。这将不会使用AoT，并且可能会模糊或隐藏仍然存在的问题。运行

node node_modules/webpack/bin/webpack.js--env.prod

时会发生什么？如果失败，我将进一步调查。在我遇到的另一个问题中，npm-shrinkwrap.json中存在导致此错误的版本控制问题。这也是我的猜测。它肯定是版本控制的产物。我现在可以使用这个解决方案，因为软件正在开发中。我只是想将它发布到Azure进行演示，然后我就遇到了问题。