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ライブラリを参照するようにして対応しています。
Author And Source
この問題について(Angularでcsvライブラリを扱うのための初期手順), 我々は、より多くの情報をここで見つけました https://qiita.com/ikomiki/items/b7621a2aea05755b0add著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .