Angular及Angular Material从v5.x升级至v6.x启动报错求助

Hey there, let's work through this upgrade issue step by step! You've already covered the basic cleanup and upgrade steps, so let's dive into the most common causes of ng serve errors at this stage:

1. Fix Dependency Version Mismatches #

Angular 6 has strict peer dependency requirements, so misaligned packages are a frequent culprit:

• First, verify your package.json matches these core versions (adjust minor versions as needed):

  {
    "@angular/core": "^6.1.0",
    "@angular/material": "^6.4.7",
    "@angular/cdk": "^6.4.7",
    "typescript": "~2.7.2",
    "rxjs": "^6.3.3",
    "hammerjs": "^2.0.8"
  }
  

• After updating, run these commands to resolve conflicts:

  rm -rf node_modules package-lock.json
  npm cache clean --force
  npm install
  npm dedupe
  

2. Resolve RxJS 6 Breaking Changes #

Angular 6 moved to RxJS 6, which removed old operator syntax:

• If your code uses legacy operators (e.g., .map(), .filter() directly on observables), you have two options:
  1. Refactor to pipeable operators: Import operators from rxjs/operators and use the pipe() method:

     import { map } from 'rxjs/operators';
     // Replace this: observable.map(data => data.id)
     // With this: observable.pipe(map(data => data.id))
     

  2. Temporary compatibility: Install rxjs-compat to bridge the gap while you refactor:

     npm install rxjs-compat@6 --save
     

3. Address Angular Material Breaking Changes #

Material 6 introduced several breaking changes that often cause template or runtime errors:

• Replace md- prefixes: All components now use the mat- prefix (e.g., <md-button> → <mat-button>). Check all templates and component selectors for leftover md- references.
• Update theming code: The theming API changed—ensure your theme uses mat-light-theme or mat-dark-theme correctly, and that you're importing from @angular/material/theming.
• Verify module imports: Some modules were restructured; double-check that you're importing Material modules from @angular/material (e.g., MatButtonModule instead of old paths).

4. Fix Angular CLI Configuration #

Angular 6 replaced .angular-cli.json with angular.json:

• If the upgrade didn't generate angular.json properly, re-run the CLI upgrade command:

  ng update @angular/cli
  

• Confirm that hammerjs is added to the scripts array in angular.json (required for some Material components like sliders):

  "scripts": [
    "node_modules/hammerjs/hammer.min.js"
  ]
  

5. Clean Leftover Build Artifacts #

Even after deleting node_modules, cached build files can cause issues:

ng clean --force
ng serve --aot

If you can share the exact error message from your screenshot (e.g., "module not found", "template parse error"), we can narrow this down even further!

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