When using MSAL v3 with Angular 16, the sample apps are encountering an issue with resolving the import of '@azure/msal-angular'

I've encountered an issue while trying to set up the MSAL 3 Angular tutorial on my Mac OS. When I run npm start for the sample app, I receive the following error:

Error: Module not found: Error: Can't resolve '@azure/msal-angular'

and

Error: Module not found: Error: Can't resolve '@azure/msal-browser'

This error is not surprising to me, as the '@azure/msal-angular' and '@azure/msal-browser' node_modules folders do not exist in the sample app's node_modules directory.

The source code is cloned from:

https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev

Initially, I attempted to use npm install directly from the 'angular16-sample-app', but the '@azure/msal-angular' node_modules sub-folder was not installed.

After doing a fresh clone from git, I ran npm install from the root directory. The entire repository is quite large with multiple workspaces, and although running from the root did build the sample app's node_modules sub-directory, it still lacked the '@azure/msal-angular' and '@azure/msal-browser' modules, similar to installing from the sample app directory.

No errors were reported during the npm install processes, and I have successfully followed MSAL v2 tutorials before without any issues.

What could I be overlooking? Is there a linking step that I might have missed?

angulartypescriptazureazure-ad-msal

Answer №1

Issue resolved!

I found a solution in the tsconfig.json file where I made the following modifications to the paths:

"paths": {
  "@react/*": [
    "./node_modules/@react/*"
  ],
  "@azure/msal-react": [
    "../../../node_modules/@azure/msal-react/dist"
  ]
},

In addition to not having a @azure/msal-authentication path, deleting these lines removes any links to the main git repository and installs the @azure/msal-* libraries directly into the project's node_modules folder.

Answer №2

Unfortunately, I encountered difficulties when trying to install the libraries using npm. Despite following the instructions given, the libraries did not show up in the node_modules folder as expected.

Even after attempting to remove the paths entries in the tsconfig.json file as suggested in a previous response, my issue remained unresolved.

However, I found a workaround by compiling the libraries from their source code:

To begin, it is important not to delete the paths entries in the tsconfig.json file.

Navigate to lib\msal-common and run npm install followed by npm run build. Repeat this process for the directories lib\msal-browser and lib\msal-angular.

Check the directory dist within node_modules\@azure\msal-angular to ensure that it has been created. This directory is referenced in the tsconfig.json file.

Return to your sample directory, such as 

samples\msal-angular-v3-samples\angular-standalone-sample
, and execute npm start.

Fortunately for me, this approach worked successfully.

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

Angular 7 and MVC: A Perfect Pair

After working on developing an SSO App that utilizes C# and AngularJs, I am now embarking on adding a new project to my existing SSO app. For this new project, I intend to leverage Angular 7 instead. Could you please provide guidance on how to incorporat ...

c#angular

What would be the counterpart of setLocale in Yup for the zod library?

How can I set default custom error messages for Zod validation? If I want to use i18n for error messages in Yup, I would do the following: import { t } from "i18next"; import * as yup from "yup"; import "./i18next"; yup.setL ...

javascripttypescriptyupzod

TypeScript class for rendering images with .drawImage method

I've been attempting to create a kitten drawing in an HTML5 canvas using TypeScript and a class constructor, but I'm struggling with the process. In my code, I've added comments to show what I've tried based on my expected behavior vers ...

javascripthtmltypescript

Changing the Filename for the File to Upload in Angular 6

I am currently developing a School Software application using Angular6 and NodeJS for handling the API. One of the features I need to implement is saving students' images along with their registration numbers. To achieve this, I am utilizing ng2-file- ...

node.jsangularexpressmulterng2-file-upload

How can I retrieve data from a JSON object?

