acquireToken issue

[kov-hans]

Íf acquireToken is called, or if a token is acquired by the lib when a method in an API is called, the angular application is restarted when the token response is received. Further more angular change detection does not work at this point, GUIs are not updated with the changes in the model. I tried to use the Router to navigate somewhere else to get change detection working again, but that doesn't help. So everytime I receive a new token I have to call location.reload to make the application work again. I don't know if this is a problem in Angular, Adal or adal-angular4? Has anyone else experienced this problem?
I'm using
Angular 8.0.3
Adal: 1.017
Adal-angular4: 4.0.12

[Chappitono]

Hi @kov-hans , I had exactly the same problem (angular 7, same adal's version)
I was just :

1. Querying a profile using the graphApi and data from a webApi.
2. Both of them needed to acquire a token.

I tried a lots of things.
Nothing worked.

The game changer for me was to use the frameredirect.html method.
If you want to give it a try, here are the 4 steps below 👍

1. In the portal, add a new redirectUri : http://localhost:4201/frameRedirect.html (ofc you need to change for all your apps : local / dev / prod etc)
2. add a frameRedirect.html to your project/src (and replace the clientId in the html)
3. In the angular.json :
   "assets": [
   {
   "glob": "frameRedirect.html",
   "input": "projects/your-project-name/src/",
   "output": "./"
   },
4. In your adal.config :
   "adalConfig": {
   [...]
   "redirectUri": "http://localhost:4201/frameRedirect.html"
   }

That's all
Benefits :

• Your angular app won't be reloaded twice
• No duplicated api call
• No angular detection screwed.
• No strange if in your app

[bryiantan]

Hi @kov-hans , I had exactly the same problem (angular 7, same adal's version)
I was just :

1. Querying a profile using the graphApi and data from a webApi.
2. Both of them needed to acquire a token.

I tried a lots of things.
Nothing worked.

The game changer for me was to use the frameredirect.html method.
If you want to give it a try, here are the 4 steps below 👍

1. In the portal, add a new redirectUri : http://localhost:4201/frameRedirect.html (ofc you need to change for all your apps : local / dev / prod etc)
2. add a frameRedirect.html to your project/src (and replace the clientId in the html)
3. In the angular.json :
   "assets": [
   {
   "glob": "frameRedirect.html",
   "input": "projects/your-project-name/src/",
   "output": "./"
   },
4. In your adal.config :
   "adalConfig": {
   [...]
   "redirectUri": "http://localhost:4201/frameRedirect.html"
   }

That's all
Benefits :

• Your angular app won't be reloaded twice
• No duplicated api call
• No angular detection screwed.
• No strange if in your app

Hi @Chappitono , can you post the complete implementation? I'm sure lots of people will greatly appreciate it.

[kov-hans]

Thank you very much for this solution! It solved all my issues! I don't know if there is a better solution but I created one frameRedirect for each of my environments (dev, test etc) since they have different configurations.

[Chappitono]

@kov-hans very happy it worked for you. As asked by @bryiantan , I will very soon post the complete solution in a new project with 1 frameRedirect file. Will update the answer as soon as it is ready.

[bryiantan]

Thank you @kov-hans