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

Guide to establishing intricate conditions for TypeORM insertion

When attempting to insert data based on a specific condition, such as if shopId = "shopA", I want to include the shopdetail. In order to achieve this, I have implemented the following business logic, which is somewhat complex. Is there a more ef ...

Leverage the geocode callback function results from Google Maps in NodeJS to render a map on the AngularJS 2 component template

Hey there, I'm currently utilizing the Google Maps Node.js client web API and want to showcase a map on my HTML views using AngularJS 2. I have a server export that sends an object to my AngularJS2 client service const googleMapsClient = require(&ap ...

Having trouble retrieving the "Text" from the "element" with the help of "Protractor"

Greetings! I am currently in the process of creating Protractor automation scripts for an "Angular 4" application. Below is the code from my development: <!--Byndd Title div--> <div class="ui-g-12 ui-md-8 ui-lg-10"> ...

Utilize a variable from one Angular component in another by sharing it between .ts files

My issue involves dynamically adding items to a todo list and wanting to exclude certain items. The challenge lies in the fact that the list itself is located outside of the task component: Within the task.component.html file, I iterate through the list f ...

Creating a function within a module that takes in a relative file path in NodeJs

Currently, I am working on creating a function similar to NodeJS require. With this function, you can call require("./your-file") and the file ./your-file will be understood as a sibling of the calling module, eliminating the need to specify the full path. ...

Comparison of env.local and String variables

I encountered an access denied error with Firebase. The issue seems to arise when I try passing the value of the "project_ID" using an environment variable in the backend's "configs.ts" file, as shown in the code snippet below: import 'firebase/f ...

Assignment on Ionic's Cascading Style Sheets classes

As I work on styling my app, I find myself struggling with the extra CSS classes that are added when I preview the source in a running app. It's particularly confusing when all I want to do is change the menu header background. In my app.html file, I ...

Discover the process of translating words within app.routing.module.ts in Angular

Having some trouble with my Angular routing module and ngx-translate languages. I'm trying to retrieve words from the languages in this module, but the code I've attempted isn't working: import { NgModule } from '@angular/core'; im ...

Provider in Angular2 that relies on multiple other Providers

Within my Angular2 application, I have various modules that offer Services and Configuration. Now, I want to integrate the @ngrx/store, which gathers reducers from all my modules. Below is the bootstrap code snippet: import {OpaqueToken} from 'angu ...

What is the best way to retrieve the 5 most recent posts for each genre using Laravel's API

In the process of developing an application (which is my academic project), I am utilizing Laravel 5.4 as my API combined with Angular 5. The focus of my project revolves around a music blog, necessitating specific features like categories and subcategorie ...

Firebase/Angular: authentication user not detected

After going through all the discussions on this issue, I am still unable to implement the solutions in my setup. In my Firebase database, I have the following nodes: I have connected a service to a simple reactive form for user registration: export class ...

An issue arises in Slate.js when attempting to insert a new node within a specified region, triggering an error

A relevant code snippet: <Slate editor={editor} value={value} onChange={value => { setValue(value); const { selection } = editor; // if nothing is currently selected under the cursor if (select ...

Is there a way to have one app.component.ts file populate multiple selectors?

Having trouble using two selectors on an angular 8 website. The HTML includes: <jk-header></jk-header> some html <jk-main-content></jk-main-content> Here is the app.component.ts code snippet: import { Component, OnInit } from &ap ...

Setting a maximum value for an input type date can be achieved by using the attribute max="variable value"

Having trouble setting the current date as the "max" attribute value of an input field, even though I can retrieve the value in the console. Can anyone provide guidance on how to populate the input field with the current date (i.e max="2018-08-21")? var ...

What is the best way to assign a value to a class variable within a method by referencing the 'this' keyword?

Is there a way to set the state of this Ionic react app when displaying the outcome of a reset service? I am facing challenges with using this.setState({resetSuccess}) within a method due to scope issues. (Details provided in comments) Here is the relevan ...

Can you explain the distinction between an optional field and a union?

Is there a significant distinction between the following structures: { ok: boolean; } | { ok: boolean; error: any; } and: { ok: boolean; error?: any; } I have observed variance in the inferred types of frontend methods' return ou ...

Having trouble with installing npm package from gitlab registry

I recently uploaded my npm package to the GitLab package registry. While the upload seemed successful, I am facing an issue trying to install the package in another project. When I run npm install, I encounter the following error: PS E:\faq\medu ...

Issue with Angular uploading a file and sending it as a POST request causing errors

I am currently working on an HTML form that allows users to upload files from the front-end to the back-end and perform various operations on them: <button mat-raised-button color="primary" type="button" style='margin-right:20px ...

TimeStamp Recorder - Typescript

I'm trying to create a timer that counts the time when a button is pressed. Currently, I have managed to display the minutes and seconds on the screen as soon as the button is clicked. For example: 21(min):02(sec) What I am struggling with is updati ...

Issue with Angular FormControl/FormBuilder not selecting options in Select dropdown

I am creating a form to edit some items and include a Select element with options loaded from a database. However, even though I set up the name and description correctly using formBuilder/control in the component, the correct "category" is not being selec ...