I am currently in the process of utilizing the Bing Isochrone Api. I have established my HTTP request in Angular using the HTTPClient. Below is an example of the dataset I receive back: { "authenticationResultCode": "ValidCredentials", "brandLogoUri": "ht ...

javascriptangular

Tailwind CSS styling appears to be malfunctioning in the production build of Next.js, despite functioning correctly in the

Despite following the proper build process with npm run build + npm run start, my Tailwind styling is not functioning correctly in the production build. Oddly enough, when I use npm run dev, the styling works as expected and my page displays with a purple ...

javascripttypescriptnext.jstailwind-css

Invalid JWT Authentication

I am currently working on implementing spring boot authentication with jwt and mongodb. I have been sending the Request Body using angular, and I also tried using postman. However, I encountered the following error: Unauthorized error: Failed to instanti ...

angularmongodbspring-bootjwt

In Ionic3, NgFor is designed to work with Iterables like Arrays for binding

Trying to convert an Ionic storage object into an array for better readability in an ion view. Encountering the error: NgFor only supports binding to Iterables such as Arrays. What is the best way to convert an object to an array? Do I need to use forEac ...

javascriptarraysangulartypescriptionic-framework

latest version of PrimeNG dropdown is 16.2

I am inquiring about how to implement virtual scrolling in a dropdown menu and connect the virtual scroll with an API backend. Specifically, I would like to know how to trigger an API call when the user reaches the end of the scroll, incrementing the page ...

angularprimeng

Include module A in module B, even though module A has already included module B's Angular

Currently, I am facing an issue with circular dependencies between two modules - User and Product. The User Module has already imported the Product Module to utilize the ProductListComponent. Now, I need to import/use the UserListComponent from the User Mo ...

angulartypescriptangular8

Tips on adding an external type to a global .d.ts file

In my TypeScript project, I am utilizing Moment.js for dealing with datetime objects. As part of this, I wish to create an object type that includes a key holding a value of type Moment. However, upon adding the following snippet to a global definition fi ...

typescriptmomentjstypescript2.0

Is it possible to create a map of functions that preserves parameter types? How can variadic tuple types in TypeScript v4 potentially enhance this

Initially, I faced a challenge when trying to implement a function similar to mapDispatchToProps in Redux. I struggled with handling an array of functions (action creators) as arguments, but managed to come up with a workaround that works, although it feel ...

typescript

What is the best way to transfer information within the same webpage?

https://i.sstatic.net/umfln.pnghttps://i.sstatic.net/9W6ZE.pngI'm just starting out with angular 2/4 projects and I have a popup search tab in the interface that displays an editable list. However, I am unsure about how to transfer data to the main i ...

angularangular2-templateangular4-formsangular4-router

Prisma: Incorrectly identifying existing items where the list contains any of the specified items

Within my Prisma model, I have a property designated to store a list of phone numbers in the format phones String[] @unique When making an API call with a model that may include one or more phone numbers, my goal is to locate any existing record where any ...

typescriptpostgresqlnext.jsprisma

Creating an object with a property in typescript

Recently, I made the switch from JavaScript to TypeScript and now I am in the process of converting a lot of my code. I used to frequently use this snippet in JavaScript (which has been converted to TypeScript): function isObject (payload: any): payload ...

javascripttypescriptobjectproperties

receiving list items in JSON format rather than XML or Atom

Upon typing the link of a list in my browser, I am able to view all the data in xml/atom format. The screenshot can be found below: https://i.sstatic.net/9jUKV.png In my search for converting this incoming response to JSON, I utilized the "RequestOptionsA ...

angularsharepoint

The program encountered a problem stating that the 'getItem' property is not found within the 'string' type

I am utilizing Firebase to register links on a website. I'm attempting to pass the uuid in order to create a sub collection, but have been unsuccessful. Any idea what might be causing this issue? constructor(private af: AngularFirestore) {} async add ...

angulartypescriptfirebase

Angular: failure to update a specific portion of the view

I'm currently working on a directive template that features the following code snippet: <div class="colorpicker"> <div>Chosen color</div> <div class="color_swatch" style="background-color: {{ngModel}}">&nbsp;</div> & ...

angularjstypescript

Autocomplete feature shows usernames while storing corresponding user IDs

I am looking to enhance the autocomplete functionality in my application while also ensuring that the selected user ID is stored in the database. Specifically, I want the autocomplete feature to display user names for selection purposes, but instead of re ...

angulartypescriptautocompleteangular-material

The object type in Typescript prohibits direct access to its properties

Currently, I am facing an issue while trying to define a variable with the Object type and initialize it with a property. When attempting to access that property, an error message 'Property ____ does not exist on type Object' is displayed. I have ...

angulartypescript