Angularでcsvライブラリを扱うのための初期手順

はじめに

Angular上でCSVファイルをややり取りするために csvライブラリを使用するための手順がいささか面倒だったので、手順をまとめました。

確認環境

以下の環境で動作確認を行いました。

• angular 9.0.5
• csv 5.3.2
• buffer-browserify 0.2.5
• next-tick 1.1.0

手順

以下、ファイルパスはAngularプロジェクト直下をカレントとします。

コマンドライン

npm i -S csv next-tick buffer-browserify
npm i -D @types/next-tick

ソースの変更

tsconfig.app.json（修正部分のみ）

{
（略）
  "compilerOptions": {
    "types": ["node"]
（略）
  "paths": {
    "buffer/*": ["node_modules/buffer-browserify/*"]
  }
（略）
}

src/polyfills.ts（追加のみ）

（前略）
// for 'csv'
(window as any).global = window;
global.Buffer = global.Buffer || require('buffer').Buffer;
(window as any).process = {
  env: { DEBUG: undefined },
  nextTick: require('next-tick'),
  version: ''
};

なにをしているのか

Angular(6+)ではglobal変数が存在しないようなので、コード上で作成しています。processプロパティなども同様です。

そしてcsvライブラリがもともとnode.js用のライブラリであり、ウェブブラウザでは存在しないオブジェクト(具体的にはBuffer)を使用していました。tsconfigのpathsでbrowserifyライブラリを参照するようにして対応しています。