@azure/msal-angular works with Angular 17 #6719

muhamedkarajic · 2023-11-23T19:55:52Z

Core Library

MSAL.js (@azure/msal-browser)

Wrapper Library

MSAL Angular (@azure/msal-angular)

Public or Confidential Client?

Public

Description

Please update it to angular 17, I noticed that the current version dosent work with esmodule builder.

Source

External (Customer)

mlz11 · 2023-11-27T09:06:16Z

We are waiting for an answer on the following issue 🥶

#6691

nimbusparis · 2023-12-12T15:10:04Z

When the update will be available? Angular 17 was released on 6 of November, it's not acceptable that a component like MSAL is not updated at release time and therefore 1 month after!

EmLauber · 2023-12-14T00:56:47Z

I don't have a timeline yet for Angular 17 support, but we are tracking and aware of it. Thank you for expressing your interest.

mrivero2020 · 2023-12-18T01:09:56Z

To those updating @azure/msal-angular: Can you explain the typical timeline for updates to this package? Is it that the team must wait for Angular to release a version for the team to start upgrading @azure/msal-angular to catch up to Angular? It is fine if that is the case, but we need to know for planning purposes. It seems to me that this package is upgraded "months" after Angular releases a new version and knowing that on average this product will lag "x number of months" will help those of us depending on this component to plan and provide correct ETAs to our stakeholders.

talgershman · 2023-12-26T08:44:31Z

alot of project will need to updage to Angular 17, as it is a major update to framework. (improves so much things that developers are waiting for years).
Please don't block us from upgrading and put in the near road map, i don't think it will be a major update from your end as most of the changes are related to change detection.

muhamedkarajic · 2024-01-10T17:14:56Z

Any updates on this? I see today we have a 3.0.10 but it dosent seem documentation is updated it says still v15 and v16. What makes angular 17 so hard to update?

EmLauber · 2024-01-11T01:22:56Z

I appreciate people adding more details on why this is important to their project. I have no new updates. We are aware and have this work in our backlog. To add more context, each major framework version requires evaluating the changes and balancing whether those are backwards compatible for MSAL versions or require our own major version bump. That is why we as the MSAL maintainers can't always predict how much time it takes to add the latest framework support.

JaimeStill · 2024-01-13T01:22:55Z

In case it's helpful to anyone, I spent a bit of time working to get msal-angular working with Angular 17 before finding this issue. I captured my notes in the readme of my angular-identity-spa repository.

I'm certain that once these kinks are ironed out in migrating to Angular 17, this will be a very clean integration. A big thanks to the MSAL.js team for all of the work that's gone into supporting so many different platforms, and particularly keeping Angular in the mix.

OWS-thinhpv · 2024-01-17T04:46:12Z

I need @azure/msal-... for v17, because according to the appropriate roadmap, I hope @azure/msal-... will make a plan to update v17 for all devs around the world.

smg-bg · 2024-01-27T18:41:42Z

Any roadmap / ETA will greatly help our internal release cadance 🔢

KarolZirex · 2024-01-28T11:00:37Z

Is it a joke that Microsoft has not yet supported Angular 17 after three months?

umberto-titola · 2024-01-30T08:08:19Z

It's working for me with Angular 17. I don't understand what the problem is.
this is my configuration.. I added the redirect inside the initializer it works fine, I put the token in the api.. I don't understand.
What's the problem, maybe I missed something? It seems to work very well to me

  bootstrapApplication(AppComponent,
    {
      providers: [
        provideHttpClient(withInterceptorsFromDi()),
        provideRouter(routes),

        {
          provide: HTTP_INTERCEPTORS,
          useClass: MsalInterceptor,
          multi: true
        },
        {
          provide: MSAL_INSTANCE,
          useFactory: () => MSALInstanceFactory(<MsalConfig>config)
        },
        {
          provide: MSAL_GUARD_CONFIG,
          useFactory: MSALGuardConfigFactory
        },
        {
          provide: MSAL_INTERCEPTOR_CONFIG,
          useFactory: () => MSALInterceptorConfigFactory(<BackendResourcesType>config?.backendResources),
        },
        MsalService,
        MsalGuard,
        MsalBroadcastService,
        {
          provide: APP_INITIALIZER,
          useFactory:app_init,
          multi: true,
          deps: [MsalService,AppService],
        },
        provideAnimations()
      ]
    },
  )

this is my package,json

 "@angular/animations": "^17.0.0",
    "@angular/cdk": "^17.1.0",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/forms": "^17.0.0",
    "@angular/material": "^17.1.0",
    "@angular/material-moment-adapter": "^17.1.1",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/router": "^17.0.0",
    "@azure/msal-angular": "^3.0.9",
    "@azure/msal-browser": "^3.6.0",
    "@azure/web-pubsub-client": "^1.0.0-beta.3",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports":true,
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": false,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

