'How do I fix "error can't find name 'OktaAuthService' "?

I want to get the authentication into an Angular application with Okta, I followed the instuctions step by step in the documentation : https://developer.okta.com/code/angular/okta_angular_sign-in_widget/ But I get an error when I try to start the server, Can you help me please ?

export class AppComponent {
 title = 'okta';
  isAuthenticated: boolean;

    constructor(public oktaAuth: OktaAuthService, public router: Router) {
        // Subscribe to authentication state changes
        this.oktaAuth.$authenticationState.subscribe(
            (isAuthenticated: boolean)  => this.isAuthenticated = isAuthenticated
        );
    }

    async ngOnInit() {
        // Get the authentication state for immediate use
        this.isAuthenticated = await this.oktaAuth.isAuthenticated();
    }

! console error

console error



Solution 1:[1]

Make sure you add the appropriate import to the service you're trying to inject. Even if the Okta module is imported in you module ts file, you still have to import the service into the component. You also have to import the Router in order to inject it (there is an error in the screenshot).

import { Router } from '@angular/router';
import { OktaAuthService } from '@okta/okta-angular';

https://angular.io/tutorial/toh-pt4#update-heroescomponent

Solution 2:[2]

The problem was a confliction of versions between angular and Okta; Just downgraded Okta version like this:

"@okta/okta-angular": "^3.2.2", "@okta/okta-signin-widget": "^5.10.1",

After replacing the two version you can use npm install to adapt them in your project

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Babacar Ly