Import Msal.js into an Angular Prj #341

New Issue

fergalmoran · 2025-08-09T17:15:55Z

fergalmoran commented

2025-08-09 17:15:55 +00:00

Originally created by @spottedmahn on 10/27/2017

How do I go about adding Msal.js to an Angular project?

I've add it to package.json: "msal": "^0.1.2"

I've update webpack.config.vendor.js

const treeShakableModules = [
    ...
    'msal'
];

I see the msal code in vendor.js but when I try to use it in a component I get

AppComponent.ngfactory.js:12 ERROR ReferenceError: Msal is not defined
at new AuthenticationService (authentication.service.ts:14)

authentication.service.ts

import { Injectable } from '@angular/core';
import 'msal';

import { environment } from '../environments/environment';

@Injectable()
export class AuthenticationService {
    private authority = `https://login.microsoftonline.com/tfp/${environment.tenant}/${environment.signUpSignInPolicy}`;

    private clientApplication: Msal.UserAgentApplication;

    constructor() {
        this.clientApplication =
            new Msal.UserAgentApplication(
                environment.clientID,
                this.authority,
                this.authCallback,
                {
                    redirectUri: window.location.origin
                });
    }
...

Full source code here

*Originally created by @spottedmahn on 10/27/2017* How do I go about adding [Msal.js](https://github.com/AzureAD/microsoft-authentication-library-for-js) to an Angular project? I've add it to package.json: `"msal": "^0.1.2"` I've update webpack.config.vendor.js ```js const treeShakableModules = [ ... 'msal' ]; ``` I see the msal code in `vendor.js` but when I try to use it in a component I get >AppComponent.ngfactory.js:12 ERROR ReferenceError: Msal is not defined at new AuthenticationService (authentication.service.ts:14) **authentication.service.ts** ```js import { Injectable } from '@angular/core'; import 'msal'; import { environment } from '../environments/environment'; @Injectable() export class AuthenticationService { private authority = `https://login.microsoftonline.com/tfp/${environment.tenant}/${environment.signUpSignInPolicy}`; private clientApplication: Msal.UserAgentApplication; constructor() { this.clientApplication = new Msal.UserAgentApplication( environment.clientID, this.authority, this.authCallback, { redirectUri: window.location.origin }); } ... ``` [Full source code here](https://github.com/spottedmahn/NetCoreAngularAzureB2CMsal/tree/dev/msal)

fergalmoran closed this issue

2025-08-09 17:15:55 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#341