Question

我已将我的网络包"@types/webpack": "^3.0.13"升级为"@types/webpack": "^3.8.5"，"ngc-webpack": "~3.2.2"升级为"ngc-webpack": "~4.1.1"。

当我启动项目时，它返回

Error: Must specify "tsConfigPath" in the configuration of @ngtools/webpack.

尽管如此，我已根据@ngtolls

添加了路径

以下是我的package.json详细信息

Angular: 4.4.4
"webpack": "^3.10.1",
"webpack-bundle-analyzer": "^2.10.0",
"webpack-dev-middleware": "^2.0.4",
"webpack-dev-server": "^2.11.1",
"webpack-dll-bundles-plugin": "^1.0.0-beta.5",
"webpack-merge": "~4.1.1"

webpack.dev.js

/**
 * @author: @AngularClass
 */

const helpers = require("./helpers");
const webpackMerge = require("webpack-merge"); // used to merge webpack configs
// const webpackMergeDll = webpackMerge.strategy({plugins: 'replace'});
const commonConfig = require("./webpack.common.js"); // the settings that are common to prod and dev

/**
 * Webpack Plugins
 */
const AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin");
const DefinePlugin = require("webpack/lib/DefinePlugin");
const NamedModulesPlugin = require("webpack/lib/NamedModulesPlugin");
const LoaderOptionsPlugin = require("webpack/lib/LoaderOptionsPlugin");

const AotPlugin = require('@ngtools/webpack').AotPlugin;

/**
 * Webpack Constants
 */
const ENV = (process.env.ENV = process.env.NODE_ENV = "development");
const HOST = process.env.HOST || "localhost";
const PORT = 4200;
const HMR = helpers.hasProcessFlag("hot");
const METADATA = webpackMerge(commonConfig({ env: ENV }).metadata, {
  host: HOST,
  port: PORT,
  ENV: ENV,
  HMR: HMR
});

var dotEnv = require("dotenv");
dotEnv.load({ path: require('path').resolve('/.env') });


module.exports = function(options) {
  return webpackMerge(commonConfig({ env: ENV }), {

    devtool: "cheap-module-source-map",


    output: {

      path: helpers.root("dist"),


      filename: "[name].bundle.js",


      sourceMapFilename: "[file].map",


      chunkFilename: "[id].chunk.js",

      library: "ac_[name]",
      libraryTarget: "var"
    },

    module: {
      rules: [
        {
          test: /\.ts$/,
          loader: '@ngtools/webpack'
        },

        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"],
          include: [helpers.root("src", "styles")]
        },

        {
          test: /\.scss$/,
          use: ["style-loader", "css-loader", "sass-loader"],
          include: [helpers.root("src", "styles")]
        }
      ]
    },

    plugins: [
      new AotPlugin({
        tsConfigPath: 'src/tsconfig.json',
        entryModule: 'src/app/app.module#AppModule',
        sourceMap: true
      }),

      new DefinePlugin({
        ENV: JSON.stringify(METADATA.ENV),
        HMR: METADATA.HMR,
        "process.env": {
          ENV: JSON.stringify(METADATA.ENV),
          NODE_ENV: JSON.stringify(METADATA.ENV),
          HMR: METADATA.HMR
        }
      }),


      new LoaderOptionsPlugin({
        debug: true,
        options: {}
      })
    ],

    devServer: {
      port: METADATA.port,
      host: METADATA.host,
      historyApiFallback: true,
      watchOptions: {
        // if you're using Docker you may need this
        // aggregateTimeout: 300,
        // poll: 1000,
        ignored: /node_modules/
      },
      headers: {
        "Access-Control-Allow-Origin": "*"
      },

      setup: function(app) {
        // For example, to define custom handlers for some paths:
        // app.get('/some/path', function(req, res) {
        //   res.json({ custom: 'response' });
        // });
      },
      proxy: {
        "/api/v1": {
          target: "http://localhost:3000"
        },

      }
    },


    node: {
      global: true,
      crypto: "empty",
      process: true,
      module: false,
      clearImmediate: false,
      setImmediate: false,
      fs: 'empty'
    },
    externals: [
      {
        './cptable': 'var cptable'
      }
    ]
  });
};

我搜索了很多，但我找不到任何有用的答案。问题声音很傻我知道，但我不知道如何解决它。

有人可以告诉我我做错了吗？

Answer 1

我跟随tutorial from AngularInDepth时遇到了同样的错误。

我在webpack.config.js中更改了这段代码：

new AotPlugin({
  "mainPath": "main.ts",
  "entryModule": "app/app.module#AppModule"
})

为：

new AotPlugin({
    "tsConfigPath": "tsconfig.json",
    "mainPath": "main.ts",
    "entryModule": "app/app.module#AppModule",
  })

并且有效

Answer 2

我也遇到过这个问题。

首先，我按照错误日志。我注意到作为“选项”收到的对象是

{ disabled: false, tsConfig: 'blahblah/app/tsconfig.json' }。

我进入了webpack.common.js（也标记为webpack.js，具体取决于您的项目设置）并添加了tsConfigPath。

进入导出的模块，插件数组和
找到新的AotPlugin，新的AngularCompilerPlugin或新的ngcWebpack.NgcWebpackPlugin
添加tsConfigPath。并且可能不会删除原件。

必须在@ ngtools / webpack的配置中指定“tsConfigPath”

2 个答案: