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

问题

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'),
        ])
    ]});

回答1:

You seem to be using jhipster. In your package.json you should find a pre-defined set of npm-scripts. When I generate a new project with jhipster it does not rely on ng directly but uses webpack and generated configs directly.

Try yarn start (or npm run start if you rely on npm instead of yarn).

The root cause of your problem is that the embedded webpack config within angular-cli does not know how to handle *.webapp files.

The generated webpack.common.js file in the webpack directory actually defines how to handle it:

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

So using above commands instead of using ng serve should do the trick.

来源：https://stackoverflow.com/questions/44865412/ng-serve-fails-webpack-fails-to-compile-error-in-src-main-webapp-manifest

标签

angular

Webpack

jhipster