在 AppComponent 构造函数中添加 OAuthService 后 UI 无法正常工作

Posted 2023-03-27

【中文标题】在 AppComponent 构造函数中添加 OAuthService 后 UI 无法正常工作

【英文标题】：UI is not working after adding OAuthService in AppComponent constructor

【发布时间】：2021-12-11 18:53:26

【问题描述】：

Angular

添加 OIDC OAuthService 后，UI 不热显示任何内容。下面是角码 .

import  Component  from '@angular/core';
import  OAuthService  from 'angular-oauth2-oidc';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent 
  title = 'AngProject';
  constructor(private auth:OAuthService)

  

Error

core.js:6486 ERROR NullInjectorError: R3InjectorError(AppModule)[OAuthService -> HttpClient -> HttpClient -> HttpClient]: 
  NullInjectorError: No provider for HttpClient!
    at NullInjector.get (core.js:11108)
    at R3Injector.get (core.js:11275)
    at R3Injector.get (core.js:11275)
    at R3Injector.get (core.js:11275)
    at injectInjectorOnly (core.js:4758)
    at Module.ɵɵinject (core.js:4762)
    at Object.OAuthService_Factory [as factory] (angular-oauth2-oidc.js:3050)
    at R3Injector.hydrate (core.js:11445)
    at R3Injector.get (core.js:11264)
    at NgModuleRef$1.get (core.js:25340)

【问题讨论】：

控制台可能包含更多信息。也许你没有在你的 NgModule 中提供服务？ （如果它来自库，您可能需要将库模块添加到模块的导入数组中）

我已经在AppModule中添加了oAuth服务

您可以在您的问题中添加控制台输出吗？通常，当应用程序未加载时，您会在控制台上看到一些红色文本，这应该有助于解决问题。

另外，添加服务可能还不够，如果您按照正确的步骤操作，请检查github.com/manfredsteyer/…。

【参考方案1】：

In App Module ts I added below dependencies

import HttpClientModule from '@angular/common/http'
import  OAuthModule  from 'angular-oauth2-oidc';
import UrlHelperService from "angular-oauth2-oidc";

And I declared the service and module in Ng Module like below

@NgModule(
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    OAuthModule.forRoot()
  ],
  providers: [OAuthService,UrlHelperService],
  bootstrap: [AppComponent]
)