smg-bg · 2024-02-03T16:13:03Z

@umberto-titola Actually it seems to work for 17.0, but not 17.1. I sitll don't understandand, but I'm not an expert, why...

wy193777 · 2024-02-07T02:23:21Z

I made it work on 17.1. Basically is Subscribing to handleRedirectObservablemanually.

In your app.component.ts,

import { Component, OnInit } from '@angular/core';
import { MsalBroadcastService, MsalService } from '@azure/msal-angular';
import { AuthenticationResult } from '@azure/msal-browser';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  account: WritableSignal<AccountInfo | null> =  #signal(null);

  constructor(private authService: MsalService) { }

  ngOnInit(): void {
    this.authService.handleRedirectObservable().subscribe({
      next: (result: AuthenticationResult) => {
        // Perform actions related to user accounts here
        console.log('Redirect success', result);
            this.account.set(this.authService.instance.getActiveAccount());
            this.cdr.detectChanges();
      },
      error: (error) => console.log(error)
    });
  }

}

Basically I copied lots of code from @JaimeStill 's repo but substitute the part that using this.msalBroadcastService.inProgress$.pipe().subscribe() to handleRedirectObservable.

In case it's helpful to anyone, I spent a bit of time working to get msal-angular working with Angular 17 before finding this issue. I captured my notes in the readme of my angular-identity-spa repository.

I'm certain that once these kinks are ironed out in migrating to Angular 17, this will be a very clean integration. A big thanks to the MSAL.js team for all of the work that's gone into supporting so many different platforms, and particularly keeping Angular in the mix.

My project is still in the very beginning phase so I'm not sure what other difficulties will appear.

umberto-titola · 2024-02-07T08:47:01Z

I made it work on 17.1. Basically is Subscribing to handleRedirectObservablemanually.

In your app.component.ts,
import { Component, OnInit } from '@angular/core';
import { MsalBroadcastService, MsalService } from '@azure/msal-angular';
import { AuthenticationResult } from '@azure/msal-browser';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  account: WritableSignal<AccountInfo | null> =  #signal(null);

  constructor(private authService: MsalService) { }

  ngOnInit(): void {
    this.authService.handleRedirectObservable().subscribe({
      next: (result: AuthenticationResult) => {
        // Perform actions related to user accounts here
        console.log('Redirect success', result);
            this.account.set(this.authService.instance.getActiveAccount());
            this.cdr.detectChanges();
      },
      error: (error) => console.log(error)
    });
  }

}
Basically I copied lots of code from @JaimeStill 's repo but substitute the part that using this.msalBroadcastService.inProgress$.pipe().subscribe() to handleRedirectObservable.

In case it's helpful to anyone, I spent a bit of time working to get msal-angular working with Angular 17 before finding this issue. I captured my notes in the readme of my angular-identity-spa repository.
I'm certain that once these kinks are ironed out in migrating to Angular 17, this will be a very clean integration. A big thanks to the MSAL.js team for all of the work that's gone into supporting so many different platforms, and particularly keeping Angular in the mix.

My project is still in the very beginning phase so I'm not sure what other difficulties will appear.

I'm doing it inside app initializer to do it before I get to bootstrap the app.component

Erbenos · 2024-02-09T14:35:38Z

