ng服务失败-webpack无法编译-./src/main/webapp/manifest.webapp中的错误 [英] ng serve fails - webpack fails to compile - ERROR in ./src/main/webapp/manifest.webapp

问题描述

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

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

有关我的webpack.dev.js的内容，请参见下文. 不确定这是否是正确的文件. 任何想法出了什么问题. 或我将如何进一步调查? 任何指示/建议，深表感谢.

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.

谢谢， Fergal.

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

推荐答案

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

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.

尝试yarn start(如果您依靠npm而不是纱线，则尝试npm run start).

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

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

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

在webpack目录中生成的webpack.common.js文件实际上定义了处理方式:

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

因此，使用上述命令而不是使用ng serve应该可以解决问题.

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

这篇关于ng服务失败-webpack无法编译-./src/main/webapp/manifest.webapp中的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！