[Angular] Can't resolve crypto 오류 해결 방법

Angular에서 Web3를 사용할 경우 다음과 같은 오류가 발생할 경우가 있습니다.

1
2
3
4
Module not found: Error: Can't resolve 'crypto' in ...
Module not found: Error: Can't resolve 'stream' in ...
Module not found: Error: Can't resolve 'fs' in ...
Module not found: Error: Can't resolve 'os' in ...
1
2
3
4
5
6
7
8
[NG_SERVE] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
[NG_SERVE] This is no longer the case. Verify if you need this module and configure a polyfill for it.
[NG_SERVE]
[NG_SERVE] If you want to include a polyfill, you need to:
[NG_SERVE] - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
[NG_SERVE] - install 'stream-browserify'
[NG_SERVE] If you don't want to include a polyfill, you can use an empty module like this:
[NG_SERVE] resolve.fallback: { "stream": false }

polyfill.ts 파일에 내용을 추가하는 방법도 있지만 Webpack을 구성하여 해결하였습니다.

해결 방법

설치

사용자 지정 웹팩 구성을 하여 빌드 및 실행할 수 있도록 custom-webpack 패키지를 설치합니다.

1
$ npm install --save-dev @angular-builders/custom-webpack

오류가 발생하는 모듈의 패키지를 설치합니다.

1
$ npm install --save-dev stream-http https-browserify

생성

custom-webpack.config.js 파일을 생성하고 다음 내용을 추가합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const webpack = require('webpack');

module.exports = {
resolve: {
fallback: {
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
fs: false,
crypto: false,
os: false,
stream: false,
assert: false,
},
},
};

적용

angular.json 파일의 내용을 수정합니다. builder 와 options 부분을 custom-webpack으로 수정합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
"architect": {
...
"build": {
"builder": "@angular-builders/custom-webpack:browser", // @angular-builders/custom-webpack 으로 변경
"options": {
"customWebpackConfig": {
"path": "./custom-webpack.config.js", // 생성한 파일 적용
"replaceDuplicatePlugins": true
},
...
},
...
},
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server", // @angular-builders/custom-webpack 으로 변경
"options": {
"browserTarget": "test-project:build"
}
}
}

Angular를 재실행하면 오류들이 없어진 것을 확인할 수 있습니다.

참고

Share