I have had an issue when the MsalInterceptor has been swallowing and "hanging" (they weren't even fired) requests made via HttpClient during app initialization (aka.: procedures registered via APP_INITIALIZER). Had to subscribe to authService.handleRedirectObservable() too, upon which the Interceptor let the requests through.

timothytavarez · 2024-02-11T13:48:50Z

msal-angular is now one major release and two minor versions behind the product it should be supporting.

Angular 17 was released 95 days ago on 2023-11-08. Angular 17.2 is being released this week. I cannot upgrade our applications despite every dependency screaming at me to resolve issues because msal-angular is blocking us.

The maintainers behind msal-angular are obviously not resourced appropriately to support this product. Every time I discuss authentication issues with other CTOs, I now have to qualify my statements regarding Microsoft Entra / B2C.

hashpyrit · 2024-04-04T18:17:42Z

I have 3 quite large projects all stalled waiting for this to be released and its starting to hurt these clients. We are well down the path of Angular 17 so we can't unscramble that egg now. We are going to have to look at other options if its not fixed soon. Other than Auth0 is there anything else we can potentially switch to? Our major client project has a hard no on okta so am unsure of where to turn next.

You can still use Azure AD/Entra authentication without using MSAL libraries. I recently removed my dependency on msal-angular and replaced it with a generic angular oauth library (angular-oauth2-oidc). It was relatively straightforward to do and works perfectly fine with Azure.

EmLauber · 2024-04-04T22:18:30Z

Thanks everyone for your feedback and patience. Our engineer has been diligently working on adding the Angular 17 support, but we've run into a number of issues. Angular 17's new build system includes integrated server-side rendering and prerendering capabilities. As a library meant for single page applications running in a browser, MSAL Angular uses browser-only objects and is not designed to acquire tokens server-side, and has only minimally supported Angular Universal in the past. We have been working on ways around this issue. The standalone sample in particular is proving difficult. Because I know this has been an ongoing issue for the community for a while, we have a few options we are evaluating. We can release support earlier for the regular Angular sample but no standalone sample support. Or we can release later as our engineer continues to investigate the standalone and sever-side rendering issue. Even with more time, we may find that MSAL Angular is incompatible with the SSR capabilities of Angular for a standalone model. I'm inclined for the earlier release option but I am open to feedback from the community that the standalone model & SSR support is worth waiting for.

Core121 · 2024-04-04T22:53:19Z

Definitely on the side of releasing as soon as possible and worrying about all scenarios at a later date. I think delaying much longer will force most to migrate to another library and further give distrust to the reliability of support.

scotthutchison · 2024-04-04T23:06:46Z

I also selfishly agree with @Core121 - our hand is being forced and there is some serious questions being raised on our 3 projects by clients. I don't fully understand the challenge but I would think it represents a fairly small percentage of the user base? @EmLauber what's your estimated time frame on both scenarios - just roughly as that may put it into a bit clearer context.

talgershman · 2024-04-05T06:07:43Z

Hi @EmLauber ,first thank you for the feedback.
I think all the UI frameworks are heading to SSR and and hydration solutions, maybe the solution here would be to make another MSAL lib that is detected for SSR.
this way you don't need to make all the updates backwards compatible which will make it easier for you the maintain.

For now, I think the best option is to release what works good with the limitations, but keep working on the resolving the limitations.

Just to be clear the only limitation is SSR ?
does single page standalone work ?

again thx for the help.

rperissa · 2024-04-05T08:19:46Z

Hello,
in our case too for the moment SSR and standalone components are not an issue. For now I believe that there is a very small number of large projects ready to, or already using, SSR/standalone components. I agree with the others that underlined the priority and the need for a release of a working version for Angular 17 for reliability issues.
Thanks for the hard work of your engineer.

AlmajaA · 2024-04-05T09:41:48Z

Hi @EmLauber ,first thank you for the feedback. I think all the UI frameworks are heading to SSR and and hydration solutions, maybe the solution here would be to care another MSAL lib that is detected for SSR. this way you don't need to make all the updates backwards compatible which will make it easier for you the maintain.

For now, I think the best option is to release what works good with the limitations, but keep working on the resolving the limitations.

Just to be clear the only limitation is SSR ? does single page standalone work ?

again thx for the help.

Totally Agree with this approach; At least until you can invest more time in solving both functionalities. There are many Projects which needs Angular 17 support as soon as possible (most of them probably using regular SPA functionality).

It is not so straightforward swapping for an alternative such as angular-oauth2-oidc library since MSAL deals with many configurations itself which requires dirty patches / code in any other library...

Appreciate much you time in maintaining and evolving such great Project!

Flywheel · 2024-04-05T14:06:55Z

we may find that MSAL Angular is incompatible with the SSR capabilities of Angular for a standalone model

The final answer on this will be critical for greenfield projects intent on leveraging the benefits of SSR with standalone components.

Viltersten · 2024-04-07T11:24:02Z

With Angular 18 around the corner... will MSAL 3.x support it?

I'm a bit biased so the actual reality may be less dark than my fear (and I'm presuming to a certain extent, due to sad experience). Please take my statement as a prediction (that I gladly be proven wrong on).

I suspect that MSAL 3.x will not work for any Angular version from 17 and up due to changes in the Angular core set up. There's a reason why the original MSAL 1.x had to be re-released as 2.x/3.x and if you study the compatibility table, those version seem to correlate with major changes of default Angular project structure. I believe we're at such a stage right now: Angular 17 provides new syntax and, most importantly, new strategy of dependency injection (the service itself, not the module, governs DI now).

That breaking change has not been addressed and MSAL didn't have any developers actively working on it. That's the reason why we have the current challenge. It's said that someone (single, one) has been assigned and it seems to me overly optimistic to rely on the promised ETA of 2024Q1.

