Eric Eric - 6 months ago 19
Javascript Question

Login page error: 'http' does not exist (HTML / TypeScript / Angular2 / Javascript)

Screenshot of error:



Link to full project:

https://www.dropbox.com/s/2aqrv63tmv3avnd/FullProject2.zip?dl=0

Link to plunker example of log-in page:

http://plnkr.co/edit/j69yu9cSIQRL2GJZFCd1?p=preview

(For the example the username and password is "test")

Code containing the error:

return this.http.post('/auth/login', JSON.stringify({}


Full code of dashboard.component.ts

import {Component, OnInit} from 'angular2/core';
import {Router} from 'angular2/router';
import {Hero} from './hero';
import {HeroService} from './hero.service';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HeroesComponent} from './heroes.component';
import {HeroDetailComponent} from './hero-detail.component';
import {SpreadSheetComponent} from './spreadsheeteditall.component';
import {SwitchUsersComponent} from './SwitchUsers.component';
import {BiddingPageComponent} from './BiddingPage.component';
import { Injectable } from 'angular2/core';
import { Jsonp, URLSearchParams } from 'angular2/http';
import {HTTP_PROVIDERS, Http, Headers} from 'angular2/http';
import {JSONP_PROVIDERS} from 'angular2/http';
@Component({
selector: 'my-dashboard',
templateUrl: 'app/dashboard.component.html',
styleUrls: ['app/dashboard.component.css'],
directives: [ROUTER_DIRECTIVES],
providers : [HTTP_PROVIDERS, Http],
})
export class DashboardComponent implements OnInit {
heroes: Hero[] = [];

constructor(private _http: Http, private _heroService: HeroService, private _router: Router) {
this.token = localStorage.getItem('token');
}

ngOnInit() {
this._heroService.getHeroes().then(heroes => this.heroes = heroes.slice(1,5));
}

gotoDetail(hero: Hero) {
let link = ['HeroDetail', { id: hero.id }];
this._router.navigate(link);
}
@Injectable()

token: string;


login(username: String, password: String) {


return this.http.post('/auth/login', JSON.stringify({}
// username: username,
// password: password
// }), {
// headers: new Headers({
// 'Content-Type': 'application/json'
// })
// })

// .map((res : any) => {
// let data = res.json();
// this.token = data.token;
// localStorage.setItem('token', this.token);
// });

// for the purpose of this cookbook, we will juste simulate that

if (username === 'test' && password === 'test') {
this.token = 'token';
localStorage.setItem('token', this.token);
//return Rx.Observable.of('token');
}

//return Rx.Observable.throw('authentication failure');
,

logout() {

}}
/*
return this._http.get(this.config.serverUrl + '/auth/logout', {
headers: new Headers({
'x-security-token': this.token
})
})
.map((res : any) => {
this.token = undefined;
localStorage.removeItem('token');
});


// this.token = undefined;
// localStorage.removeItem('token');

// return Rx.Observable.of(true);
}
}

Answer

Try this (_http instead http):

return this._http.post('/auth/login', JSON.stringify({}
Comments