angulartypescriptazureazure-ad-msal

MSAL v3 Angular 16 samples apps give Error: Can't resolve '@azure/msal-angular'


I'm trying to get the MSAL 3 Angular tutorial working on my Mac OS but I'm getting the following error when doing a npm start for the sample app:

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

and

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

This doesn't surprise me as in the sample app's node_modules directory the '@azure/msal-angular' and '@azure/msal-browser' node_modules folder do not exist.

The source is being cloned from:

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

I initially tried to just do a npm install from the sample 'angular16-sample-app' but the '@azure/msal-angular' node_modules sub-folder didn't install.

I did a fresh clone from git, and tried npm install from the root directory (the whole repo is quite large with multiple workspaces ... running from root does in fact build the sample app's node_modules sub-directory but without the '@azure/msal-angular' and '@azure/msal-browser' modules similarly to if the install was done in the sample app directory.

There are no errors on the npm install processes, and I've previously gotten the MSAL v2 tutorials working no trouble.

What am I missing? Is there some linking step I'm missing?


Solution

  • Fixed it!

    In the tsconfig.json there was the following paths:

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

    Apart from there not being any @azure/msal-browser path, removing these paths removes the link to the root git repo links and installs the @azure/msal-* libraries in the project's node_modules' directory.