The realistic scenario I'm expecting for is that MSAL will be upgraded to version 4.0 at some point prior to Angular 18 being released at the end of May. I suspect that's the plan of the development "team" and Ng17 will be one of those sad stories teaching us the importance of proactivity. By that, they gain 6 more weeks of development time and we can consider the even versions to be the LTS version.

Viltersten · 2024-04-07T11:29:13Z

Auth0 was my pick too - it's a paid service so you can actually rely on the support. It is a good system too and has well documented Angular and .NET integrations that are pretty simple. My major client has quite some negative history with Okta and they gave me a very hard NO.

Please correct me if I'm mistaken but I believe that Auth0 is now Okta, as they acquired it a while back. Perhaps it's still run as a autonomous software but with time, there's a risk of the merge to be complete and you may land into a tricky situation with your Okta aversed clients.

Viltersten · 2024-04-07T11:44:17Z

...Angular 17's new build system includes integrated server-side rendering and prerendering capabilities. ...The standalone sample in particular is proving difficult. ...We can release support earlier for the regular Angular sample but no standalone sample support. Or we can release later as our engineer continues to investigate the standalone and sever-side rendering issue.

It's positive that we've recognized the challenge points. With full respect to the efforts of others, I'd like to share my take on it.

One of the major improvements (if not the most important one) in Angular 17+ is the standalone option. If support for it isn't included, there's really no point releasing an update. Those who desperately wait for MSAL 4.0 are stuck on the new syntax and can't go back on it (otherwise, they'd do like us, switch to Angular 16 for now). An update without support for it won't do any good in practical terms and I think we all agree that nobody gains of creating a false impression that something's being improved.

As for the SSR, I dare not to pass any opinion because we're not affected by it. Angular being an SPA rhymes poorly with SSR. However, I lack experience with SSR of Angular and can't say how many that desire it. Probably less than those who went with standalone (as it's a great new feature and the main reason to go for 17 and up).

Can we establish that Angular 18 (out by 20th of May) will be supported by MSAL 4.0?

BrianMikinski · 2024-04-08T15:00:48Z

Thanks everyone for your feedback and patience. Our engineer has been diligently working on adding the Angular 17 support, but we've run into a number of issues. Angular 17's new build system includes integrated server-side rendering and prerendering capabilities. As a library meant for single page applications running in a browser, MSAL Angular uses browser-only objects and is not designed to acquire tokens server-side, and has only minimally supported Angular Universal in the past. We have been working on ways around this issue. The standalone sample in particular is proving difficult. Because I know this has been an ongoing issue for the community for a while, we have a few options we are evaluating. We can release support earlier for the regular Angular sample but no standalone sample support. Or we can release later as our engineer continues to investigate the standalone and sever-side rendering issue. Even with more time, we may find that MSAL Angular is incompatible with the SSR capabilities of Angular for a standalone model. I'm inclined for the earlier release option but I am open to feedback from the community that the standalone model & SSR support is worth waiting for.

From what I can tell from tutorials available online and Angular samples in the community, Stand Alone Angular components are becoming more common but SSR seems like it still has very low adoption and may not even be useful to many Angular applications. Releasing early with Stand Alone Angular components will unblock the majority of use cases and give the MSAL team time to better understand if SSR is even possible with Angular 17+.

danobri · 2024-04-09T15:30:51Z

I'd like to add another vote for releasing without support for SSR. Not only is SSR not a popular feature, it's not a functional one. Any application that functions with SSR can function without it. The same can not be said of authentication.

BobFleischman · 2024-04-09T19:55:18Z

We all need time to get used to the Stand Alone components but we cannot even get started without Authentication. SSR support is not a high priority for us. Using the latest Angular tech for UI is.

JaimeStill · 2024-04-09T20:07:06Z

Concur with those saying SSR is not a priority. Supporting standalone components and the new esbuild-based build system would be an ideal goal for truly supporting Angular 17+.

I also want to apologize in the event I invalidated anyone’s frustrations with this release cycle. Microsoft should for sure have resources allocated to ensuring timely support, particularly around such a critical component.

EmLauber · 2024-04-10T01:09:34Z

Thanks everyone for the feedback! My takeaways are 1) general Angular 17 support for auth is critical and worth releasing for basic scenarios earlier even if some scenarios are not supported 2) standalone support is more important than SSR.

With this feedback on priority, we will release a minor version with the Angular 17 support after the remaining errors in standalone sample without SSR are resolved. I don't believe it will make it into our release planned for this week, but we will do an out-of-band release as soon as the issues are resolved and the PR is merged.

EmLauber · 2024-04-10T01:16:34Z

