角2のDIエラー

Question

何とかDIがサービスをインスタンス化しようとしていません。 エラーTS2339：プロパティ 'authenticationService'が 'LoginComponent'タイプに存在しません。

AuthenticationServiceを正しくインスタンス化するにはどうすればよいですか？私はプロバイダのapp.module.tsでそれを言及することがそれを考慮すると思った。ここでは、事前

で

おかげでAuthenticationService.tsです：

import { Component, OnInit } from '@angular/core'; 
import { AuthenticationService } from './../../services/AuthenticationService'; 
import { AuthHttp, AuthConfig/*, AUTH_PROVIDERS, provideAuth*/ } from 'angular2-jwt'; 

@Component({ 
    selector: 'login', 
    template: require('./login.component.html') 
}) 
export class LoginComponent implements OnInit { 
    username; 
    password; 

    constructor(authenticationService: AuthenticationService){} 

    ngOnInit() { 
     // reset login status 
     //this.authenticationService.logout(); 

    } 

    //private authService: AuthenticationService = new AuthenticationService(new AuthHttp(new AuthConfig(), new Http()); 

    login() 
    { 
     console.log(this.username); 
     console.log(this.password); 
     this.authenticationService.Login(this.username, this.password); 
    } 
} 

app.module.ts

import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { UniversalModule } from 'angular2-universal'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { AuthHttp, AuthConfig, AUTH_PROVIDERS, provideAuth } from 'angular2-jwt'; 

import { AuthenticationService } from './services/AuthenticationService'; 

import { AppComponent } from './components/app/app.component' 
import { NavMenuComponent } from './components/navmenu/navmenu.component'; 
import { HomeComponent } from './components/home/home.component'; 
import { FetchDataComponent } from './components/fetchdata/fetchdata.component'; 
import { CounterComponent } from './components/counter/counter.component'; 
import { LoginComponent } from './components/login/login.component'; 


@NgModule({ 

    declarations: [ 
     AppComponent, 
     NavMenuComponent, 
     CounterComponent, 
     FetchDataComponent, 
     HomeComponent, 
     LoginComponent 
    ], 
    imports: [ 
     UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. 
     FormsModule, 
     HttpModule, 
     RouterModule.forRoot([ 
      { path: '', redirectTo: 'home', pathMatch: 'full' }, 
      { path: 'home', component: HomeComponent }, 
      { path: 'counter', component: CounterComponent }, 
      { path: 'fetch-data', component: FetchDataComponent }, 
      { path: 'login', component: LoginComponent }, 
      { path: '**', redirectTo: 'home' } 
     ]) 
    ], 
    providers: [ 
     AuthHttp, 
     provideAuth({ 
      headerName: 'Authorization', 
      headerPrefix: 'bearer', 
      tokenName: 'token', 
      tokenGetter: (() => localStorage.getItem('id_token')), 
      globalHeaders: [{ 'Content-Type': 'application/json' }], 
      noJwtError: true 
     }), 
     AuthenticationService 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

Answer 1

：ここ

import { Injectable } from '@angular/core'; 
import { /*HTTP_PROVIDERS, */Http, Headers } from '@angular/http'; 
import { AuthHttp } from 'angular2-jwt'; 

@Injectable() 
export class AuthenticationService { 

    jwtToken: any; 

    constructor(public authHttp: AuthHttp) { } 

    jwtHeader = new Headers({ 
     "Content-Type": "application/json", 
     "alg": "HS256", 
     "typ": "JWT" 
    }); 


    Login(username: string, password: string) { 

     console.log("from authService: " + username); 

     this.authHttp.post('/api/AuthResponse', 
      JSON.stringify({ 
       "username:": username, 
       "password:": password 
      }), 
      { headers: this.jwtHeader } 
     ).subscribe(data => this.jwtToken = data, 
      () => console.log(this.jwtToken)); 

     return this.jwtToken; 
    } 

} 

はLoginComponent.tsです

コンサルトを変更するこのようなtructor：

constructor(private authenticationService: AuthenticationService){} 

あなたはthis

注意してコンストラクタのauthenticationService外にアクセスできるように：またconstructor(public authenticationService: AuthenticationService){}注射を使用することができるだけでthis

でアクセスする public/ private識別子を必要とします