CODEWITHSUNDEEP
angulardartangular-dartdart-mirrors
Marlon
Marlon

Reputation: 898

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

Upvotes: 1

Views: 372

Answers (1)

Marlon
Marlon

Reputation: 898

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.

Upvotes: 2

Related Questions