As for some of the other comments:

Angular 18: yes we are aware Angular 18 releases next month. Our engineer will look at the Angular 18 preview after resolving the Angular 17 issues. I can't comment yet on timeline as we haven't evaluated yet the differences in Angular 18 and its impact.
We have not said anything about a major version bump to v4. Sometimes framework support does require major version bumps, but we also have added new version support via minor versions or released major versions unrelated to any framework changes. Please do not create that association. There are many factors that go into our major version releases, framework support is just one factor.

EmLauber · 2024-04-12T00:08:04Z

We were able to add the Angular 17 support for today's release! The MSAL Angular ReadMe is updated and includes a sample of MSAL Angular working with an Angular 17 standalone sample https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v3-samples/angular17-standalone-sample.

There are still gaps such as the server-side rendering. My hope though is this is enough to unblock a majority of your scenarios while we continue to work on the edge cases. Please do continue to provide feedback or any bug reports in this latest release.

BuZZ-dEE · 2024-04-12T19:45:48Z

We were able to add the Angular 17 support for today's release! The MSAL Angular ReadMe is updated and includes a sample of MSAL Angular working with an Angular 17 standalone sample https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v3-samples/angular17-standalone-sample.

There are still gaps such as the server-side rendering. My hope though is this is enough to unblock a majority of your scenarios while we continue to work on the edge cases. Please do continue to provide feedback or any bug reports in this latest release.

I can not run the example. I get errors like this.:

 I  ~/W/microsoft-authentication-library-for-js   dev *  lib/msal-angular  npm i                                               Fr 12 Apr 2024 21:32:36 CEST

up to date, audited 5281 packages in 27s

502 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
 I  ~/W/microsoft-authentication-library-for-js   dev *  lib/msal-angular  ls                                          27.4s  Fr 12 Apr 2024 21:33:21 CEST
angular.json    CHANGELOG.md  FAQ.md         LICENSE          node_modules/  README.md  tsconfig.json      tsconfig.lib.prod.json  typedoc.json
CHANGELOG.json  docs/         karma.conf.js  ng-package.json  package.json   src/       tsconfig.lib.json  tsconfig.spec.json
 I  ~/W/microsoft-authentication-library-for-js   dev *  lib/msal-angular  npm run build                                       Fr 12 Apr 2024 21:36:40 CEST

> @azure/msal-angular@3.0.16 build
> ng build

Building Angular Package

------------------------------------------------------------------------------
Building entry point '@azure/msal-angular'
------------------------------------------------------------------------------
✖ Compiling with Angular sources in Ivy full compilation mode.
src/IMsalService.ts:14:8 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

14 } from "@azure/msal-browser";
          ~~~~~~~~~~~~~~~~~~~~~
src/msal.service.ts:19:8 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

19 } from "@azure/msal-browser";
          ~~~~~~~~~~~~~~~~~~~~~
src/msal.service.ts:42:5 - error TS2322: Type 'Observable<unknown>' is not assignable to type 'Observable<void>'.
  Type 'unknown' is not assignable to type 'void'.

42     return from(this.instance.initialize());
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/msal.service.ts:48:5 - error TS2322: Type 'Observable<unknown>' is not assignable to type 'Observable<void>'.

48     return from(this.instance.acquireTokenRedirect(request));
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/msal.service.ts:68:5 - error TS2322: Type 'Observable<unknown>' is not assignable to type 'Observable<void>'.

68     return from(this.instance.loginRedirect(request));
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/msal.service.ts:71:5 - error TS2322: Type 'Observable<unknown>' is not assignable to type 'Observable<void>'.

71     return from(this.instance.logout(logoutRequest));
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/msal.service.ts:74:5 - error TS2322: Type 'Observable<unknown>' is not assignable to type 'Observable<void>'.

74     return from(this.instance.logoutRedirect(logoutRequest));
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/msal.service.ts:77:5 - error TS2322: Type 'Observable<unknown>' is not assignable to type 'Observable<void>'.

77     return from(this.instance.logoutPopup(logoutRequest));
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/msal.guard.config.ts:11:8 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

11 } from "@azure/msal-browser";
          ~~~~~~~~~~~~~~~~~~~~~
src/msal.broadcast.service.ts:12:8 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

12 } from "@azure/msal-browser";
          ~~~~~~~~~~~~~~~~~~~~~
src/msal.guard.ts:22:8 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

22 } from "@azure/msal-browser";
          ~~~~~~~~~~~~~~~~~~~~~
src/msal.interceptor.config.ts:13:8 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

13 } from "@azure/msal-browser";
          ~~~~~~~~~~~~~~~~~~~~~
