如何为旧Angular 5项目执行npm install生成node_modules文件夹

Hey Andy, I’ve run into this exact scenario before—new dev environment with shiny latest tools clashing with an older Angular project. Let’s get your project up and running smoothly without touching Angular 6. Here’s the breakdown of the problem and solutions:

What’s Causing the Errors? #

The core conflict is between your global Angular CLI v6.0.3 and the project’s required @angular/cli v1.7.1. Angular CLI versions are tightly tied to Angular framework versions, so the v6 CLI tries to pull in v6 dependencies that clash with your project’s v5 packages. Good news: your Node.js (8.11.2) and npm (5.6.0) versions are fully compatible with Angular 5, so we just need to align the CLI versions.

Step-by-Step Fixes #

1. Downgrade Your Global Angular CLI to Match the Project #

First, remove the incompatible global CLI and install the exact version your project needs:

# Uninstall the global Angular CLI v6
npm uninstall -g @angular/cli

# Install the project's required CLI version (1.7.1)
npm install -g @angular/cli@1.7.1

# Clear npm cache to resolve any lingering dependency conflicts
npm cache clean --force

2. Clean Up Project Local Files #

Before reinstalling dependencies, delete any partially generated files that might cause conflicts:

• Delete the node_modules folder (if it was created partially)
• Delete package-lock.json (this file locks dependency versions, and it might have pulled in v6 packages accidentally)

3. Reinstall Dependencies #

Now run the install command again. With the global CLI aligned, plain npm install should work smoothly:

npm install

4. Verify the Setup Works #

Once dependencies are installed, test running the project with the script from your package.json:

npm start

This calls ng serve using the correct v1.7.1 CLI that’s fully compatible with Angular 5.

Extra Tips to Avoid Future Conflicts #

• Use a Node version manager like nvm to switch between Node versions for different projects (though Node 8.11.2 is perfectly fine for Angular 5)
• Always prefer npx ng over the global ng command when working on multiple Angular projects—this ensures you use the CLI version specified in the project’s package.json

Here’s your project’s package.json for reference:

{
  "name": "my-first-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --environment=local --open",
    "build": "ng build --prod aot=false",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/cdk": "^5.2.4",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^5.2.4",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@ngui/map": "^0.20.2",
    "@types/googlemaps": "^3.30.7",
    "bootstrap": "^4.0.0",
    "core-js": "^2.4.1",
    "google-maps-coords": "^1.0.0",
    "jquery": "^3.3.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.1",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "font-awesome": "^4.7.0",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

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