angulartfsazure-devopsvssdk

Debugging Angular TFS extension

I used your example to create tfs extension with Angular and I deployed it successfully. Now I would like to use the "baseUri" field in the vss-extension.json manifest to connect the extension to my server to debug the extension.

To do so I used ng serve --ssl to create a web server using https. In the tfs, I can see that I make requests to my server and successfully get all the elements it required, but the extension itself failed to load and stuck on the "Loading" symbol with the title: "Extension is taking longer than expected to load".

No errors in the console and no 404 responses.

Solution

  • You can check if VSS.init() is missing in your html file.

    VSS.init() is used to perform an initial handshake/setup with the host window.

    enter image description here

    In addition, We can provide options as input to this function, for example: we use explicitNotifyLoaded: true, to indicate that we will notify the host manually when the extension is done loading. This is used for the loading indicator. You can refer to this blog for details.