question

LaljiGami-2564 avatar image
LaljiGami-2564 asked ·

Custom Tab (to an Angular App) Works in Teams Browser App but not in Teams Desktop App

My Custom App (which links to an Angular App Url), and it's custom tab configuration page work fine in Teams Browser App both as an iframe contentUrl and websiteUrl.

However, when I go to the Teams Desktop App I can see the Custom Tab but when pressed nothing appears and no error messages.

I can remove the Custom Tab on the Desktop App. When I go to add it again I can see my App in the list but when I select it, I get a blank configuration page; just shows the top row with logo and "About" and bottom row with "Post to the channel about this tab" check box and "Back" and "Save" buttons.

We're on MS 365 Business Standard.

office-teams-app-dev
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

ManishMSFT-6385 avatar image
ManishMSFT-6385 answered ·

Hi @LaljiGami-2564 , please post app manifest here.

Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

LaljiGami-2564 avatar image
LaljiGami-2564 answered ·

[30957-manifest.txt][1]
[1]: /answers/storage/attachments/30957-manifest.txt

Please find attached the manifest (Json) downloaded from the App Studio.

I am running everything on my local machine. The etxhost file has the entries:

127.0.0.1 localhost
127.0.0.1 jlabi.com
127.0.0.1 teams-config.com




manifest.txt (1.2 KiB)
Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

ManishMSFT-6385 avatar image
ManishMSFT-6385 answered ·

@LaljiGami : We couldn't repro this issue. Could you please host your webpage or project on ngrok and share url?

Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

LaljiGami-2564 avatar image
LaljiGami-2564 answered ·

I’m not familiar with bgrok but I will learn and install. But what do you mean “share” url?

Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

ManishMSFT-6385 avatar image
ManishMSFT-6385 answered ·

@LaljiGami-2564, After you host it on ngrok, please share the manifest again. This will help us to repro it on our side.

Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

LaljiGami-2564 avatar image
LaljiGami-2564 answered ·

Hi Manish

The ngrok URLsare:



https://2b1aab20e93f.ngrok.io
http://2b1aab20e93f.ngrok.io

The ngrok session info is:


Session Status online
Account Lalji Gami (Plan: Free)
Version 2.3.35
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://2b1aab20e93f.ngrok.io -> https://teams-config.com:9443
Forwarding https://2b1aab20e93f.ngrok.io -> https://teams-config.com:9443 Connections ttl opn rt1 rt5 p50 p90 2 0 0.00 0.00 138.02 148.88


The actual Teams App manifest hasn't changed - The Tab Config URL is: https://teams-config.com:9443
(obviously it won't let me point it to the ngrok tunnel url).

Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

LaljiGami-2564 avatar image
LaljiGami-2564 answered ·

Hi Manish

Apologies but my ngrok session ended on my development Laptop. The new ngrok URLs are:
http://0da2a15dbe1c.ngrok.io
https://0da2a15dbe1c.ngrok.io

However I'm intrigued as to how this will help you. As I mentioned at the start, my App Config page comes up perfectly if I use the Teams Web Client. S I suspect if you try the ngrok route that will probably work.

My problem is it does not work from the Teams DESKTOP client. Just as a test to ensure ensure it was not my actual config page content, I replaced that with a simple Hello World index.html. And again this comes up fine through Teams Web Client but not via Teams Desktop client. It's as though the Teams Desktop client can't see the url path that is hosted on my local machine.

Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

ManishMSFT-6385 avatar image
ManishMSFT-6385 answered ·

Sorry for late reply, I missed this question. Are you still facing this issue? I would recommend to use Teams Developer Tool to debug errors on Teams Desktop app. For more info https://docs.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/developer-tools

Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.