0

我想将 angular2-jwt 模块添加到我的 angular 项目中，但我不知道我需要在哪个文件中添加节点模块映射（我使用的是 1.0.0-beta.28.3 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 { }

在此处输入图像描述

4

2 回答 2

0

首先，您需要修复以下错误：

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

这意味着您必须重命名文件 auth.service.ts 和 Auth.service.ts。之后，您可以开始调试 auth 和 angular-jwt 面临的挑战。

于 2017-04-11T08:01:13.447 回答
0

注意：如何创建服务并正确命名。

如果您将服务文件命名为“myservice.service.ts”，那么您导出的类应该是：“Myservice”。

来自文档

服务文件的命名约定是小写的服务名称后跟 .service。对于多字服务名称，请使用小写连字符。例如，SpecialSuperHeroService 的文件名是 special-super-hero.service.ts

我的建议是使用 angular-cli 创建服务。您不必担心命名的大小写。

ng generate service auth

也可以

ng g service auth

此命令将创建名为 auth.service 的新服务。

于 2017-04-11T12:24:55.817 回答