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 [email protected] 실행

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 에서 확인한다.

결과

[email protected] /XXX/XXX/XXX
...
├── UNMET PEER DEPENDENCY @angular/[email protected]
...
├── UNMET PEER DEPENDENCY [email protected]
...
└── UNMET PEER DEPENDENCY [email protected]

무슨 일 2

npm install @angular/[email protected]

npm install [email protected]

npm install [email protected] 를 실행한다.

npm list --depth=0 에서 확인한다.

결과

[email protected] /XXX/XXX/XXX
...
├── UNMET PEER DEPENDENCY @angular/[email protected]
...
├── UNMET PEER DEPENDENCY [email protected]
...
└── UNMET PEER DEPENDENCY [email protected]

이것으로 해소된 보고도 있었지만 해소하지 않고.

무슨 일 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가 사라졌다!

[email protected] /XXX/XXX/XXX
...
├── @angular/[email protected]
...
├── [email protected]
...
└── [email protected]

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

했던 일

npm rebuild node-sass --force 를 실행 (--force 없이는 좋지 않았다)

결과

build가 다녔다! !

감상

실은 타인의 서포트였기 때문에 상당히 시간이 걸렸습니다.
그런 일도 있어서, 지워 다시 넣는 것이 빠르다고 생각하지만 할 수 없었다.
종속성이 굉장히 굉장했습니다. (작은 느낌)

참고

h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 47185611 / ゔ ぇ し ん s - f 앙 ぁ r m ぇ ぇ r ぃ테르미네 d
htps : // 기주 b. 코 m / 앙구 r / 앙구 r ぃ / 이스에 s / 9794
htps : // 하테나 bぉg. 코m/엔트리/2016/05/22/003057
htps : // 기주 b. 코 m / 앙구 r / 앙구 r ぃ / 이스에 s / 16498