Teams-JS SDK - microsoftTeams.app.initialize() promise not resolving

Question

I'm trying to create a simple connector app for Teams. I have a connector in the Connectors Developer Dashboard and a page on my website which is registered as the connector content.

Then on this page I register Teams-JS SDK via CDN

  <script src="https://res.cdn.office.net/teams-js/2.22.0/js/MicrosoftTeams.min.js"
    integrity="sha384-WSG/sWulIv7rel5TnFlH8JTpxl2OxzZh9Lux2mIzBFiTRLFvMBeFv9VURu/3vQdx"
    crossorigin="anonymous"></script>

Then I call microsoftTeams.app.initialize() to initialize the SDK

<script type="text/javascript">

microsoftTeams.app.initialize()
  .then(() => {
	// this block is not called
    document.getElementById("logsSpan").innerText + " -afterInitialize"
  })
  .catch((err) => {
	// this block is not called
    document.getElementById("errorMessageContainer").innerText = err.message;
  });

And nothing happens. Neither then, nor catch functions are not called. The HTML markup is loaded correctly, other javascript functions are working fine, I can manipulate DOM through the javascript code and see the result on the Configure page - it's just microsoftTeams.app.initialize() not giving me anything to work with.

Other SDK functions seem to work, microsoftTeams.app.isInitialized() returns false, no exceptions are thrown and no script errors.

Any ideas why it is not working? Am I doing something wrong?

Answer 1

It turned out, that I had a couple of functions defined before calling microsoftTeams.app.initialize()

<script type="text/javascript"> 
function function1() { document.getElementById("title").innerText = "Title"; }
function function2() { document.getElementById("Summary").innerText = "Summary"; }

microsoftTeams.app.initialize().then( function() { ... } );

I moved these functions declaration after calling microsoftTeams.app.initialize() and the rest of the code - and it started to work

<script type="text/javascript"> 
microsoftTeams.app.initialize().then( function() { ... } );
...


function function1() { document.getElementById("title").innerText = "Title"; }

function function2() { document.getElementById("Summary").innerText = "Summary"; }
</script>