Angular common error messages

Angular message errors ... again this one ... how did I solve last time?

Here is a list of frequent Angular issues. It’s not very long (yet), but it happens that I’m upgrading an Angular project and I see again issues that appear regularly when I change something in the configuration. If you have others to add you can send me a message.

  • ### Package '@angular/core' is not a dependency.

Maybe node_modules is missing tun npm i to install the packages and dependencies.

----

  • ### Your global Angular CLI version ([VERSION]) is greater than your local version ([VERSION]). The local Angular CLI version is used.

You should update the CLI version in your project. The global (-g) version is more up to date: npm install --save-dev @angular/cli@latest

----

  • ### 'ng' is not recognized as an internal or external command, operable program or batch file.

You should install Angular Cli: npm install -g @angular/cli. If you cannot install packages on your machine usually you can replace ng with npm start.

  • ### An unhandled exception occurred: Cannot find builder "@angular-devkit/build-angular:tslint

You are migrating from Angular 12 to Angular 13 and you are still using TSLint. TSLint has been deprecated and you shoud migrate to ESLint.

The steps involved:

  • add ESLint to your project:  add @angular-eslint/schematics
  • migrate your lint configuration using ng g @angular-eslint/schematics:convert-tslint-to-eslint this uses a migration tool : https://www.npmjs.com/package/tslint-to-eslint-config It will install the following plugins: eslint-plugin-import, eslint-plugin-jsdoc, eslint-plugin-prefer-arrow and …
DELETE tslint.json
CREATE .eslintrc.json (1084 bytes)
UPDATE angular.json (3682 bytes)
UPDATE package.json (1591 bytes)

In your angular.json your lint configuration will be updated:

"lint": {
    "builder": "@angular-eslint/builder:lint",
      "options": {
        "lintFilePatterns": [
          "src/**/*.ts",
          "src/**/*.html"
        ]
      }
  },
...
  "defaultProject": "frontend",
  "cli": {
    "defaultCollection": "@angular-eslint/schematics"
  }

In this post I describe how to customize the ErrorHandler of Angular to customize the runtime errors: Angular Custom Error Handler