Angular-Cli Auth0ログイン設定

Question

angle2-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 

もこのコマンドはauth.serviceと呼ばれる新しいサービスを作成します

ng g service auth 

を行うことができます。