javascript - Angular 14 Webpack 5 error, unnecessary nodejs modules (I think) are preventing me from serving application - Stack

admin管理员组

文章数量:1323734

I am working in a brand new Angular 14 application. My node version is v14.20.0, npm is 8.17.0

I'm not sure why, but for some reason I have all of these nodejs dependencies included. I've tried deleting node_modules and npm installing again, but I still run into this issue.

I've tried a number of solutions I saw online for this issue, but I can't seem to outrun this bug.

How can I find and remove the package(s) that is requiring all of these dependencies? below is the initial error that I saw, and it occurred for a number of different packages.

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }' - install 'browserify-zlib' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "zlib": false }

This error appeared for a number of different dependencies. I was able to resolve the errors in my terminal by installing via npm, and then adding these paths to my tscongfig.json

{
 "pileOnSave": false,
 "pilerOptions": {
"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"]
}

This solved the Webpack 5 errors in the terminal. However, when I went observe the application in the browser, I saw two more errors.

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)

I resolved them by adding the below code to my polyfills.ts file

import 'zone.js';  // Included with Angular CLI.

(window as any).global = window;
(window as any).process = { env: { DEBUG: undefined }, };

now I am getting this error in the chrome console

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

I think that the answer is to just not import whatever package contains all of these dependencies, but I don't know how to locate and remove it.

If anyone has any insight into this it would be greatly appreciated.

I would post screenshots, but my rep isn't high enough yet. If you need more information please ask.

Thank you

I am working in a brand new Angular 14 application. My node version is v14.20.0, npm is 8.17.0

I'm not sure why, but for some reason I have all of these nodejs dependencies included. I've tried deleting node_modules and npm installing again, but I still run into this issue.

I've tried a number of solutions I saw online for this issue, but I can't seem to outrun this bug.

How can I find and remove the package(s) that is requiring all of these dependencies? below is the initial error that I saw, and it occurred for a number of different packages.

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }' - install 'browserify-zlib' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "zlib": false }

This error appeared for a number of different dependencies. I was able to resolve the errors in my terminal by installing via npm, and then adding these paths to my tscongfig.json

{
 "pileOnSave": false,
 "pilerOptions": {
"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"]
}

This solved the Webpack 5 errors in the terminal. However, when I went observe the application in the browser, I saw two more errors.

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)

I resolved them by adding the below code to my polyfills.ts file

import 'zone.js';  // Included with Angular CLI.

(window as any).global = window;
(window as any).process = { env: { DEBUG: undefined }, };

now I am getting this error in the chrome console

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

I think that the answer is to just not import whatever package contains all of these dependencies, but I don't know how to locate and remove it.

If anyone has any insight into this it would be greatly appreciated.

I would post screenshots, but my rep isn't high enough yet. If you need more information please ask.

Thank you

• javascript
• node.js
• angular
• webpack

Share Improve this question Follow asked Aug 17, 2022 at 2:26 Timothy KoarTimothy Koar 6111 silver badge33 bronze badges 1

• 1 Try checking out this answer stackoverflow./a/67808287/12291279 – csgeek Commented Aug 19, 2022 at 6:44

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I also suddenly got so many dependencies issues though I didn't change anything as such. The code was working fine before. Then I realized that I imported Router module from wrong package. Instead of importing Router from angular-router, I accidently imported it from express :|

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

本文标签：