Angularでcsv-parseを使う方法

検証環境

• Angular(12.0.5)
• csv-parse(4.14.3)

原因

1. csv-parseはstreamというパッケージが必要なのですが、これはnode環境でのみビルドインで利用できるもので、ブラウザ環境で使うには少し工夫をする必要がある

2. グローバル変数global, Buffer, processを定義する必要がある

というのが原因でした

なのでこれらに対処していきます

対応

必要なパッケージのインストール

$ npm i process util stream-browserify

Angular12以外のバージョンなら依存関係の中で上記のパッケージがインストールされていることがあるのでpackage-lock.jsonを確認してインストールされていれば、再度インストールする必要はない

１への対応

tsconfig.json

{
  "compilerOptions": {
    ...
    "paths": {
      "stream": ["node_modules/stream-browserify"]
    }
  },
}

２への対応

pollyfills.ts

 (window as any).global = window;

 (window as any).Buffer = (window as any).Buffer || require('buffer').Buffer;

 global.process = require('process');

参考