1

我们正在尝试在我们的新 Angular 项目中集成 nebular/auth（已添加 nebular/theme）以实现配置 Google Oauth2。HttpClientModule 也在 AppModule 的 imports 数组中配置。

在将 nebular/auth 模块集成到新的角度（角度 8.2.9）中以实现配置 Google Oauth2 身份验证机制时出现上述错误。

应用模块.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import {
  NbAuthModule,
  NbOAuth2AuthStrategy,
  NbAuthOAuth2JWTToken,
  NbOAuth2ResponseType
} from "@nebular/auth";
import { HttpClientModule } from "@angular/common/http";
@NgModule({
  declarations: [AppComponent],
  imports: [
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    NbAuthModule.forRoot({
      strategies: [
        NbOAuth2AuthStrategy.setup({
          name: "google",
          clientId:
            "xxx",
          clientSecret: "xxx",
          authorize: {
            endpoint: "https://accounts.google.com/o/oauth2/v2/auth",
            responseType: NbOAuth2ResponseType.TOKEN,
            scope: "https://www.googleapis.com/auth/userinfo.profile",

            redirectUri: "http://localhost:4201/pages"
          },
          token: {
            class: NbAuthOAuth2JWTToken,
            requireValidToken: false
          }
        })
      ]
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

应用组件.ts

import { Component } from "@angular/core";
import { NbAuthService } from "@nebular/auth";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "oauth2";

  constructor(private authService: NbAuthService) {}

  sub() {
    // this.authService.authenticate('google')
  }
}

应用组件.html

<div class="container">
  <h1>Sign-in with Google</h1>
  <form #login="ngForm" (ngSubmit)="sub()">
    <button type="submit" class="btn btn-success">Login</button>
  </form>
</div>
<router-outlet></router-outlet>

如果一切配置正确，应显示登录按钮，将用户带到 Google 身份验证页面。但是显示错误（在 sub() 方法中注释了代码）如何解决这个问题？有版本冲突吗？

4

1 回答 1

3

Nebular Auth 模块也需要安装 Theme 模块。

在您app.module.ts将其添加到providers

        providers: [ ..., NbThemeModule.forRoot() ]

那应该可以解决错误。

于 2019-12-03T12:36:22.590 回答