Angular9の時代にAngular5の環境を構築しようとしてハマった際のメモ

今の時代でまさかのAngular5が動いています。
環境構築（buildで怒涛のエラー）でハマったのでエラーを潰していった奴らを備忘録として記録しておきます。

The build command requires to be run in an Angular project, but a project definition could not be found.

やったこと

• angular cliが入っているか確認する
• コマンドを打ったディレクトリを確認する

Do Ahead of Time compilation. Unknown option: ‘--env’

やったこと

• ng --versionでAngular CLI: XXXのバージョンを確認する
• バージョンを下げて対応する 私の環境では1.7.4にしました

Versions of @angular/compiler-cli and typescript could not be determined. The most common reason for this is a broken npm install.

やったこと

• ng --versionで"@angular/compiler-cli": XXXのバージョンを確認する
• バージョンを下げて対応する 私の環境では5.2.11にしました

Unable to find any apps in .angular-cli.json.

やったこと

• .angular-cli.jsonが存在するか確認する
• 動いている人から.angular-cli.jsonをもらって配置する
• 新しいバージョンで作成されてた.angular.jsonを消す

An error occured during the build: TypeError: Cannot read property ‘thisCompilation’ of undefined ...

やったこと

• ng --versionでweboackのバージョンを確認する
• npm remove webpack npm install webpack@3.11.0を実行する

ERROR in Module build failed: BrowserslistError: Unknown browser query dead ...

こんなログが出た。
これの解決にちょっと時間がかかったのでやったことを全部載せます。

...
/node_modules/@angular/cli/node_modules/browserslist/index.js:164:11
...
ERROR in ../src/main.ts
Module build failed: Error: Cannot find module ‘@angular/compiler-cli/ngcc’
...
ERROR in ../src/polyfills.ts
Module build failed: Error: Cannot find module ‘@angular/compiler-cli/ngcc’
...
ERROR in ../src/styles.scss
Module build failed: ModuleBuildError: Module build failed: ValidationError: Invalid options object. 
...
ERROR in ../src/styles.scss
Module build failed: ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
...

やったこと 1

• npm list --depth=0 で確認する。

結果

XXX@0.0.0 /XXX/XXX/XXX
...
├── UNMET PEER DEPENDENCY @angular/compiler-cli@5.2.11
...
├── UNMET PEER DEPENDENCY typescript@2.5.3
...
└── UNMET PEER DEPENDENCY zone.js@0.10.2

やったこと 2

• npm install @angular/compiler-cli@5.2.11
• npm install typescript@2.5.3
• npm install zone.js@0.10.2 を実行する。
• npm list --depth=0 で確認する。

結果

XXX@0.0.0 /XXX/XXX/XXX
...
├── UNMET PEER DEPENDENCY @angular/compiler-cli@5.2.11
...
├── UNMET PEER DEPENDENCY typescript@2.5.3
...
└── UNMET PEER DEPENDENCY zone.js@0.10.2

これで解消された報告もあったのだが解消せず。

やったこと 3

• node_modulesを削除後npm installを実行する。

結果

解消せず。

やったこと 4

• ng --versionを確認する。

...
@angular-devkit/architect: 0.900.2
@angular-devkit/build-angular: 0.900.2
@angular-devkit/build-optimizer: 0.900.2
@angular-devkit/build-webpack: 0.900.2
@angular-devkit/core: 9.0.2
@angular-devkit/schematics: 0.3.2
...

• @angular-devkit/XXX のバージョンが気になるので0.3.2にする。不要なのも削除。

...
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
...

• npm list --depth=0 で確認する

結果

• UNMET PEER DEPENDENCY が消えた！

XXX@0.0.0 /XXX/XXX/XXX
...
├── @angular/compiler-cli@5.2.11
...
├── typescript@2.5.3
...
└── zone.js@0.10.2

ERROR in ../src/styles.scss Module build failed: Error: Cannot find module ‘node-sass’

やったこと

• npm rebuild node-sass --forceを実行（--forceなしはダメだった）

結果

• buildが通った！！

感想

実は他人の方のサポートだったので結構時間がかかりました。
そんなこともあって、消して入れ直した方が早かったと思うけどできなかった。
依存関係がすごくすごかったのです。（小並感）

参考

https://stackoverflow.com/questions/47185611/versions-of-angular-compiler-cli-and-typescript-could-not-be-determined
https://github.com/angular/angular-cli/issues/9794
https://helen.hatenablog.com/entry/2016/05/22/003057
https://github.com/angular/angular-cli/issues/16498