ng serve 失败 - webpack 无法编译 - ./src/main/webapp/manifest.webapp 中的错误

Question

当我尝试运行 ng serve 时，我得到以下信息

ERROR in ./src/main/webapp/manifest.webapp
Module parse failed: /home/fergal/dev/jhipster/sam/git/sam/src/main/webapp/manifest.webapp Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "name": "Sam",
|   "short_name": "Sam",
|   "icons": [
 @ ./src/main/webapp/app/polyfills.ts 6:0-29
 @ multi ./src/main/webapp/app/polyfills.ts
webpack: Failed to compile.
webpack: Compiling...

请参阅下文了解我的 webpack.dev.js 的内容。 不确定这是否是要查看的正确文件。 任何想法出了什么问题。 或者我如何进一步调查它？ 任何指针/建议，非常感谢。

谢谢， 弗格尔。

const webpack = require('webpack');
const writeFilePlugin = require('write-file-webpack-plugin');
const webpackMerge = require('webpack-merge');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const execSync = require('child_process').execSync;
const fs = require('fs');
const path = require('path');

const commonConfig = require('./webpack.common.js');

const ddlPath = './target/www/vendor.json';
const ENV = 'dev';

if (!fs.existsSync(ddlPath)) {
    execSync('webpack --config webpack/webpack.vendor.js');
}

module.exports = webpackMerge(commonConfig({ env: ENV }), {
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './target/www',
        proxy: [{
            context: [
                /* jhipster-needle-add-entity-to-webpack - JHipster will add entity api paths here */
                '/api',
                '/management',
                '/swagger-resources',
                '/v2/api-docs',
                '/h2-console'
            ],
            target: 'http://127.0.0.1:8080',
            secure: false
        }]
    },
    output: {
        path: path.resolve('target/www'),
        filename: 'app/[name].bundle.js',
        chunkFilename: 'app/[id].chunk.js'
    },
    module: {
        rules: [{
            test: /\.ts$/,
            loaders: [
                'tslint-loader','json-loader'
            ],
            exclude: ['node_modules', new RegExp('reflect-metadata\\' + path.sep + 'Reflect\\.ts')]
        }]
    },
    plugins: [
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 9000,
            proxy: {
                target: 'http://localhost:9060'
            }
        }, {
            reload: false
        }),
        new ExtractTextPlugin('styles.css'),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.NamedModulesPlugin(),
        new writeFilePlugin(),
        new webpack.WatchIgnorePlugin([
            path.resolve('./src/test'),
        ])
    ]});

Answer 1

您似乎正在使用 jhipster。在您的 package.json 中，您应该找到一组预定义的 npm 脚本。当我使用 jhipster 生成一个新项目时，它不直接依赖 ng，而是直接使用 webpack 和生成的配置。

试试yarn start（或者npm run start，如果你依赖npm而不是yarn）。

问题的根本原因是 angular-cli 中的嵌入式 webpack 配置不知道如何处理 *.webapp 文件。

webpack目录下生成的webpack.common.js文件实际上定义了如何处理：

{
  test: /manifest.webapp$/,
  loader: 'file-loader?name=manifest.webapp!web-app-manifest-loader'
}

所以使用上述命令而不是使用ng serve 应该可以解决问题。