【備忘録】Angularでerror NG6002が出た際の対処
[angular]error NG6002
最近、ちょっとAngularをやってみようと思い、以下のサイトのangularのチュートリアルをやっていたのですが、「モーダルダイアログを表示する」というところで、下記の様なエラーが出てしまいました。
www.tohoho-web.com
ERROR in node_modules/@angular/material/dialog/dialog-module.d.ts:8:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.
This likely means that the library (@angular/material/dialog) which declares MatDialogModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
最初は自分のtypoだと思って、何度も写経したソースを確認しましたが、間違っているところは無さそうです。
色々ググッて調べたのですが、似た様な事例は例によってstackoverflowとかに出ていて、真の原因は判らないものの、npm ciコマンドを実行してnode_modules配下の依存性を再解決？させると良いと分かりました。
アプリのディレクトリからnpm ciを実行します。
$ npm ci
npm WARN prepare removing existing node_modules/ before installation
> fsevents@1.2.11 install /home/toy/angular_test/my-app/node_modules/webpack-dev-server/node_modules/fsevents
> node-gyp rebuild
make: Entering directory '/home/toy/angular_test/my-app/node_modules/webpack-dev-server/node_modules/fsevents/build'
SOLINK_MODULE(target) Release/obj.target/.node
COPY Release/.node
make: Leaving directory '/home/toy/angular_test/my-app/node_modules/webpack-dev-server/node_modules/fsevents/build'
> fsevents@1.2.11 install /home/toy/angular_test/my-app/node_modules/watchpack/node_modules/fsevents
> node-gyp rebuild
make: Entering directory '/home/toy/angular_test/my-app/node_modules/watchpack/node_modules/fsevents/build'
SOLINK_MODULE(target) Release/obj.target/.node
COPY Release/.node
make: Leaving directory '/home/toy/angular_test/my-app/node_modules/watchpack/node_modules/fsevents/build'
> core-js@3.6.4 postinstall /home/toy/angular_test/my-app/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
> @angular/cli@9.0.5 postinstall /home/toy/angular_test/my-app/node_modules/@angular/cli
> node ./bin/postinstall/script.js
? Would you like to share anonymous usage data with the Angular Team at Google u
nder
Google’s Privacy Policy at https://policies.google.com/privacy? For more details
and
how to change this setting, see http://angular.io/analytics. No
added 1322 packages in 107.965s
╭────────────────────────────────────────────────────────────────╮
│ │
│ New minor version of npm available! 6.13.4 → 6.14.4 │
│ Changelog: https://github.com/npm/cli/releases/tag/v6.14.4 │
│ Run npm install -g npm to update! │
│ │
╰────────────────────────────────────────────────────────────────╯
途中で「? Would you like to share anonymous usage data with the Angular Team at Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more details and how to change this setting, see http://angular.io/analytics.」とか聞かれるので、'N'と答えておきます。
で、これの後に手動でインストールしていた@angular/materialを再インストール。
$ npm install --save @angular/material @angular/cdk + @angular/cdk@9.2.0 + @angular/material@9.2.0 added 3 packages from 8 contributors, updated 2 packages and audited 15585 packages in 20.812s 35 packages are looking for funding run `npm fund` for details found 73 vulnerabilities (72 low, 1 moderate) run `npm audit fix` to fix them, or `npm audit` for details
なんかvulnerabilities(脆弱性)が73件見つかったとか出ていますが、取り敢えずこれは後回しにしてng serveを起動するとエラーが取れました。
Angular、面白いのですがAngularのせいなのか、npmのパッケージ管理のせいなのか、結構変なところでハマります。
あと、DI(依存性注入)とか概念は判るものの、ng gとかで生成される各コンポーネントのソースコードの関係とかがなかなか頭に入ってきません。
もう少しやって、判る様になったら整理してみたいと思います。
