Angular英雄教程调用BrowserClient.get时出现类型不匹配异常

你遇到的这个Type 'NativeJavaScriptObject' is not a subtype of expected type 'HttpRequest'异常，主要是SDK版本与http、angular等依赖包的兼容性问题，或是类型导入冲突导致的。下面是具体的解决方案：

1. 对齐依赖包版本 #

首先检查你的pubspec.yaml，确保依赖版本和你使用的SDK（2.0.0-dev.55.0）兼容，推荐使用以下配置：

dependencies:
  angular: ^5.0.0
  angular_router: ^2.0.0
  http: ^0.12.0+4

dev_dependencies:
  angular_test: ^2.0.0
  build_runner: ^1.0.0
  build_test: ^0.10.0

修改后运行pub get更新所有依赖。

2. 确保导入正确的类型 #

在hero_service.dart和main.dart中，务必导入正确的类，避免类型冲突：

• 在hero_service.dart中：

import 'package:http/http.dart' show Client, Response;
import 'dart:convert';
import 'package:angular/angular.dart';
import 'hero.dart';

• 在main.dart中：

import 'package:http/browser_client.dart' show BrowserClient;
import 'package:angular/angular.dart';
import 'package:angular_router/angular_router.dart';

3. 修复响应处理逻辑 #

确保_extractData方法正确解析HTTP响应，避免因解析错误引发类型异常：

@Injectable()
class HeroService {
  static final _headers = {'Content-Type': 'application/json'};
  static const _heroesUrl = 'api/heroes';
  final Client _http;

  HeroService(this._http);

  Future<List<Hero>> getAll() async {
    try {
      final response = await _http.get(_heroesUrl);
      final heroes = (_extractData(response) as List)
          .map((json) => Hero.fromJson(json))
          .toList();
      return heroes;
    } catch (e) {
      throw _handleError(e);
    }
  }

  dynamic _extractData(Response response) {
    final body = json.decode(response.body);
    // 适配API返回结构，兼容直接返回列表或嵌套在data字段的情况
    return body is List ? body : body['data'];
  }

  Exception _handleError(dynamic e) {
    print('请求失败: $e');
    return Exception('Server error; cause: $e');
  }
}

4. 确认注入配置无冲突 #

检查main.dart中的注入器配置，确保没有重复注册Client类型的提供者：

@GenerateInjector([
  routerProvidersHash,
  const ClassProvider(Client, useClass: BrowserClient),
])
final InjectorFactory injector = self.injector$Injector;

void main() {
  runApp(ng.AppComponentNgFactory, createInjector: injector);
}

问题根源解释 #

在SDK 2.0.0-dev.55.0这个开发预览版本中，http包的BrowserClient实现与Angular Dart的依赖注入系统存在类型定义兼容性问题。当依赖版本不对齐时，返回的响应对象类型（NativeJavaScriptObject）无法被识别为预期的HttpRequest类型，从而抛出类型不匹配异常。通过对齐依赖版本、确保正确导入类型并修复响应解析逻辑，可以彻底解决这个问题。

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