각도 -CLI Auth0 로그인 구성

Question

각도 프로젝트에 angular2-jwt 모듈을 추가하고 싶지만 어느 파일에 노드 모듈 매핑을 추가해야하는지 모릅니다 (1.0.0-beta.28.3을 사용하고 있습니다). 각-CLI 버전), 참으로 나는 & 토큰 기반 인증에 auth0 단일 로그인을 추가 할 원하는 그리고 그것은 나를 경고 아무것도 브라우저에 표시되지 않습니다

./src/app/Auth.service.ts 
There are multiple modules with names that only differ in casing. 
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. 
Use equal casing. Compare these module identifiers: 
* C:\Users\Wassim\angular workspace\gestionDocuments\node_modules\@ngtools\webpack\src\index.js!C:\Users\Wassim\angular workspace\gestionDocuments\src\app\Auth.service.ts 
    Used by 1 module(s), i. e. 
    C:\Users\Wassim\angular workspace\gestionDocuments\node_modules\@ngtools\webpack\src\index.js!C:\Users\Wassim\angular workspace\gestionDocuments\src\app\app.component.ts 
* C:\Users\Wassim\angular workspace\gestionDocuments\node_modules\@ngtools\webpack\src\index.js!C:\Users\Wassim\angular workspace\gestionDocuments\src\app\auth.service.ts 
    Used by 3 module(s), i. e. 
    C:\Users\Wassim\angular workspace\gestionDocuments\node_modules\@ngtools\webpack\src\index.js!C:\Users\Wassim\angular workspace\gestionDocuments\src\app\app.module.ts 

브라우저가이 예외

EXCEPTION: No provider for Auth! 

에게 줘 제공

이것은 auth.service.ts

입니다.

// app/auth.service.ts 

import { Injectable }  from '@angular/core'; 
import { tokenNotExpired } from 'angular2-jwt'; 

// Avoid name not found warnings 
declare var Auth0Lock: any; 

@Injectable() 
export class Auth { 
    // Configure Auth0 
    lock = new Auth0Lock('y1LTKr8nqe45mF7MRVLiIU7r3GBApRfn', 'wess.auth0.com', {}); 

    constructor() { 
    // Add callback for lock `authenticated` event 
    this.lock.on("authenticated", (authResult:any) => { 
     localStorage.setItem('id_token', authResult.idToken); 
    }); 
    } 

    public login() { 
    // Call the show method to display the widget. 
    this.lock.show(); 
    } 

    public authenticated() { 
    // Check if there's an unexpired JWT 
    // This searches for an item in localStorage with key == 'id_token' 
    return tokenNotExpired(); 
    } 

    public logout() { 
    // Remove token from localStorage 
    localStorage.removeItem('id_token'); 
    } 
} 

이것은 다음과 같은 오류를 수정해야 app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule, Http, RequestOptions} from '@angular/http'; 
import {routing} from "./app.routing"; 

import { provideAuth, AuthHttp, AuthConfig } from 'angular2-jwt'; 
import { AppComponent } from './app.component'; 
import { HomeComponent } from './home/home.component'; 
import { ProfileComponent } from './profile/profile.component'; 
import {Auth} from './auth.service'; 

export function authHttpServiceFactory(http: Http, options: RequestOptions) { 
    return new AuthHttp(new AuthConfig({}), http, options); 
} 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    HomeComponent, 
    ProfileComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    routing, 


    ], 
    providers: [ 
{ 
    provide: AuthHttp, 
     useFactory: authHttpServiceFactory, 
     deps: [ Http, RequestOptions ] 
}, 
Auth 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Answer 1

우선이다는 :

There are multiple modules with names that only differ in casing. 

그것은 당신이 파일의 이름을 변경해야 함을 의미 auth.service.ts 및 Auth.service.ts. 그런 다음 auth 및 angular-jwt로 직면 한 문제를 디버깅 할 수 있습니다.

Answer 2

참고 : 서비스를 작성하고 올바르게 이름을 지정하는 방법.

서비스 파일 이름을 "myservice.service.ts"로 지정한 경우 내 보낸 클래스는 "Myservice"여야합니다.

The naming convention for service files is the service name in lowercase followed by .service. For a multi-word service name, use lower dash-case. For example, the filename for SpecialSuperHeroService is special-super-hero.service.ts

docs에서 나의 제안 서비스를 만들기 위해 각-CLI 사용하고 있습니다. 당신은 이름을 짓는 것에 대해 걱정할 필요가 없습니다.

ng generate service auth 

도

ng g service auth 

이 명령은 auth.service라는 새로운 서비스를 생성합니다 할 수 있습니다.