javascript - Angular2 Http Request -
hi trying make request using http module in angular2.
everything compiles fine in typescript (1.5), chrome shows following error in console:
exception: error during instantiation of entrylist!. original exception: typeerror: cannot read property 'merge' of undefined original stacktrace: typeerror: cannot read property 'merge' of undefined @ mergeoptions (angular2.dev.js:27991) @ execute.http.get (angular2.dev.js:28052) @ entryservice.getentries (services.js:17) @ new entrylist (entry-list.js:20) services.ts
/// <reference path="../typings/angular2/angular2.d.ts" /> import { http, observable } "angular2/angular2" export class entryservice { private _entries: array<string>; private _http : http; constructor() { this._entries = ["test1", "test2", "test3"]; this._http = new http; } entries() : array<string> { return this._entries; } getentries() { console.log(this._http); return this._http.get('http://localhost:53338/api/decisions') .torx() .map((response) => { response.json() }); } } entry-list.ts
/// <reference path="../typings/angular2/angular2.d.ts" /> /// <reference path="../modules/services.ts" /> import { component, view, ngfor } "angular2/angular2" import { entryservice } "modules/services" @component({ selector: 'entry-list' }) @view({ directives: [ ngfor ], templateurl: "../views/entry-list.html" }) export class entrylist { entries: array<string>; constructor(public service: entryservice) { this.entries = this.service.entries; this.service.getentries().subscribe((response) => { console.log(response); }); } } app.ts
/// <reference path="typings/angular2/angular2.d.ts" /> /// <reference path="components/entry-list.ts" /> /// <reference path="modules/services.ts" /> import { component, view, bootstrap, ngfor } "angular2/angular2" import { entrylist } "components/entry-list" import { entryservice } "modules/services" @component({ selector : "app", bindings: [ entryservice ] }) @view({ directives: [ entrylist ], templateurl: "views/app.html" }) class app { constructor() { console.log('hit'); } } bootstrap(app); index.html
<html> <head> <title>scm</title> <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.88/traceur-runtime.js"></script> <script src="https://jspm.io/system@0.16.js"></script> <script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.dev.js"></script> </head> <body> <app></app> <script>system.import('app')</script> </body> </html> i did @ api documentation on angular.io site, can't see whats wrong.
update
services.ts
/// <reference path="../typings/angular2/angular2.d.ts" /> import { http, observable, httpinjectables } "angular2/angular2" export class entryservice { private _entries: array<string>; constructor(private http: http) { this._entries = ["test1", "test2", "test3"]; } entries() : array<string> { return this._entries; } getentries() { console.log(this.http); return this.http.get('http://localhost:53338/api/decisions') .torx() .map((response) => { response.json() }); } } entry-list.ts
/// <reference path="../typings/angular2/angular2.d.ts" /> /// <reference path="../modules/services.ts" /> import { component, view, ngfor, http, httpinjectables } "angular2/angular2" import { entryservice } "modules/services" @component({ selector: 'entry-list', bindings : [ http, httpinjectables ] }) @view({ directives: [ ngfor ], templateurl: "../views/entry-list.html" }) export class entrylist { entries: array<string>; constructor(public service: entryservice) { this.entries = this.service.entries; this.service.getentries().subscribe((response) => { console.log(response); }); } } app.ts
/// <reference path="typings/angular2/angular2.d.ts" /> /// <reference path="components/entry-list.ts" /> /// <reference path="modules/services.ts" /> import { component, view, bootstrap, ngfor, http, httpinjectables } "angular2/angular2" import { entrylist } "components/entry-list" import { entryservice } "modules/services" @component({ selector : "app", bindings: [ entryservice, http, httpinjectables ] }) @view({ directives: [ entrylist ], templateurl: "views/app.html" }) class app { constructor() { console.log('hit'); } } bootstrap(app); without changes index.html
edit: services.ts file changes working:
/// <reference path="../typings/angular2/angular2.d.ts" /> import { injector, http, httpinjectables } "angular2/angular2" export class entryservice { private _entries: array<string>; private http: http; constructor() { this._entries = ["test1", "test2", "test3"]; var injector = injector.resolveandcreate([ httpinjectables, http ]); this.http = injector.get(http); } entries() : array<string> { return this._entries; } getentries() { return this.http.get('http://localhost:53338/api/decisions') .torx() .map(response => response.json()); } }
you should not instantiate http yourself, instead injected :
public constructor(http : http) { this.http = http; } the documentation says :
http available injectable class, methods perform http requests.
therefore not sure result if instantiate yourself, somehow can't manage request due internals undefined.
edit: adding more sources.
@injectable() export class http { constructor(protected _backend: connectionbackend, protected _defaultoptions: requestoptions) {} /** * performs request `get` http method. */ get(url: string, options?: requestoptionsargs): eventemitter { return httprequest(this._backend, new request(mergeoptions(this._defaultoptions, options, requestmethods.get, url))); } } here added little part of http class github repo. can see _backend , _defaultoptions given in constructor don't give, , method get() build options request based on options parameter , _defaultoptions given in constructor, since provide none of these, believe crashes in mergeoptions call can find here :
function mergeoptions(defaultopts, providedopts, method, url): requestoptions { var newoptions = defaultopts; if (ispresent(providedopts)) { // hack dart can used named parameters newoptions = newoptions.merge(new requestoptions({ method: providedopts.method, url: providedopts.url, search: providedopts.search, headers: providedopts.headers, body: providedopts.body, mode: providedopts.mode, credentials: providedopts.credentials, cache: providedopts.cache })); } if (ispresent(method)) { return newoptions.merge(new requestoptions({method: method, url: url})); } else { return newoptions.merge(new requestoptions({url: url})); } } at last if/else of function. more information source file located here.
Comments
Post a Comment