javascript 在webpack5构建后Angular Webpack插件初始化之前尝试发出

nfs0ujit  于 2023-09-29  发布在  Java
关注(0)|答案(7)|浏览(172)

我正在使用Angular 14和Webpack版本:^5.58.1
下面是配置:

webpack.congif.js

const webpackPlugin = require('@ngtools/webpack').AngularWebpackPlugin;
module.exports = {
  mode: 'development',
  devtool: "source-map",
  entry: {
    main: "./js/main.js",
    mainDrawer: "./js/divdrawer/main.ts",
    polyfills: "./js/divdrawer/polyfills.ts",
    entry: "./js/entry.js",
    thirdpartylibs: "./js/thirdpartylibs.js"
  },
  output: {
    path: path.join(__dirname, "build/"),
    filename: "[name]bundle.js"
  },

module: {
    rules: [
      {
        parser: {
          system: true,
        }
      }
        test : /\.(tsx|ts)$/,
        use: [
               {
                 loader: '@ngtools/webpack',
                 options: {
                     configFile: path.resolve('./js/tsconfig.json')
                    },
               },
        ]
      },
    },

plugins: [
    new webpackPlugin({
      tsconfig: './js/tsconfig.json',
    }),
    new webpack.ContextReplacementPlugin(
      /\@angular(\\|\/)core(\\|\/)esm5/,
      path.resolve(__dirname, "./js/divdrawer")
    )
  ]
}

在生成构建时,我得到以下错误:

ERROR in ./js/divdrawer/filterMappingRemover.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.
    at D:\MyProject\node_modules\@ngtools\webpack\src\ivy\loader.js:81:18
 @ ./js/entry.js 10:30-97

ERROR in ./js/divdrawer/main.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.
    at D:\MyProject\node_modules\@ngtools\webpack\src\ivy\loader.js:81:18
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

ERROR in ./js/divdrawer/polyfills.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.
    at D:\MyProject\node_modules\@ngtools\webpack\src\ivy\loader.js:81:18

ERROR in ./js/divdrawer/renderer.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.
    at D:\MyProject\node_modules\@ngtools\webpack\src\ivy\loader.js:81:18
 @ ./js/entry.js 9:18-61

所有条目都在上面的消息中抛出错误。正如Webpack配置中提到的,我们有多个条目。
这是在我将我们的项目升级到Angular 14时检测到的(Angular升级步骤:v10 --> v11--> v12--> v13/v14)。
如何正确配置AngularWebpackPlugin?还有别的办法吗?

ndasle7k

ndasle7k1#

对我来说,这个解决方案奏效了:
转到package.json并更改您的typescript版本,如果您想将angular项目升级到

Angular 15(npm install typescript@"~4.8.0”--save-dev)

"devDependencies": {
  ...
  "typescript": "~4.8.0"
}

Angular 14(npm install typescript@"~4.7.0”--save-dev)

"devDependencies": {
  ...
  "typescript": "~4.7.0"
}

贷给F.R

ipakzgxi

ipakzgxi2#

是将typescript版本降级到4.8.2解决了这个问题。

ee7vknir

ee7vknir3#

对我来说,将节点版本16.xx升级到18.xx(LTS)解决了这个问题。

ogsagwnx

ogsagwnx4#

我在从Angular 14 -> 15升级时遇到了这个错误消息。但是,还记录了另一个错误:
错误:无法初始化Angular编译-Angular编译器需要TypeScript >=4.6.2和<4.8.0,但找到了4.8.2。
我的package.json为大多数@angular包指定了15版本,但不知何故,@angular/compiler-cli仍然被设置为14
将其更改为15为我解决了这个问题。

ibps3vxo

ibps3vxo5#

尝试运行:

ng update @angular/core@14
z2acfund

z2acfund6#

我也遇到了同样的问题,我验证了对 node_modules 文件夹的读写访问权限,它工作了。

y1aodyip

y1aodyip7#

我在尝试移动文件时遇到了这个错误,并在tsconfig.json中出现了这样的结果:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "types": ["node"],
    "target": "es2020"
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts",
    "src/some-folder/some-subfolder/another-subfolder/the-file.ts",
    "src/some-folder/some-subfolder/the-file.ts"
  ],
  "include": ["src/**/*.d.ts"],
  "exclude": ["**/*.test.ts", "**/*.spec.ts"]
}

删除重复文件可消 debugging 误消息。

相关问题