Angulr-cli 에러 해결 (Angulr-cli Error Fix)

Angular-cli에서 발생하는 다양한 WARN / ERROR의 해결 방법을 정리합니다.

ng update

보통 update 후 에러 혹은 WARN이 발생하는데 @angular/core만 업데이트가 되고
dependence가 있는 @angular/http는 업데이트 되지 않아 발생한 에러일 수 있습니다.

대부분의 업데이트로 발생하는 WARN / 에러는 전체 업데이트로 해결할 수 있습니다.

ng update --all

만일 update가 진행되지 않는다면 강제로 update를 진행할 수도 있습니다.

ng update --all --force

Warning을 확인하려면 audit fix 명령을 실행합니다.

npm audit fix

에러가 발생하는지 확인을 위해 어플리케이션을 실행합니다.

ng serve

만일 업데이트 후 WARN 또는 에러가 발생한다면 아래의 해결방법을 참고하시기 바랍니다.

Repository is not clean. Please commit or stash any changes before updating.

연결되어 있는 Repository가 정리되지 않은 상태로 update를 진행할 경우 발생하는 에러 입니다.
이 때는 –force 가 적용되지 않습니다.

해결 방법은,

1. Repository를 commit 또는 stash하거나 Repository와 연결을 닫습니다.
   
   
2. allow-dirty 옵션을 사용합니다.

ng update --all --allow-dirty --force

이렇게 하면 적용된 것을 확인하실 수 있습니다.

npm WARN [lib] requires a peer of @angular/core

버전이 맞지 않으나 에러는 발생하지 않는 경우 입니다. 해결하지 않아도 큰 문제는 없으나 해결하기 위해서는 dependency에 맞는 버전을 설치할 수 있습니다.

ajv-keywords

업데이트 후 실행 시 아래의 warning이 발생합니다.

npm WARN ajv-keywords@3.4.1 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.

해결

기존 @ajv를 6.9.1로 install 하면 warning이 해결됩니다.

npm install @ajv@^6.9.1

Angular-cli 8.1.0 에서 발생하는 문제로 더 근본적으로 해결하려면 Angular-cli 버전을 8.1.x 버전 이상을 설치하십시오.
이렇게 하면 불필요하게 ajv를 별도로 설치할 필요도 없고 최신 버전을 유지할 수 있으므로 더 편하게 해결하실 수 있습니다.

ngxs

npm WARN @ngxs/devtools-plugin@3.4.3 requires a peer of @angular/core@>=5.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself. npm WARN @ngxs/logger-plugin@3.4.3 requires a peer of @angular/core@>=5.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself. npm WARN @ngxs/store@3.4.3 requires a peer of @angular/core@>=5.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself.

해결

ngxs@3.5.0 부터 Angular8 을 지원합니다. ngxs를 최신버전으로 업데이트하여 문제를 해결합니다.

npm install @ngxs/store@latest @ngxs/logger-plugin@latest @ngxs/devtools-plugin@latest

angular/http

angular/http 버전이 angular/core 버전보다 높을 때 발생합니다.

@angular/http@7.2.15 requires a peer of @angular/core@7.2.15 but none is installed

해결

상단 페이지의 내용과 같이 angular8로 업데이트를 진행하시거나 http 버전을 낮추어야 합니다.

Error

Typescript version not matched

업데이트 후 실행 시 아래와 유사한 에러가 발생합니다.

ERROR in The Angular Compiler requires TypeScript >=3.4.0 and <3.5.1 but 3.5.1 was found instead.

dependency: Angular-Cli 7.x -> 8.1.x typescript 버전이 angular/cli와 맞지 않는다는 에러 입니다.

해결

기존 typescript를 제거하고 재설치 하는 방법입니다.

npm install typescript@">=3.4.0 <3.5.0" --save-dev --save--exact

재설치 시 범위를 에러 메시지와 동일하게 적용할 시 해당 범위의 가장 높은 버전이 설치 되어 에러가 해결됩니다.

@angular-devkit/build-angular version not matched

업데이트 후 실행 시 아래의 에러가 발생합니다.

Schema validation failed with the following errors:
  Data path ".builders['app-shell']" should have required property 'class'.
Error: Schema validation failed with the following errors:
  Data path ".builders['app-shell']" should have required property 'class'.
    at MergeMapSubscriber._registry.compile.pipe.operators_1.concatMap.validatorResult [as project] (C:\Users\ksrae\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\core\src\workspace\workspace.js:215:42)
    at MergeMapSubscriber._tryNext (C:\Users\ksrae\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\operators\mergeMap.js:69:27)
    at MergeMapSubscriber._next (C:\Users\ksrae\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\operators\mergeMap.js:59:18)
    at MergeMapSubscriber.Subscriber.next (C:\Users\ksrae\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\Subscriber.js:67:18)
    at MergeMapSubscriber.notifyNext (C:\Users\ksrae\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\operators\mergeMap.js:92:26)
    at InnerSubscriber._next (C:\Users\ksrae\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\InnerSubscriber.js:28:21)
    at InnerSubscriber.Subscriber.next (C:\Users\ksrae\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\Subscriber.js:67:18)
    at MapSubscriber._next (C:\Users\ksrae\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\operators\map.js:55:26)
    at MapSubscriber.Subscriber.next (C:\Users\ksrae\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\Subscriber.js:67:18)
    at SwitchMapSubscriber.notifyNext (C:\Users\ksrae\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\operators\switchMap.js:86:26)

Dependency: Angular-Cli 8.1.0 에러 메시지에서는 파악할 수 없으나 @angular-devkit/build-angular 버전이 angular/cli와 맞지 않아 발생하는 에러 입니다.

해결

기존 @angular-devkit/build-angular를 제거하고 재설치 하는 방법입니다.

npm install @angular-devkit/build-angular@0.13.8

Angular-Cli 8.1.x 부터 문제가 해결되었습니다. 근본적인 해결을 위해 ng update를 통해 Angular Cli 버전을 업데이트 하시기 바랍니다.

node-sass error

프로젝트 생성 시 sass 에 문제가 있다며 에러가 발생하는 경우가 있습니다.
이 때는 node-sass를 강제로 rebuild 하여 해결할 수 있습니다.

npm rebuild node-sass --force

nanomatch, cannot find module error

업데이트 또는 어떠한 이유로 필요한 모듈이 잘못된 경우 입니다. 이 경우 정확한 해결 방법은 없고, package.json이 올바른지 확인 후 다시 설치하는 것이 좋습니다.

package-lock.json 파일을 제거합니다.
node_module 폴더를 제거합니다. 안의 모든 내용도 함께 제거 합니다.
npm install로 node_module을 재설치 합니다.

이래도 에러가 발생한다면 이는 프로젝트의 문제가 아닌 typescript 관련 문제 이거나 angular/cli의 설치 오류 문제일 수 있으므로 둘 다 재설치 하시기 바랍니다.

끝.