sample fails at npm start: Angular 16 MSAL Angular v3 Sample: Cannot find module '@azure/msal-browser'

[billvolt]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

current

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

v3

Public or Confidential Client?

Public

Description

Sample "Angular 16 MSAL Angular v3 Sample" fails when used as instructed.

Error Message

C:\Users\myuser.mydomain\Documents\GitHub\microsoft-authentication-library-for-js\samples\msal-angular-v3-samples\angular16-sample-app>npm start

> angular16-sample-app@0.0.0 start
> ng serve

One or more browsers which are configured in the project's Browserslist configuration will be ignored as ES5 output is not supported by the Angular CLI.
Ignored browsers: kaios 2.5, op_mini all
√ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   4.16 MB |
polyfills.js          | polyfills     | 332.21 kB |
styles.css, styles.js | styles        | 313.61 kB |
main.js               | main          |  26.38 kB |
runtime.js            | runtime       |   6.54 kB |

                      | Initial Total |   4.82 MB

Build at: 2024-05-17T22:29:23.547Z - Hash: b1d81e0a4cc670f0 - Time: 18312ms

./src/app/app-routing.module.ts:2:0-48 - Error: Module not found: Error: Can't resolve '@azure/msal-angular' in 'C:\Users\myuser.mydomain\Documents\GitHub\microsoft-authentication-library-for-js\samples\msal-angular-v3-samples\angular16-sample-app\src\app'

./src/app/app-routing.module.ts:3:0-51 - Error: Module not found: Error: Can't resolve '@azure/msal-browser' in 'C:\Users\myuser.mydomain\Documents\GitHub\microsoft-authentication-library-for-js\samples\msal-angular-v3-samples\angular16-sample-app\src\app'

./src/app/app.component.ts:3:0-56 - Error: Module not found: Error: Can't resolve '@azure/msal-angular' in 'C:\Users\myuser.mydomain\Documents\GitHub\microsoft-authentication-library-for-js\samples\msal-angular-v3-samples\angular16-sample-app\src\app'

./src/app/app.component.ts:4:0-67 - Error: Module not found: Error: Can't resolve '@azure/msal-browser' in 'C:\Users\myuser.mydomain\Documents\GitHub\microsoft-authentication-library-for-js\samples\msal-angular-v3-samples\angular16-sample-app\src\app'

./src/app/app.module.ts:14:0-111 - Error: Module not found: Error: Can't resolve '@azure/msal-browser' in 'C:\Users\myuser.mydomain\Documents\GitHub\microsoft-authentication-library-for-js\samples\msal-angular-v3-samples\angular16-sample-app\src\app'

./src/app/app.module.ts:15:0-194 - Error: Module not found: Error: Can't resolve '@azure/msal-angular' in 'C:\Users\myuser.mydomain\Documents\GitHub\microsoft-authentication-library-for-js\samples\msal-angular-v3-samples\angular16-sample-app\src\app'

./src/app/home/home.component.ts:3:0-67 - Error: Module not found: Error: Can't resolve '@azure/msal-browser' in 'C:\Users\myuser.mydomain\Documents\GitHub\microsoft-authentication-library-for-js\samples\msal-angular-v3-samples\angular16-sample-app\src\app\home'

Error: src/app/app-routing.module.ts:3:27 - error TS2307: Cannot find module '@azure/msal-angular' or its corresponding type declarations.

3 import { MsalGuard } from '@azure/msal-angular';
                            ~~~~~~~~~~~~~~~~~~~~~


Error: src/app/app-routing.module.ts:4:30 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

4 import { BrowserUtils } from '@azure/msal-browser';
                               ~~~~~~~~~~~~~~~~~~~~~


Error: src/app/app.component.ts:2:94 - error TS2307: Cannot find module '@azure/msal-angular' or its corresponding type declarations.

2 import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration } from '@azure/msal-angular';
                                                                                               ~~~~~~~~~~~~~~~~~~~~~


Error: src/app/app.component.ts:3:113 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

3 import { AuthenticationResult, InteractionStatus, PopupRequest, RedirectRequest, EventMessage, EventType } from '@azure/msal-browser';
                                                                                                                  ~~~~~~~~~~~~~~~~~~~~~


Error: src/app/app.component.ts:20:13 - error NG2003: No suitable injection token for parameter 'authService' of class 'AppComponent'.
  Consider using the @Inject decorator to specify an injection token.

