Angular 14 Webpack 5错误,不必要的nodejs模块(我认为)阻止了我为应用程序服务



我正在一个全新的Angular 14应用程序中工作。我的节点版本是v14.20.0,npm为8.17.0

我不知道为什么,但出于某种原因,我包含了所有这些nodejs依赖项。我已经尝试删除node_modules并再次安装npm,但仍然遇到了这个问题。

我已经尝试了很多我在网上看到的解决方案,但我似乎无法摆脱这个bug。

如何查找和删除需要所有这些依赖项的包?下面是我看到的最初错误,它发生在许多不同的包中。

突破性变化:webpack<5用于默认情况下包括node.js核心模块的polyfill。现在已经不是这样了。验证您是否需要此模块,并为其配置polyfill。

如果要包含polyfill,则需要:-添加回退"resolve.fallback:{"zlib":require.resolve("browserify-zlib"(}"-安装"浏览zlib"如果不想包含polyfill,可以使用这样的空模块:resolve.fallback:{"zlib":false}

出现此错误的原因有很多不同的依赖关系。我通过npm安装,然后将这些路径添加到我的tscongfig.json 中,从而解决了终端中的错误

{
"compileOnSave": false,
"compilerOptions": {
"paths": { 
"path": [ "./node_modules/path-browserify" ],
"stream": ["./node_modules/stream-browserify"],
"http": ["./node_modules/stream-http"],    
"crypto": ["./node_modules/crypto-browserify"],
"zlib": ["./node_modules/browserify-zlib"]
}

这解决了终端中的Webpack 5错误。然而,当我在浏览器中观察应用程序时,我又看到了两个错误。

capability.js:1 Uncaught ReferenceError: global is not defined
at 2942 (capability.js:1:28)
at __webpack_require__ (bootstrap:19:1)
util.js:109 Uncaught ReferenceError: process is not defined
at 74 (util.js:109:1)

我通过将以下代码添加到我的polyfills.ts文件中解决了这些问题

import 'zone.js';  // Included with Angular CLI.
(window as any).global = window;
(window as any).process = { env: { DEBUG: undefined }, };

现在我在chrome控制台中得到这个错误

Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
at 8606 (response.js:43:45)

我认为答案是不导入包含所有这些依赖项的任何包,但我不知道如何定位和删除它

如果有人对此有任何见解,我们将不胜感激。

我会发布截图,但我的代表还不够高。如果您需要更多信息,请询问。

谢谢

我也突然遇到了很多依赖性问题,尽管我没有更改任何内容。代码以前运行良好。然后我意识到我从错误的包中导入了路由器模块。我没有从angular-router导入Router,而是意外地从express:|导入了它

import { Router } from 'express'; // wrong import
import { Router } from '@angular/router'; // right import

最新更新