Angular-cli Auth0登錄配置

我想添加angular2-jwt模塊到我的角度項目，但我不知道在哪個文件中我需要添加節點模塊映射（我正在使用1.0.0-beta.28.3角CLI版），事實上，我希望做補充auth0單點登錄&基於令牌的認證，這讓我報警，並沒有顯示在瀏覽器Angular-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 { }

來源

2017-04-11 Wassim Makni

你可以顯示項目結構的截圖嗎？ – digit

我添加了一個截圖 –

首先，你需要解決以下錯誤：

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

這意味着你必須重命名這些文件auth.service.ts和Auth.service.ts。之後，您可以開始使用auth和angular-jwt調試您面臨的挑戰。

來源

2017-04-11 08:01:13 Stefan

好的，我會做到這一點 –

說明：如何創建服務並正確命名。

如果您將服務文件命名爲「myservice.service.ts」，那麼您的導出類應該是：「Myservice」。

從docs

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

我的建議是採用了棱角分明，CLI創建服務。你不必擔心命名的情況。

ng generate service auth

也可以做

ng g service auth

這個命令將創建一個名爲auth.service新的服務。

來源

2017-04-11 12:24:55 digit

Angular-cli Auth0登錄配置

回答

相關問題