角度2ログインコンポーネントにangular2-social-loginを追加

Question

私は角度2で作業を始めています。私はGoogle、Facebook、linkedinとのログインをしようとしていると私はこれを私のコンポーネントに実装しようとしています しかし、私はエラーを取得しています - "電子プロバイダ！

この私のlogin.ts：

import { Component, Injectable} from '@angular/core'; 

import { AuthService } from "angular2-social-login"; 
import { BrowserModule } from '@angular/platform-browser'; 
import { Angular2SocialLoginModule } from "angular2-social-login"; 


@Injectable() 
class User { 
    email: string; 
    password: string; 
} 

let providers = { 
    "google": { 
     "clientId": "i have google client id" 
    } 
}; 
@Component({ 
    selector: 'cv-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.css'], 
    providers: [User] 
}) 

export class LoginComponent { 
    about: User; 
    sub: any; 
    constructor(public _auth: AuthService) { 
     console.log(this.about.email); 
    } 

    signIn(provider: string) { 
     this.sub = this._auth.login(provider).subscribe(
      (data) => { 
       console.log(data); 
       //user data 
       //name, image, uid, provider, uid, email, token (accessToken for Facebook & google, no token for linkedIn), idToken(only for google) 
      } 
     ) 
    } 

    logout() { 
     this._auth.logout().subscribe(
      (data) => { console.log(data); this.about = null; }//{//return a boolean value.} 
     ) 
    } 
} 

Angular2SocialLoginModule.loadProvidersScripts(providers); 

この私のhtml：

<div> 
    <h1>Angular2 Social login</h1> 
    <button (click)="signIn('google')">google</button> 
    <button (click)="signIn('linkedin')">linkedIn</button> 
    <button (click)="signIn('facebook')">facebook</button> 
    <button (click)="logout()">logout</button> 
    <div *ngIf="about"> 
     <table> 
      <tr> 
       <td>Email</td> 
       <td>{{about.email}}</td> 
      </tr> 
     </table> 
    </div> 
</div> 

私は理解していない、なぜそれは私にエラーをスローしますか？

Answer 1

providersアレイにAuthServiceを追加する必要があります。

providers: [User, AuthService]