20     private authService: MsalService,
               ~~~~~~~~~~~

  src/app/app.component.ts:20:26
    20     private authService: MsalService,
                                ~~~~~~~~~~~
    This type does not have a value, so it cannot be used as injection token.


Error: src/app/app.module.ts:16:116 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

16 import { IPublicClientApplication, PublicClientApplication, InteractionType, BrowserCacheLocation, LogLevel } from '@azure/msal-browser';
                                                                                                                      ~~~~~~~~~~~~~~~~~~~~~


Error: src/app/app.module.ts:17:227 - error TS2307: Cannot find module '@azure/msal-angular' or its corresponding type declarations.

17 import { MsalGuard, MsalInterceptor, MsalBroadcastService, MsalInterceptorConfiguration, MsalModule, MsalService, MSAL_GUARD_CONFIG, MSAL_INSTANCE, MSAL_INTERCEPTOR_CONFIG, MsalGuardConfiguration, MsalRedirectComponent } from '@azure/msal-angular';
                                                                                                                                                                                                                                     ~~~~~~~~~~~~~~~~~~~~~


Error: src/app/app.module.ts:74:12 - error NG1010: Value

Error: src/app/home/home.component.ts:2:51 - error TS2307: Cannot find module '@azure/msal-angular' or its corresponding type declarations.

2 import { MsalBroadcastService, MsalService } from '@azure/msal-angular';
                                                    ~~~~~~~~~~~~~~~~~~~~~


Error: src/app/home/home.component.ts:3:82 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

3 import { AuthenticationResult, EventMessage, EventType, InteractionStatus } from '@azure/msal-browser';
                                                                                   ~~~~~~~~~~~~~~~~~~~~~


Error: src/app/home/home.component.ts:14:23 - error NG2003: No suitable injection token for parameter 'authService' of class 'HomeComponent'.
  Consider using the @Inject decorator to specify an injection token.

14   constructor(private authService: MsalService, private msalBroadcastService: MsalBroadcastService) { }
                         ~~~~~~~~~~~

  src/app/home/home.component.ts:14:36
    14   constructor(private authService: MsalService, private msalBroadcastService: MsalBroadcastService) { }
                                          ~~~~~~~~~~~
    This type does not have a value, so it cannot be used as injection token.




** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


× Failed to compile.

MSAL Logs

N/A

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

from app.module.ts:

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: 'e5e38fe1-a478-479e-9d77-5e47626e2af2',
      authority: 'https://fs.mydomain.com/adfs/',
      redirectUri: '/',
      postLogoutRedirectUri: '/'
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage
    },
    system: {
      allowNativeBroker: false, // Disables WAM Broker
      loggerOptions: {
        loggerCallback,
        logLevel: LogLevel.Info,
        piiLoggingEnabled: false
      }
    }
  });
}

Relevant Code Snippets

N/A

Reproduction Steps

1. download : https://github.com/AzureAD/microsoft-authentication-library-for-js
   to: C:\Users\myuser.mydomain\Documents\GitHub\microsoft-authentication-library-for-js

2. In folder: C:\Users\myuser.mydomain\Documents\GitHub\microsoft-authentication-library-for-js\samples\msal-angular-v3-samples\angular16-sample-app
   execute command: npm install @azure/msal-browser @azure/msal-angular@latest

3. Edit C:\Users\myuser.mydomain\Documents\GitHub\microsoft-authentication-library-for-js\samples\msal-angular-v3-samples\angular16-sample-app\src/app.modules.ts to hard-code Client ID and Authority

4. In folder C:\Users\myuser.mydomain\Documents\GitHub\microsoft-authentication-library-for-js\samples\msal-angular-v3-samples\angular16-sample-app
   execute command: npm start
   Build errors reported as detailed in "Error Message" box above.

Expected Behavior

Build should have completed without errors.

Identity Provider

ADFS

Browsers Affected (Select all that apply)

None (Server)

Regression

No response

Source

External (Customer)

[billvolt]

This sample instructs the user to complete msal-prerequisities. Neither the sample nor the msal-angular library instructions clearly state that the user must follow the build and test instructions for msal-browser library.

In addition, this sample makes use of @angular/material which can be installed per step 1 of can-not-find-module-angular-material to address errors such as the following:

./src/app/app.module.ts:5:0-59 - Error: Module not found: Error: Can't resolve '@angular/material/button' in 'C:\Users\myuser.mydomain\Documents\GitHub\microsoft-authentication-library-for-js\samples\msal-angular-v3-samples\angular16-sample-app\src\app'

[gliudsg]

you are right! the Readme is not clear enough