Angulr-cli Error Fix

Resolving Common WARN/ERROR Messages in Angular CLI

This document consolidates solutions for various WARN and ERROR messages encountered while using the Angular CLI. These issues typically arise after updates or during project setup.

ng update

Often, errors or WARN messages surface immediately after running ng update. This can occur if @angular/core updates successfully, but dependent packages like @angular/http do not, resulting in version incompatibilities. A comprehensive update usually resolves these issues.

ng update --all

If the update process stalls, you can force the update (though this is generally discouraged unless necessary).

ng update --all --force

To identify potential issues stemming from outdated dependencies, execute the npm audit fix command.

npm audit fix

After updating, it’s crucial to verify the application’s functionality by running:

ng serve

If WARN or ERROR messages persist, consult the specific solutions outlined below.

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

This error emerges when attempting to update with uncommitted or unstashed changes in the associated Git repository. The --force flag is ineffective in this scenario.

Resolution options:

1. Commit or stash the changes in the repository, or disconnect the project from the repository entirely.
2. Utilize the --allow-dirty option.

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

This command permits the update process to proceed despite the presence of uncommitted changes.

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

This warning indicates a version mismatch, but it might not halt the application. While the application may function, addressing the warning is recommended to maintain dependency alignment. You can resolve this by installing a version of the library compatible with your @angular/core version.

ajv-keywords

After updating, you might encounter the following 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.

Solution

Installing @ajv version 6.9.1 typically resolves this warning.

npm install @ajv@^6.9.1

Note: This issue primarily arises in Angular CLI versions below 8.1.x. To fundamentally resolve it, upgrade your Angular CLI to version 8.1.x or higher. This eliminates the need for a separate ajv installation and ensures you’re running a more recent, potentially more stable, version of the CLI.

ngxs

You might see warnings similar to these:

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.

Solution

ngxs version 3.5.0 and later officially support Angular 8. Upgrade your ngxs packages to the latest versions to eliminate these warnings.

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

angular/http

This error occurs when the angular/http version is higher than the angular/core version.

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

Solution

As described earlier, upgrading to Angular 8 or downgrading the http version can resolve this incompatibility.

Error Conditions

Typescript version not matched

After an update, you might encounter an error similar to this:

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 This error indicates a version mismatch between the installed TypeScript version and the Angular CLI’s requirements.

Solution

Remove the existing TypeScript installation and reinstall a compatible version.

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

Reinstalling within the specified range (matching the error message) will install the highest available version within that range, resolving the issue.

@angular-devkit/build-angular version not matched

The following error might appear after an update:

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 Although the error message might not explicitly state it, this issue stems from a version incompatibility between @angular-devkit/build-angular and the Angular CLI.

Solution

Remove and reinstall @angular-devkit/build-angular with a compatible version.

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

Note: Angular CLI version 8.1.x addresses this problem. For a more permanent solution, update your Angular CLI version using ng update.

node-sass error

During project creation, you might encounter errors related to node-sass. This can often be resolved by forcing a rebuild of the node-sass package.

npm rebuild node-sass --force

nanomatch, cannot find module error

This error indicates a missing or corrupted module. There’s no single definitive solution. It’s best to ensure your package.json is correct and reinstall dependencies.

Remove the package-lock.json file. Delete the node_module folder and all its contents. Reinstall node_module by running npm install.

If the error persists after these steps, it may indicate a problem with your TypeScript setup or an issue with the Angular CLI installation. Try reinstalling both.

End.