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

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

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 ...

[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 설치합니다.

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

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

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

생성

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

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으로 수정합니다.

"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를 재실행하면 오류들이 없어진 것을 확인할 수 있습니다.

참고

• https://www.npmjs.com/package/@angular-builders/custom-webpack