Marlon Marlon - 1 year ago 210
Dart Question

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 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
sdk: '>=1.13.0 <2.0.0'
angular2: 2.0.0-beta.17
browser: ^0.10.0
http: ^0.11.3+7
dart_to_js_script_rewriter: ^1.0.1
- angular2:
- 'package:angular2/common.dart#COMMON_DIRECTIVES'
- 'package:angular2/common.dart#COMMON_PIPES'
entry_points: web/main.dart
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

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download