Angular 中的 socket.io-stream 导入问题 6

Question

I'm using npm install socket.io-stream I implemented socket.io-stream on my angular component like this:

import * as io from 'socket.io-client';
import * as ss from 'socket.io-stream';

I just want to create a duplex stream like this:

stream=ss.createStream();

I have this error when I run ng build :

ERROR in ./node_modules/socket.io-stream/lib/iostream.js
Module not found: Error: Can't resolve 'stream' in ' 
'C:\Users\geoffroy\Documents\Mines Alès\2A\Stage\WebService based 
GUI\WebApp\node_modules\socket.io-stream\lib'
ERROR in ./node_modules/socket.io-stream/lib/blob-read-stream.js
Module not found: Error: Can't resolve 'stream' in 
'C:\Users\geoffroy\Documents\Mines Alès\2A\Stage\WebService based 
GUI\WebApp\node_modules\socket.io-stream\lib'

I don't understand because on my server.js It seems to work..

I try to run the command npm install stream and I don't have error with ng build . But when I launch my application I have a new error in my browser console:

inherits_browser.js:5 Uncaught TypeError: Cannot read property 'prototype' of undefined
at Object.inherits (inherits_browser.js:5)
at Object../node_modules/socket.io-stream/lib/iostream.js (iostream.js:10)
at __webpack_require__ (bootstrap:76)
at Object../node_modules/socket.io-stream/lib/socket.js (socket.js:4)
at __webpack_require__ (bootstrap:76)
at Object../node_modules/socket.io-stream/lib/index.js (index.js:1)
at __webpack_require__ (bootstrap:76)
at Object../node_modules/socket.io-stream/index.js (index.js:2)
at __webpack_require__ (bootstrap:76)

Thanks for your help

Answer 1

It is a bit of old question. For me, I got the error message below:

ERROR in ./node_modules/socket.io-stream/lib/blob-read-stream.js 2:15-41
Module not found: Error: Can't resolve 'stream' in 'xxx/node_modules/socket.io-stream/lib'

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: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }

So, I just add resolve.fallback to webpack like below.

config.resolve = {
    modules: ['node_modules'],
    extensions: ['.ts', '.js'],
    fallback: {
      "stream": require.resolve("stream-browserify")
    },
  };

And, I installed the stream-browserify like:

$ npm install stream-browserify --save

Then, the issue was solved.

Answer 2

只需在 polyfills.ts 中添加这一行

// Add global to window, assigning the value of window itself. (window as any).global = window;