angularでchart.jsを使ったときに、typeを指定してもにエラーになりハマった

環境

・angular/cli v11.2.19
・Node v12.16.3
・OS windows
・chart.js v3.9.1

具体的なエラー

re.js:6210 ERROR Error: "pie" is not a registered controller.

結論

import { registerables } from 'chart.js';

で registerablesをimportして、

Chart.register(...registerables);

をグラフ作成前に追加する。
※私の場合は

// ファイルの一番上で
import { registerables } from 'chart.js';
~


ngAfterViewInit() {
	Chart.register(...registerables);
	~ //以降グラフ作成コード
}

という形。
※実際のimportはChartも必要な為以下の形になる。

import { Chart, registerables } from 'chart.js';

原因

いまいちわからないけれど、多分TypeScriptの型問題的なのが原因だと思う。
Chart.jsの Chartクラスのtypeプロパティはstring型じゃない！！と怒られる、みたいな。
間違っていたらすいません、、、

経緯

プロジェクトでAngularで円グラフを書く必要があったためChart.jsを使用してグラフを書こうと思ったら、画面に表示されなくて困った。
他ライブラリのng2-chartsやngx-chartsを使おうとしたけど、Angularのバージョン的に使えなさそうだったので、Chart.jsを使うしかなかった。

感想

問題を解決するのに非常に時間がかかった。多分1日半くらいかかった。非常に無駄な時間だった。
でも生のCSSでグラフ書く方がめんどそうだったから必死だった。
Angularの文献が少なすぎる(英語ばっかり)だから正直Angular使うのはいやだ。
あと、バージョンが変わる頻度が高すぎて、バージョンによってはできる、できないが多すぎるから、自分に適した記事を見つけるのが大変。
もうちょっとバージョン変更頻度低くてもええんやで、、、

この記事が誰かの役に立てば幸いです。

コメント等ご気軽に優しくどうぞ。