Error: The StsConfigLoader provider is not found! MSAL angular

I am currently using Auth0 to manage users in my Angular application, but I want to switch to Azure Identity by utilizing @azure/msal-angular. To make this change, I removed the AuthModule from my app.module and replaced it with MsalModule. However, I encountered the following error:

main.ts:11 ERROR NullInjectorError: R3InjectorError(AppModule)[ApplicationInitStatus -> InjectionToken Application Initializer -> [object Object] -> AppConfigService -> OidcSecurityService -> CheckAuthService -> PeriodicallyTokenCheckService -> ConfigurationService -> StsConfigLoader -> StsConfigLoader -> StsConfigLoader]: 

Error: No provider for StsConfigLoader!

This is how I updated my code:

MsalModule.forRoot(
        new PublicClientApplication({
          auth: {
            clientId: "myclientId",
            authority:
              "myAuthority",
            redirectUri: "https://localhost:*PORT*/", 
          },
          cache: {
            cacheLocation: "localStorage",
            storeAuthStateInCookie: isIE,
          },
        }),
        null,
        null
      ),

Answer №1

To ensure functionality, I included the auth module in my imports. For a detailed example on how to do this, refer to: auth0-angular/examples

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Does adding a callback to object.ngOnDestroy() replace its internal onDestroy() method?

I'm enhancing the drag and drop feature in Angular <div cdkDropList appImprovedDropList> <div cdkDrag>item 1</div> <div cdkDrag>item 2</div> <div cdkDrag>item 3</div> </div> The directive appImpro ...

Creating dynamic dxi-column with different data types in dxDataGrid

Our team is currently working on an angular application that involves displaying records in a dxdatagrid. The challenge we are facing includes: Different schema each time, with data coming from various tables. The need to add/edit records. Displayi ...

I am unable to enter any text in an angular modal

Currently, I am facing an issue where I am unable to click on the search input field within a modal. The goal is to implement a search functionality in a table displayed inside a modal window. The idea is to have a list of hospitals where users can view d ...

What is causing the issue of URL parameters becoming undefined when performing service injection in the app component?

When working with a service that reads parameters from the URL, everything seems to be functioning properly until attempting to inject the service into the constructor of the app.component.ts file or trying to call a service method from the app.component.t ...

Unable to navigate beyond the boundaries of an app

I am currently facing an issue with my authentication service where it redirects to the identity server in case of certain errors. I attempted to achieve this using window.location.href = environment.authCodeFlowIssuer;, however, an error occurred: Ref ...

Avoiding the restriction of narrowing generic types when employing literals with currying in TypeScript

Trying to design types for Sanctuary (js library focused on functional programming) has posed a challenge. The goal is to define an Ord type that represents any value with a natural order. In essence, an Ord can be: A built-in primitive type: number, str ...

The BooleanField component in V4 no longer supports the use of Mui Icons

In my React-Admin v3 project, I had a functional component that looked like this: import ClearIcon from '@mui/icons-material/Clear' import DoneIcon from '@mui/icons-material/Done' import get from 'lodash/get' import { BooleanF ...

What causes the lack of impact on lambda rendering speed despite integrating webpack?

Hey there, I've been working on implementing webpack for a project that involves microservices, Node.js, TypeScript, AWS, and AWS SAM. My main objectives are: Reduce the cold start time of lambda functions. Minimize security vulnerabilities by e ...

Ensuring correct association of values to avoid redundancies

There are 5 fields available for users to fill out on this form: Leave Code, From Date, Input Time1, To Date, and Input Time2. These variables are declared as a dates object in the .ts file, as shown below. interface Supervisor { name: string; code: s ...

Juggling numerous FABs

After reviewing the Angular Material2 Spec, it is evident that they provide clear instructions on where to position the FAB. However, I am encountering difficulties in implementing it. Within my project, I have included md-sidenav in the root component (a ...

The most suitable TypeScript type for a screen being utilized again in react-navigation v5

When it comes to typing screens under react-navigation v5, I usually follow a simple pattern: // Params definition type RouteParamsList = { Screen1: { paramA: number } Screen2: undefined } // Screen1 type Props = StackScreenProps<R ...

TypeScript causing issues when multiple selectors are used

Currently, I have a function that allows me to search for HTML elements based on text content: function findElementsByText(text: string): HTMLElement[] { const selectors = 'button' // This conditional statement ensures that an empty text quer ...

Error message: The value of ngIf has been altered after it has been checked

I am encountering the ngIf value changed error in my code and I'm unsure of the correct solution. Below is the HTML snippet causing the issue: <div *ngIf="currentVlaue"> <div class="section-body"> <div cla ...

Transformation of Ionic 2 ScreenOrientation Plugin

Can someone assist me with this issue? A while back, my Ionic 2 app was functioning correctly using the ScreenOrientation Cordova plugin and the following code: window.addEventListener('orientationchange', ()=>{ console.info('DEVICE OR ...

Local font not applying styles in Tailwind CSS

I integrated the Gilroy font into my application, but I am facing issues with tailwindcss not being able to style the text properly. The font appears too thin in all elements such as paragraphs and headers. Here is the file structure for reference: https: ...

Can the Date class be expanded by overloading the constructor method?

In my dataset, there are dates in different formats that Typescript doesn't recognize. To address this issue, I developed a "safeDateParse" function to handle extended conversions and modified the Date.parse() method accordingly. /** Custom overload ...

Enhancing code completion with IntelliSense for customized styled components' themes

When using a theme in styled components, I am attempting to enable IntelliSense. In my code snippet below (index.tsx), I utilize ThemeProvider: import React from 'react'; import ReactDOM from 'react-dom/client'; import { ThemeProvider } ...

Issue with mediaRecorder.ondataavailable in Angular 4 - need a solution

Currently, I am attempting to transmit real-time streaming data from an Angular 4 application to a NodeJS server. To achieve this, I have implemented the usage of socket.io and webRtc for streaming. constructor(private _chatService: ChatService) {} ngOnI ...

Troubleshooting Cross-Origin Resource Sharing (CORS) in a Spring Boot application:

We are currently working on a project that involves developing a spring boot and angularjs application. The authentication process includes the use of JWT token in combination with LDAP authentication. Once the LDAP authentication is successful, the servic ...

It appears that Typescript mistakenly interprets a class or type as a value, indicating that "'Classname' is being referred to as a value but used as a type here."

I want to pass an Object of a React.Component as "this" to a Child React.Component in the following way: component 1 file: class Comp1 extends React.Component<...,...> { ... render() { return (<Comp2 comp1={this}/> ...