尝试使用 ng serve 为 angular 应用程序提供服务时出错

Question

I created an angular application and it was working fine. I tried to add angular/material to my project and then my project started throwing errors. I tried fixing it by searching each error, but errors keep on changing and it doesn't come to end. Fixes I tried.

1. cleared node_modules folder and tried npm install.
2. updated the package.json to latest angular version.
3. ng update

And now it is difficult for me to find what is causing issue.

Now I am getting below error, when trying ng serve

[error] TypeError: readConfiguration is not a function
    at readTsconfig (<solutionpath>\node_modules\@angular-devkit\build-angular\src\utils\read-tsconfig.js:45:26)
    at async configureI18nBuild (\node_modules\@angular-devkit\build-angular\src\utils\i18n-options.js:124:22)
    at async generateI18nBrowserWebpackConfigFromContext (\node_modules\@angular-devkit\build-angular\src\utils\webpack-browser-config.js:68:36)
    at async setup (\node_modules\@angular-devkit\build-angular\src\builders\dev-server\index.js:127:47)

Please suggest me a way to fix this out.

PFB my package.json

{
  "name": "medicine-store-ui",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.1.0",
    "@angular/cdk": "^13.1.0",
    "@angular/common": "~13.1.0",
    "@angular/compiler": "~11.1.0",
    "@angular/core": "~13.1.0",
    "@angular/forms": "~13.1.0",
    "@angular/material": "^13.1.0",
    "@angular/platform-browser": "~11.1.0",
    "@angular/platform-browser-dynamic": "~11.1.0",
    "@angular/router": "~11.1.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.1.1",
    "@angular/cli": "~11.1.1",
    "@angular/compiler-cli": "~11.1.0",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "^6.3.9",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.2"
  }
}

Answer 1

I faced the similar problem, Updating the cli to latest worked for me

ng update @angular/compiler-cli --force

Answer 2

First, you have to check the version of each package. For Node, NPM, Angular, RxJS, TypeScript, etc.

Follow the steps if you mess up with versions:

Step 1: Check this first for node tsLib, rxjs, and version. https://unpkg.com/browse/@angular/core@13.1.0/package.json

Also, check the angular update guideline on https://update.angular.io/

Step 2: Check version conflicts Run this command npm outdated > versionchecks.log

Step 3: Find the relevant version angular project on GitHub. you will know how others write their package.json for your angular version.

Example: https://github.com/search?q=%22%40angular%2Fcore%22%3A+%22~13.1.0%22%2C+extension%3Ajson+filename%3Apackage.json+language%3AJSON+language%3AJSON&type=Code