src/msal.interceptor.ts:22:8 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

22 } from "@azure/msal-browser";
          ~~~~~~~~~~~~~~~~~~~~~
src/msal.module.ts:8:42 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

8 import { IPublicClientApplication } from "@azure/msal-browser";
                                           ~~~~~~~~~~~~~~~~~~~~~
src/msal.navigation.client.ts:13:8 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

13 } from "@azure/msal-browser";
          ~~~~~~~~~~~~~~~~~~~~~

npm ERR! Lifecycle script `build` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: @azure/msal-angular@3.0.16 
npm ERR!   at location: /home/USERNAME/Workspace/microsoft-authentication-library-for-js/lib/msal-angular

BuZZ-dEE · 2024-04-12T19:50:08Z

 I  ~/W/microsoft-authentication-library-for-js   dev *  samples/msal-angular-v3-samples/angular17-standalone-sample  npm i    Fr 12 Apr 2024 21:47:24 CEST

up to date, audited 5281 packages in 24s

502 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
 I  ~/W/microsoft-authentication-library-for-js   dev *  samples/msal-angular-v3-samples/angular17-standalone-sample  npm run build

> angular17-standalone-sample@0.0.0 build
> npm run postinstall:msal-angular && ng build


> angular17-standalone-sample@0.0.0 postinstall:msal-angular
> node ../sample-scripts/useMsalAngularTarball.js


> @azure/msal-angular@3.0.16 build
> ng build

Building Angular Package

------------------------------------------------------------------------------
Building entry point '@azure/msal-angular'
------------------------------------------------------------------------------
✖ Compiling with Angular sources in Ivy full compilation mode.
src/IMsalService.ts:14:8 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

14 } from "@azure/msal-browser";
          ~~~~~~~~~~~~~~~~~~~~~
src/msal.service.ts:19:8 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

19 } from "@azure/msal-browser";
          ~~~~~~~~~~~~~~~~~~~~~
src/msal.service.ts:42:5 - error TS2322: Type 'Observable<unknown>' is not assignable to type 'Observable<void>'.
  Type 'unknown' is not assignable to type 'void'.

42     return from(this.instance.initialize());
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/msal.service.ts:48:5 - error TS2322: Type 'Observable<unknown>' is not assignable to type 'Observable<void>'.

48     return from(this.instance.acquireTokenRedirect(request));
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/msal.service.ts:68:5 - error TS2322: Type 'Observable<unknown>' is not assignable to type 'Observable<void>'.

68     return from(this.instance.loginRedirect(request));
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/msal.service.ts:71:5 - error TS2322: Type 'Observable<unknown>' is not assignable to type 'Observable<void>'.

71     return from(this.instance.logout(logoutRequest));
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/msal.service.ts:74:5 - error TS2322: Type 'Observable<unknown>' is not assignable to type 'Observable<void>'.

74     return from(this.instance.logoutRedirect(logoutRequest));
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/msal.service.ts:77:5 - error TS2322: Type 'Observable<unknown>' is not assignable to type 'Observable<void>'.

77     return from(this.instance.logoutPopup(logoutRequest));
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/msal.guard.config.ts:11:8 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

11 } from "@azure/msal-browser";
          ~~~~~~~~~~~~~~~~~~~~~
src/msal.broadcast.service.ts:12:8 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

12 } from "@azure/msal-browser";
          ~~~~~~~~~~~~~~~~~~~~~
src/msal.guard.ts:22:8 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

22 } from "@azure/msal-browser";
          ~~~~~~~~~~~~~~~~~~~~~
src/msal.interceptor.config.ts:13:8 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

13 } from "@azure/msal-browser";
          ~~~~~~~~~~~~~~~~~~~~~
src/msal.interceptor.ts:22:8 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

22 } from "@azure/msal-browser";
          ~~~~~~~~~~~~~~~~~~~~~
src/msal.module.ts:8:42 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

8 import { IPublicClientApplication } from "@azure/msal-browser";
                                           ~~~~~~~~~~~~~~~~~~~~~
src/msal.navigation.client.ts:13:8 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

13 } from "@azure/msal-browser";
          ~~~~~~~~~~~~~~~~~~~~~

npm ERR! Lifecycle script `build` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: @azure/msal-angular@3.0.16 
npm ERR!   at location: /home/USERNAME/Workspace/microsoft-authentication-library-for-js/lib/msal-angular 
node:child_process:965
    throw err;
    ^

