I'm working on a Blazor app that runs embedded inside Microsoft Teams. In order to interact with Teams, we use the Teams SDK and call it from our C# code using the IJSRuntime interface. In order to do anything with the library, we first initialize it by calling microsoftTeams.app.initialize() and then continue to use the microsoftTeams variable to perform various operations.
Recently, we've run into a requirement where we needed to interact with Teams before interop is available. This meant we are now running a .js script on pageload which calls initialize and then performs other operations.
Since microsoftTeams.app.initialize() is now called on every page load in the fronted, I expected the library to already be initialized when calling subsequent javascript functions through js interop. Unfortunately, this is not the case. Instead, I get the following error:
internalAPIs.ts:28 Uncaught (in promise) Error: The library has not yet been initialized
How can this be? I'd expect the state to be shared and the library to have been initialized. When I save the promise from the init call, I can see its state is fulfilled when the interop js runs. Although calling initialize() again through interop fixes this issue, initializing the app twice seems to cause issues elsewhere. Any help would be much appreciated.
Init.js
let teamsInitPromise;
teamsInitPromise = microsoftTeams.app.initialize();
teamsInitPromise.then(() => {
microsoftTeams.app.getContext().then((context) => {
// do stuff
});
});
interop.razor
await MicrosoftTeams.InitializeAsync();
var context = await MicrosoftTeams.GetTeamsContextAsync();
culture = context.App.Locale;
interop.js
export function getContextAsync() {
let scopedPromise = teamsInitPromise; // Promise state "Fulfulled" is shown in developer tools
return new Promise((resolve, reject) => {
try {
microsoftTeams.app.getContext().then((context) => {
resolve(context);
});
} catch (e) {
reject(e);
}
});
}
