升级Node、npm及Angular CLI后Angular2项目启动报错求助

After updating Node, npm, and Angular CLI (formerly angular-cli), I can't run my existing Angular 2 project. First, I got this error:

Local workspace file ('angular.json') could not be found

I tried renaming angular-cli.json to angular.json, but then a new error appeared:

Schema validation failed with the following errors: Data path "" should NOT have additional properties(project)

Here are my original configuration files:

angular-cli.json #

{ "project": { "version": "1.0.0-beta.18", "name": "client" }, "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main-polymer.ts", "test": "test.ts", "tsconfig": "tsconfig.json", "prefix": "app", "mobile": false, "styles": [ "main.scss" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/signalr/jquery.signalR.js", "../node_modules/tether/dist/js/tether.js", "../node_modules/chart.js/dist/Chart.bundle.min.js" ], "environments": { "source": "environments/environment.ts", "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts", "tristan": "environments/environment.tristan.ts", "azure": "environments/environment.azure.ts", "marius": "environments/environment.marius.ts" } } ], "addons": [], "packages": [], "e2e": { "protractor": { "config": "./protractor.conf.js" } }, "test": { "karma": { "config": "./karma.conf.js" } }, "defaults": { "styleExt": "scss", "prefixInterfaces": false, "inline": { "style": false, "template": false }, "spec": { "class": false, "component": true, "directive": true, "module": false, "pipe": true, "service": true } } }

package.json #

{ "name": "client", "version": "0.0.0", "license": "MIT", "angular-cli": {}, "scripts": { "start": "ng serve", "build": "ng build --env=prod", "lint": "tslint \"src/**/*.ts\"", "test": "ng test", "pree2e": "webdriver-manager update", "e2e": "protractor" }, "private": true, "dependencies": { "@angular/common": "~2.1.0", "@angular/compiler": "~2.1.0", "@angular/core": "~2.1.0", "@angular/forms": "~2.1.0", "@angular/http": "~2.1.0", "@angular/material": "^2.0.0-alpha.10", "@angular/platform-browser": "~2.1.0", "@angular/platform-browser-dynamic": "~2.1.0", "@angular/router": "~3.1.0", "@types/hammerjs": "^2.0.33", "@types/moment": "^2.13.0", "@vaadin/angular2-polymer": "^1.0.0-beta5", "angular2-datatable": "^0.5.1", "angular2-moment": "^1.0.0-beta.rc.1", "bootstrap": "4.0.0-alpha.4", "chart.js": "^2.4.0", "core-js": "^2.4.1", "font-awesome": "^4.7.0", "glyphicons-halflings": "1.9.0", "hammerjs": "^2.0.8", "jquery": "^2.2.4", "jwt-decode": "^2.1.0", "lodash": "^4.16.6", "moment": "^2.15.2", "ng2-charts": "^1.4.1", "ng2-toastr": "^1.3.0", "rxjs": "5.0.0-beta.12", "signalr": "^2.2.1", "tether": "^1.3.7", "ts-helpers": "^1.1.1", "zone.js": "^0.6.23" }, "devDependencies": { "@angular/cli": "^6.0.3", "@types/jasmine": "^2.2.30", "@types/lodash": "^4.14.50", "@types/moment": "^2.13.0", "@types/node": "^6.0.42", "@types/selenium-webdriver": "2.53.34", "angular-cli": "1.0.0-beta.18", "codelyzer": "1.0.0-beta.1", "jasmine-core": "2.4.1", "jasmine-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-remap-istanbul": "^0.2.1", "protractor": "4.0.9", "ts-node": "1.2.1", "tslint": "3.13.0", "typescript": "~2.0.3" } }

Let's break down why you're seeing these errors and how to fix them:

Why This Happens #

Your project is built with Angular 2 and the old angular-cli beta version (1.0.0-beta.18), but you've upgraded to the modern @angular/cli v6+. These two CLI versions are completely incompatible:

1. The new CLI looks for angular.json (introduced in CLI v1.0), while the old beta CLI uses angular-cli.json.
2. Even if you rename the file, the configuration schema is totally different—your old angular-cli.json has a top-level project property that doesn't exist in the modern angular.json schema, which causes the validation error.

You have two main options to resolve this:

Option 1: Revert to the Compatible Beta CLI (Keep Angular 2) #

If you want to keep your project on Angular 2 and avoid major upgrades, follow these steps:

1. Uninstall the global modern CLI:

   npm uninstall -g @angular/cli
   

2. Install the old beta CLI globally:

   npm install -g angular-cli@1.0.0-beta.18
   

   Note: The old CLI uses the package name angular-cli, not @angular/cli.
3. Fix your local project dependencies:
   • Open your package.json and remove the @angular/cli entry in devDependencies.
   • Make sure the angular-cli entry stays at 1.0.0-beta.18.
4. Reinstall local dependencies:

   npm install
   

5. Now you can run your project using the old CLI commands as before:

   ng serve
   

Option 2: Upgrade Your Project to Modern Angular (Angular 6+) #

If you want to move to the latest Angular ecosystem, you'll need to upgrade incrementally (since jumping from Angular 2 to 6 directly is risky). Here's a step-by-step guide:

1. Upgrade to Angular 4 first:
   • Update all @angular/* dependencies in package.json to ^4.4.7 (the latest Angular 4 version).
   • Update rxjs to ^5.5.12 and typescript to ^2.3.4.
   • Replace @angular/cli in devDependencies with @angular/cli@1.7.4 (the latest CLI version compatible with Angular 4/5).
2. Install dependencies and convert the config file:

   npm install
   ng update @angular/cli
   

   This command will automatically convert your old angular-cli.json to the modern angular.json format.
3. Upgrade to Angular 5:
   • Update all @angular/* dependencies to ^5.2.11.
   • Run:

     npm install
     ng update @angular/core
     

4. Upgrade to Angular 6:
   • Update @angular/cli to ^6.2.9 (latest Angular 6 CLI).
   • Run:

     npm install
     ng update @angular/cli
     ng update @angular/core
     

5. Update third-party dependencies:
   Packages like angular2-datatable, ng2-charts, and @angular/material will need to be upgraded to versions compatible with Angular 6. Check their npm pages for compatible versions.

Key Notes #

• Always back up your project before making dependency changes.
• If you choose to upgrade, test each step thoroughly to catch any breaking changes early.

内容的提问来源于stack exchange，提问作者user2074945