Microsoft Teams Tab: Unable to use app.initialize() on first load after login — blank iframe...

I created a custom Teams app and uploaded a manifest file. When I try to open the app, it briefly displays the UI, then goes blank. If I manually reload the page (F5), the UI appears and everything works as expected.

However, when I log out of Teams and sign in again, the issue reoccurs: the tab opens briefly, then goes blank — until I manually reload the page again.

After debugging, I found that the problem seems to be related to the app.initialize() call from the Microsoft Teams JS SDK. When the code runs app.initialize(), the iframe appears to refresh or get unloaded, which causes the blank screen.

Has anyone experienced this? Is there a reliable way to delay or sequence app.initialize() to avoid this issue after login?

What I’ve tried:

Wrapping app.initialize() in DOMContentLoaded + setTimeout

Checking app.isInitialized() before calling initialize()

Delaying Angular bootstrap until after initialize() completes

Calling app.notifySuccess() after getContext()

Still, the iframe gets cleared after login unless I reload manually.

Any suggestions?

Continue reading...