Angular + Wijmoの環境でクライアントExcelエクスポートに失敗する

先日 Angular と JSZip の相性問題を倒したと思ったら次は Wijmo の Excel エクスポートが死ぬ問題に当たりました。

---

環境

Angular CLI: 8.0.3
Node: 10.16.0
OS: win32 x64
Angular: 8.0.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.3
@angular-devkit/build-angular     0.800.3
@angular-devkit/build-optimizer   0.800.3
@angular-devkit/build-webpack     0.800.3
@angular-devkit/core              8.0.3
@angular-devkit/schematics        8.0.3
@angular/cli                      8.0.3
@ngtools/webpack                  8.0.3
@schematics/angular               8.0.3
@schematics/update                0.800.3
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

-----------------------------------------------------------

@grapecity/wijmo.angular2.all     5.20191.615
jszip                             3.2.1

現象

Wijmo FlexGrid の Excel エクスポート機能を利用するとコンパイルエラーが発生します。とても見慣れた JSZip のヤツです。

ERROR in ./node_modules/jszip/lib/readable-stream-browser.js
Module not found: Error: Can't resolve 'stream' in 'Z:\projects\angular\wijmo-export-sample\node_modules\jszip\lib'

対策

先日は zip に固めている処理を自身で実装した箇所でしたので、インポートした JSZip を使うのではなく window に読み込まれた JSZip を使うことで回避しました。

noxi515.hateblo.jp

今回はライブラリの内部実装で使用されているためこの方法で回避することはできませんが、素直に不足パッケージである stream を依存に手動で追加することで解消できます。

npm i -P stream

この場合先日の記事の様にビルド済ファイルを scripts に追加すると JSZip の実装が2つビルド結果に入り込んでしまうため、 angular.json に追加している場合は削除しましょう。