ng serve fails - webpack fails to compile - ERROR in ./src/main/webapp/manifest.webapp

Question

When I try running ng serve I get the following

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...

See below for the contents of my webpack.dev.js. Not certain if that is the correct file to be looking at. Any ideas what has gone wrong. or how I go about investigating it further ? Any pointers/advise, greatly appreciated.

Thanks, Fergal.

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-scripts。当我用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应该可以解决问题。