如何将Angular 4.2.5升级至4.3及以上？解决HttpClient缺失问题

Hey there! Let's tackle this issue step by step—you're totally right that HttpClient didn't exist in @angular/common/http until Angular 4.3, so upgrading is the way to go to get access to that handy client. Here's how to do it properly, plus some pitfalls to watch out for.

Why You're Seeing the Error #

In Angular 4.2.5, the only HTTP client available is the older Http from @angular/http. The newer, more powerful HttpClient was introduced in Angular 4.3 as part of @angular/common/http, which is why you can't find it in your current setup.

Step-by-Step Upgrade Guide #

Your package.json has all Angular packages locked at 4.2.5—we need to update these to a 4.3.x version (I recommend 4.3.6, the last stable release of the 4.3 branch) while keeping dependencies compatible.

1. Update Angular Core Packages #

Modify all @angular/* entries in your devDependencies to use version 4.3.6 (make sure every Angular package has the same version to avoid conflicts):

"devDependencies": {
  "@angular/animations": "4.3.6",
  "@angular/common": "4.3.6",
  "@angular/compiler": "4.3.6",
  "@angular/compiler-cli": "4.3.6",
  "@angular/core": "4.3.6",
  "@angular/forms": "4.3.6",
  "@angular/http": "4.3.6",
  "@angular/platform-browser": "4.3.6",
  "@angular/platform-browser-dynamic": "4.3.6",
  "@angular/platform-server": "4.3.6",
  "@angular/router": "4.3.6",
  // ... keep other dependencies as-is except for @ngtools/webpack
}

2. Update @ngtools/webpack #

Angular's webpack tools need to match your Angular version. For Angular 4.3, update @ngtools/webpack to 1.6.6:

"@ngtools/webpack": "1.6.6",

3. Install Updated Dependencies #

Run this command in your project root to apply the changes:

npm install

If you use Yarn, run yarn install instead.

4. Configure HttpClient in Your App #

Once upgraded, you'll need to:

• Import HttpClientModule from @angular/common/http in your root AppModule (or any module where you need HTTP access):

  import { HttpClientModule } from '@angular/common/http';
  
  @NgModule({
    imports: [
      // ... other imports
      HttpClientModule
    ]
  })
  export class AppModule { }
  

• Inject HttpClient into your services/components instead of the old Http:

  import { HttpClient } from '@angular/common/http';
  
  constructor(private http: HttpClient) { }
  

Common Pitfalls to Avoid #

• Mismatched Angular Versions: Double-check that every @angular/* package has the exact same version (4.3.6 in this case). Mixing versions will cause runtime errors or dependency conflicts.
• RxJS Compatibility: Your current RxJS version (5.4.2) works with Angular 4.3, but avoid upgrading to RxJS 6.x—it has breaking changes that Angular 4 doesn't support. Stick to RxJS 5.4.x or 5.5.x.
• Old HTTP Code Changes: HttpClient automatically parses JSON responses, so remove any .map(res => res.json()) calls from your old Http code. This is a common source of errors after upgrading.
• TypeScript Version: Your current TypeScript 2.4.1 is compatible with Angular 4.3, but if you run into type errors, you can safely upgrade to TypeScript 2.5.x (the maximum supported version for Angular 4.x).
• Webpack Configuration: If you customized your webpack config, ensure the AngularCompilerPlugin settings align with the new @ngtools/webpack version. For ASP.NET Core's default Angular template, this shouldn't require changes, but it's worth checking if you hit build errors.

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