Error: Command failed: npm run build
    at checkExecSyncError (node:child_process:890:11)
    at execSync (node:child_process:962:15)
    at Object.<anonymous> (/home/USERNAME/Workspace/microsoft-authentication-library-for-js/samples/msal-angular-v3-samples/sample-scripts/useMsalAngularTarball.js:17:1)
    at Module._compile (node:internal/modules/cjs/loader:1356:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
    at Module.load (node:internal/modules/cjs/loader:1197:32)
    at Module._load (node:internal/modules/cjs/loader:1013:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:128:12)
    at node:internal/main/run_main_module:28:49 {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 1752280,
  stdout: null,
  stderr: null
}

Node.js v18.19.1
npm ERR! Lifecycle script `postinstall:msal-angular` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: angular17-standalone-sample@0.0.0 
npm ERR!   at location: /home/USERNAME/Workspace/microsoft-authentication-library-for-js/samples/msal-angular-v3-samples/angular17-standalone-sample 
npm ERR! Lifecycle script `build` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: angular17-standalone-sample@0.0.0 
npm ERR!   at location: /home/USERNAME/Workspace/microsoft-authentication-library-for-js/samples/msal-angular-v3-samples/angular17-standalone-sample

keerttiraj · 2024-04-18T05:49:17Z

Hi @EmLauber @danobri , Regarding MSAL SSR support for Angular 17, is there a release schedule?

SamuelW2002 · 2024-04-18T06:28:11Z

@BuZZ-dEE did u find a solution?

scotthutchison · 2024-04-18T07:01:38Z

@SamuelPXL and @BuZZ-dEE - that error looks to be caused by not doing an "npm install" first.

I was able to get the example to run but I had to remove the dependency "e2e-test-utils": "^0.0.1",
As it couldnt find it on npm and I could not find a way around that.

Once I removed that i could run it and login. I have yet to successfully hook it up to .NET despite all day on it today... I am an experienced dev and I find this stuff really hard. Am reading through documentation on redirects and upgrading from MSAL 2 to 3 at the moment to see if I can figure out what is awry, When i hit .NET endpoint I get an unauthorised error - when I remove the [Authorize] annotation from .NET controller i can see the User Claims Principal is "IsAuthenticated = false". I also do not see the bearer token in the browser.... Am a bit lost and stuck now...

juanpabloguerra16 · 2024-04-18T17:28:26Z

@SamuelPXL and @BuZZ-dEE - that error looks to be caused by not doing an "npm install" first.

I was able to get the example to run but I had to remove the dependency "e2e-test-utils": "^0.0.1", As it couldnt find it on npm and I could not find a way around that.

Once I removed that i could run it and login. I have yet to successfully hook it up to .NET despite all day on it today... I am an experienced dev and I find this stuff really hard. Am reading through documentation on redirects and upgrading from MSAL 2 to 3 at the moment to see if I can figure out what is awry, When i hit .NET endpoint I get an unauthorised error - when I remove the [Authorize] annotation from .NET controller i can see the User Claims Principal is "IsAuthenticated = false". I also do not see the bearer token in the browser.... Am a bit lost and stuck now...

Debugging this MSAL library on Angular is extremely complicated. This is seriously making me consider other IdP options as there's just too many issues one runs into when dealing with MSAL

BuZZ-dEE · 2024-04-23T09:11:44Z

@BuZZ-dEE did u find a solution?

@SamuelPXL yes, with the following version it works:

    "@azure/msal-angular": "3.0.4",
    "@azure/msal-browser": "3.1.0",

abdebek · 2024-04-27T16:40:51Z

@SamuelPXL and @BuZZ-dEE - that error looks to be caused by not doing an "npm install" first.

I was able to get the example to run but I had to remove the dependency "e2e-test-utils": "^0.0.1", As it couldnt find it on npm and I could not find a way around that.

Once I removed that i could run it and login. I have yet to successfully hook it up to .NET despite all day on it today... I am an experienced dev and I find this stuff really hard. Am reading through documentation on redirects and upgrading from MSAL 2 to 3 at the moment to see if I can figure out what is awry, When i hit .NET endpoint I get an unauthorised error - when I remove the [Authorize] annotation from .NET controller i can see the User Claims Principal is "IsAuthenticated = false". I also do not see the bearer token in the browser.... Am a bit lost and stuck now...

I'd recommend you to consider handling the authentication related processes without using the MSAL. You'd be surprised by how easy it actually is. I don't think the benefits MSAL may provide is worth the pain.

Flywheel · 2024-04-27T17:56:06Z

@abdebek > I'd recommend you to consider handling the authentication related processes without using the MSAL. You'd be surprised by how easy it actually is. I don't think the benefits MSAL may provide is worth the pain.

Can you recommend any reference projects that demonstrate solid, well-supported, and less painful alternatives? I was attracted to MSAL by the promise of low-cost, stable integration with Azure ADB2C. Giving up on MSAL implies overhauling the identity model for my project's backend.

EmLauber · 2024-04-30T00:44:12Z

After further investigation, we will not be able to support server-side rendering in Angular 17. We will leave the support as released and investigate SSR support when evaluating Angular 18. I am closing this issue as Angular 17 support is available. Please open new Issues for other problems.

muhamedkarajic · 2024-06-25T11:15:36Z

I don't know exactly what has changed but I don't have the issues I had anymore.

muhamedkarajic added feature-unconfirmed question Customer is asking for a clarification, use case or information. labels Nov 23, 2023

microsoft-github-policy-service bot added the Needs: Attention 👋 Awaiting response from the MSAL.js team label Nov 23, 2023

github-actions bot added msal-angular Related to @azure/msal-angular package msal-browser Related to msal-browser package public-client Issues regarding PublicClientApplications labels Nov 23, 2023

tnorling assigned EmLauber Dec 12, 2023

tnorling added the feature Feature requests. label Dec 12, 2023

microsoft-github-policy-service bot removed question Customer is asking for a clarification, use case or information. Needs: Attention 👋 Awaiting response from the MSAL.js team feature-unconfirmed labels Dec 12, 2023

tnorling mentioned this issue Dec 13, 2023

Angular 16 and 17 : BrowserAuthError: uninitialized_public_client_application #6691

Closed

Flywheel mentioned this issue Jan 24, 2024

Support for angular 17 #6844

Closed

EmLauber closed this as completed Apr 30, 2024

@azure/msal-angular works with Angular 17 #6719

@azure/msal-angular works with Angular 17 #6719

Comments

muhamedkarajic commented Nov 23, 2023

Core Library

Wrapper Library

Public or Confidential Client?

Description

Source

mlz11 commented Nov 27, 2023 • edited Loading

nimbusparis commented Dec 12, 2023

EmLauber commented Dec 14, 2023

mrivero2020 commented Dec 18, 2023

talgershman commented Dec 26, 2023

muhamedkarajic commented Jan 10, 2024

EmLauber commented Jan 11, 2024

JaimeStill commented Jan 13, 2024 • edited Loading

OWS-thinhpv commented Jan 17, 2024

smg-bg commented Jan 27, 2024

KarolZirex commented Jan 28, 2024

umberto-titola commented Jan 30, 2024 • edited Loading

smg-bg commented Feb 3, 2024

wy193777 commented Feb 7, 2024

umberto-titola commented Feb 7, 2024

Erbenos commented Feb 9, 2024

timothytavarez commented Feb 11, 2024

hashpyrit commented Apr 4, 2024

EmLauber commented Apr 4, 2024

Core121 commented Apr 4, 2024 • edited Loading

scotthutchison commented Apr 4, 2024

talgershman commented Apr 5, 2024 • edited Loading

rperissa commented Apr 5, 2024 • edited Loading

AlmajaA commented Apr 5, 2024 • edited Loading

Flywheel commented Apr 5, 2024

Viltersten commented Apr 7, 2024

Viltersten commented Apr 7, 2024

Viltersten commented Apr 7, 2024

BrianMikinski commented Apr 8, 2024

danobri commented Apr 9, 2024

BobFleischman commented Apr 9, 2024

JaimeStill commented Apr 9, 2024 • edited Loading

EmLauber commented Apr 10, 2024

EmLauber commented Apr 10, 2024

EmLauber commented Apr 12, 2024

BuZZ-dEE commented Apr 12, 2024

BuZZ-dEE commented Apr 12, 2024

keerttiraj commented Apr 18, 2024 • edited Loading

SamuelW2002 commented Apr 18, 2024

scotthutchison commented Apr 18, 2024

juanpabloguerra16 commented Apr 18, 2024

BuZZ-dEE commented Apr 23, 2024

abdebek commented Apr 27, 2024

Flywheel commented Apr 27, 2024

EmLauber commented Apr 30, 2024

muhamedkarajic commented Jun 25, 2024

mlz11 commented Nov 27, 2023 •

edited

Loading

JaimeStill commented Jan 13, 2024 •

edited

Loading

umberto-titola commented Jan 30, 2024 •

edited

Loading

Core121 commented Apr 4, 2024 •

edited

Loading

talgershman commented Apr 5, 2024 •

edited

Loading

rperissa commented Apr 5, 2024 •

edited

Loading

AlmajaA commented Apr 5, 2024 •

edited

Loading

JaimeStill commented Apr 9, 2024 •

edited

Loading

keerttiraj commented Apr 18, 2024 •

edited

Loading