Repository: manfredsteyer/angular-oauth2-oidc

Issue #436: Error angular-oauth2-oidc/angular-oauth2-oidc"' has no exported member 'JwksValidionHandler
Created: 2018-09-25T00:23:49Z
I am getting this error on building. I am trying to have a successful build before I go ahead with my task.
Any clues?
$ npm angular-oauth2-oidc -v
6.4.1
$ npm @angular -v
6.4.1
ERROR in src/app/app.component.ts(4,9): error TS2724: Module /node_modules/angular-oauth2-oidc/angular-oauth2-oidc"' has no exported member 'JwksValidionHandler'. Did you mean 'JwksValidationHandler'?
import { Component } from '@angular/core';
import { OktaAuthService } from '@okta/okta-angular';
import { OAuthService } from 'angular-oauth2-oidc'
import {JwksValidionHandler} from 'angular-oauth2-oidc';
@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'PlanMiner';
constructor(private oauthservice : OAuthService) {
this.oauthservice.redirectUri = window.location.origin;
this.oauthservice.clientId = '';
// this.oauthservice.Scope='openId profiler email';
// this.oauthservice.issurer = 'url ';
this.oauthservice.tokenValidationHandler = new JwksValidionHandler();
this.oauthservice.loadDiscoveryDocument().then( () => {
this.oauthservice.tryLogin();
});
}
}

Duplicate issue #335: Error loading discovery document Angular 6.0.3
Created: 2018-05-25T20:04:19Z
Using Angular 6.0.3, I am attempting to using this module but keep running into this error. Not sure how to resolve this after about 4 hours of research. Using the Tour of Heroes example from the Angular.io website
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './services/in-memory-data.service';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { MessagesComponent } from './messages/messages.component';
import { AppRoutingModule } from './/app-routing.module';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HeroSearchComponent } from './hero-search/hero-search.component';
import { AppAuthnModule } from './/app-authn.module';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent,
    HeroDetailComponent,
    MessagesComponent,
    DashboardComponent,
    HeroSearchComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule,

    // The HttpClientInMemoryWebApiModule module intercepts HTTP requests
    // and returns simulated server responses.
    // Remove it when a real server is ready to receive requests.
    HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, {
      dataEncapsulation: false
    }),
    AppAuthnModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts
import { Component } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
import { JwksValidationHandler } from 'angular-oauth2-oidc';
import { authConfig } from './app-authn.config';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Tour of Heroes';
  constructor(private oauthService: OAuthService) {
    this.configureWithNewConfigApi();
  }

  private configureWithNewConfigApi() {
    this.oauthService.configure(authConfig);
    this.oauthService.tokenValidationHandler = new JwksValidationHandler();
    this.oauthService.loadDiscoveryDocumentAndTryLogin();
  }
}

app-authn.module.ts
import { Component } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
import { JwksValidationHandler } from 'angular-oauth2-oidc';
import { authConfig } from './app-authn.config';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Tour of Heroes';
  constructor(private oauthService: OAuthService) {
    this.configureWithNewConfigApi();
  }

  private configureWithNewConfigApi() {
    this.oauthService.configure(authConfig);
    this.oauthService.tokenValidationHandler = new JwksValidationHandler();
    this.oauthService.loadDiscoveryDocumentAndTryLogin();
  }
}


app-authn.config.ts
import { AuthConfig } from 'angular-oauth2-oidc';

export const authConfig: AuthConfig = {
  // Url of the Identity Provider
  issuer: 'https://steyer-identity-server.azurewebsites.net/identity',

  // URL of the SPA to redirect the user to after login
  redirectUri: window.location.origin + '/home',

  // The SPA's id. The SPA is registered with this id at the auth-server
  clientId: 'spa-demo',

  // set the scope for the permissions the client should request
  // The first three are defined by OIDC. The 4th is a usecase-specific one
  scope: 'openid profile email voucher',

  showDebugInformation: true

  // sessionChecksEnabled: false
};


home.component.ts
import { Component } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';

@Component({
  templateUrl: './home.component.html'
})
export class HomeComponent {
  constructor(private oauthService: OAuthService) {}

  public login() {
    this.oauthService.initImplicitFlow();
  }

  public logoff() {
    this.oauthService.logOut();
  }

  public get name() {
    const claims = this.oauthService.getIdentityClaims();
    if (!claims) {
      return null;
    }
    return claims;
  }
}


home.component.html
<h1 *ngIf="!name">
  Hallo
</h1>
<h1 *ngIf="name">
  Hallo, {{name}}
</h1>

<button class="btn btn-default" (click)="login()">
  Login
</button>
<button class="btn btn-default" (click)="logoff()">
  Logout
</button>

<div>
  Username/Passwort zum Testen: max/geheim
</div>


Each time I navigate to /home the following error occurs:
error loading discovery document {body: {…}, url: "https://steyer-identity-server.azurewebsites.net/identity/.well-known/openid-configuration", headers: HttpHeaders, status: 404, statusText: "Not Found"}

I can navigate fine to the URL. I am not sure if this is a TLS issue, CORS issue or a problem with the module itself. I do not believe it is a TLS issue since the cert that is served is trusted by the browser and nodejs. I do not believe it is a CORS issues since the author of the identity server would have setup the correct Cross Origin Support.  I am running on OSX 10.12.6
Any assistance is appreciated.

Closing comment (2019-04-10T14:12:00Z): The error posted before you contained these details:

has no exported member 'JwksValidionHandler'. Did you mean 'JwksValidationHandler'?

So it seems there was a typo (missing a "t" there). Same as #436.