Angular-cli Auth0 login config

Question

Ich möchte angular2-jwt-Modul zu meinem eckigen Projekt hinzufügen, aber ich weiß nicht, in welcher Datei ich Knotenmodul-Mapping hinzufügen muss (ich benutze 1.0.0-beta.28.3 Winkel-cli-Version), in der Tat möchte ich auth0 Single Sign on & Token-basierte Authentifizierung hinzufügen tun, und es gibt mir Warnung und nichts auf dem Browser

./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 

und der Browser geben sie mir diese Ausnahme

EXCEPTION: No provider for Auth! 

gezeigt

Dies ist 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'); 
    } 
} 

und das ist 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

Zuerst Sie folgende Fehler beheben müssen:

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

Es bedeutet, dass Sie die Dateien umbenennen auth.service.ts und Auth.service.ts. Danach können Sie beginnen, die Herausforderungen zu debuggen, denen Sie mit auth und angular-jwt gegenüberstehen.

Answer 2

Hinweis: So erstellen Sie einen Dienst und benennen ihn ordnungsgemäß.

Wenn Sie Ihre Servicedatei "myservice.service.ts" nennen, sollte Ihre exportierte Klasse "Myservice" sein.

Von 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

verwendet Mein Vorschlag Winkel-cli Dienstleistungen zu schaffen. Sie müssen sich nicht um den Namen kümmern.

ng generate service auth 

können auch

ng g service auth 

Dieser Befehl neuen Dienst auth.service genannt wird schaffen machen.