Search code examples
angulardartangular-dartdart-mirrors

Dart + Angular 2 can't make a HTTP request


I'm trying to create a simple Angular 2 + Dart application where I'll make HTTP calls to a remote API. I'm following the angular.io tutorial for Dart available on this link. It's compiling correctly to JS but when I try to access it using Chrome, I get an error.

I'm using Dart 1.16.0 and angular2.beta17.

This is my pubspec.yml file:

name: CaixaPostal
description: MyApp Description
version: 0.0.1
environment:
  sdk: '>=1.13.0 <2.0.0'
dependencies:
  angular2: 2.0.0-beta.17
  browser: ^0.10.0
  http: ^0.11.3+7
  dart_to_js_script_rewriter: ^1.0.1
transformers:
- angular2:
    platform_directives:
    - 'package:angular2/common.dart#COMMON_DIRECTIVES'
    platform_pipes:
    - 'package:angular2/common.dart#COMMON_PIPES'
    entry_points: web/main.dart
    resolved_identifiers:
        BrowserClient: 'package:http/browser_client.dart'
- dart_to_js_script_rewriter

This is my main.dart file:

import 'package:angular2/platform/browser.dart';
import 'package:http/browser_client.dart';
import 'package:CaixaPostal/app.component.dart';

void main() {
  bootstrap(AppComponent, const [BrowserClient]);
}

I've already done a pub get and I'm using pub serve to run a local web server. When I access http://localhost:8080/ I get the error below on Chrome Console. However, when I remove the second argument to the method bootstrap() it works fine.

enter image description here


Solution

  • I got it to work modifying my main.dart to:

    import 'package:angular2/core.dart';
    import 'package:angular2/platform/browser.dart';
    import 'package:http/browser_client.dart';
    import 'package:CaixaPostal/app.component.dart';
    
    BrowserClient HttpClientBackendServiceFactory() => new BrowserClient();
    
    void main() {
      bootstrap(AppComponent, const [
        const Provider(BrowserClient, useFactory: HttpClientBackendServiceFactory, deps: const [])
      ]);
    }
    

    However, I don't know exactly why this way it works. It seems that it has something to do with this issue https://github.com/angular/angular/issues/5266.