Excel Online Adding with angular not opening dialog

I have an adding that I am building using excel and angular. I however, cannot get it to open a dialog. I have found that excel is not downloading the function.html file.

<?xml version="1.0" encoding="UTF-8"?>
<!--Created:ce44715c-8c4e-446b-879c-ea9ebe0f09c8-->
<OfficeApp
xmlns="http://schemas.microsoft.com/office/appforoffice/1.1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0"
xsi:type="TaskPaneApp">

<!-- Begin Basic Settings: Add-in metadata, used for all versions of Office unless override provided. -->

<!-- IMPORTANT! Id must be unique for your add-in, if you reuse this manifest ensure that you change this id to a new GUID. -->
<Id>affb78a3-9b2d-499b-a0a0-d45f2198d23e</Id>

<!--Version. Updates from the store only get triggered if there is a version change. -->
<Version>1.0.0.0</Version>
<ProviderName>[Provider name]</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
<DisplayName DefaultValue="Tollerance 360" />
<Description DefaultValue="Tollerance 360"/>
<!-- Icon for your add-in. Used on installation screens and the add-ins dialog. -->
<IconUrl DefaultValue="https://localhost:7001/assets/images/logo.png" />

<SupportUrl DefaultValue="http://www.contoso.com" />
<!-- Domains that will be allowed when navigating. For example, if you use ShowTaskpane and then have an href link, navigation will only be allowed if the domain is on this list. -->
<AppDomains>
<AppDomain>AppDomain1</AppDomain>
<AppDomain>AppDomain2</AppDomain>
<AppDomain>AppDomain3</AppDomain>
</AppDomains>
<!--End Basic Settings. -->

<!--Begin TaskPane Mode integration. This section is used if there are no VersionOverrides or if the Office client version does not support add-in commands. -->
<Hosts>
<Host Name="Workbook" />
</Hosts>
<DefaultSettings>
<SourceLocation DefaultValue="https://localhost:4200" />
</DefaultSettings>
<!-- End TaskPane Mode integration. -->

<Permissions>ReadWriteDocument</Permissions>

<!-- Begin Add-in Commands Mode integration. -->
<VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">

<!-- The Hosts node is required. -->
<Hosts>
<!-- Each host can have a different set of commands. -->
<!-- Excel host is Workbook, Word host is Document, and PowerPoint host is Presentation. -->
<!-- Make sure the hosts you override match the hosts declared in the top section of the manifest. -->
<Host xsi:type="Workbook">
<!-- Form factor. Currently only DesktopFormFactor is supported. -->
<DesktopFormFactor>
<!--"This code enables a customizable message to be displayed when the add-in is loaded successfully upon individual install."-->
<GetStarted>
<!-- Title of the Getting Started callout. The resid attribute points to a ShortString resource -->
<Title resid="t360.GetStarted.Title"/>

<!-- Description of the Getting Started callout. resid points to a LongString resource -->
<Description resid="t360.GetStarted.Description"/>

<!-- Points to a URL resource which details how the add-in should be used. -->
<LearnMoreUrl resid="t360.GetStarted.LearnMoreUrl"/>
</GetStarted>
<!-- Function file is a HTML page that includes the JavaScript where functions for ExecuteAction will be called.
Think of the FunctionFile as the code behind ExecuteFunction. -->
<FunctionFile resid="t360.DesktopFunctionFile.Url" />

<!-- PrimaryCommandSurface is the main Office Ribbon. -->
<ExtensionPoint xsi:type="PrimaryCommandSurface">
<!-- Create a new Custom Tab instead of using OfficeTab -->
<CustomTab id="t360.CustomTab">
<!-- Ensure you provide a unique id for the group. -->
<Group id="t360.login-group">
<!-- Label for your group. resid must point to a ShortString resource. -->
<Label resid="t360.login-group-label" />
<!-- Icons for the group -->
<Icon>
<bt:Image size="16" resid="t360.login_16x16" />
<bt:Image size="32" resid="t360.login_32x32" />
<bt:Image size="80" resid="t360.login_80x80" />
</Icon>

<!-- Control definition (e.g., a button) -->
<Control xsi:type="Button" id="t360.LoginButton">
<Label resid="t360.login.Label" />
<Supertip>
<Title resid="t360.login.Label" />
<Description resid="t360.Login.Tooltip" />
</Supertip>
<Icon>
<bt:Image size="16" resid="t360.login_16x16" />
<bt:Image size="32" resid="t360.login_32x32" />
<bt:Image size="80" resid="t360.login_80x80" />
</Icon>
<Action xsi:type="ExecuteFunction">
<FunctionName>openLoginDialog</FunctionName>
</Action>
</Control>
<!-- ... [additional controls can be added here] ... -->
</Group>

<!-- New group: Stack Builder -->
<Group id="t360.stack-builder-group">
<!-- Label for your new group. Update the resid to point to your desired label. -->
<Label resid="t360.stack-builder-group-label" />

<!-- Icons for the group -->
<Icon>
<bt:Image size="16" resid="t360.stack-builder_16x16" />
<bt:Image size="32" resid="t360.stack-builder_32x32" />
<bt:Image size="80" resid="t360.stack-builder_80x80" />
</Icon>

<!-- Control definition for the Stack Builder (e.g., a button) -->
<Control xsi:type="Button" id="t360.WorkbenchButton">
<Label resid="t360.workbench.Label" />
<Supertip>
<Title resid="t360.workbench.Label" />
<Description resid="t360.WorkbenchButton.Tooltip" />
</Supertip>
<Icon>
<bt:Image size="16" resid="t360.workbench_16x16" />
<bt:Image size="32" resid="t360.workbench_32x32" />
<bt:Image size="80" resid="t360.workbench_80x80" />
</Icon>
<Action xsi:type="ExecuteFunction">
<FunctionName>openWorkbenchDialog</FunctionName>
</Action>
</Control>

<!-- Control definition for the Stack Builder (e.g., a button) -->
<Control xsi:type="Button" id="t360.StackBuilderButton">
<Label resid="t360.stack-builder.Label" />
<Supertip>
<Title resid="t360.stack-builder.Label" />
<Description resid="t360.StackBuilderButton.Tooltip" />
</Supertip>
<Icon>
<bt:Image size="16" resid="t360.stack-builder_16x16" />
<bt:Image size="32" resid="t360.stack-builder_32x32" />
<bt:Image size="80" resid="t360.stack-builder_80x80" />
</Icon>
<Action xsi:type="ShowTaskpane">
<TaskpaneId>ButtonId1</TaskpaneId>
<SourceLocation resid="t360.stack-builder.url" />
</Action>
</Control>
<!-- ... [additional controls for Stack Builder can be added here] ... -->
</Group>

<!-- Label for the new custom tab -->
<Label resid="t360.CustomTabLabel" />
</CustomTab>
</ExtensionPoint>
</DesktopFormFactor>
</Host>
</Hosts>

<!-- You can use resources across hosts and form factors. -->
<Resources>
<bt:Images>
<!-- login -->
<bt:Image id="t360.login_16x16" DefaultValue="https://localhost:7001/images/Login/login_16x16.png" />
<bt:Image id="t360.login_32x32" DefaultValue="https://localhost:7001/images/Login/login_32x32.png" />
<bt:Image id="t360.login_80x80" DefaultValue="https://localhost:7001/images/Login/login_80x80.png" />
<!-- Stack Builder -->
<bt:Image id="t360.stack-builder_16x16" DefaultValue="https://localhost:7001/images/StackBuilder/StackBuilder_16x16.png" />
<bt:Image id="t360.stack-builder_32x32" DefaultValue="https://localhost:7001/images/StackBuilder/StackBuilder_32x32.png" />
<bt:Image id="t360.stack-builder_80x80" DefaultValue="https://localhost:7001/images/StackBuilder/StackBuilder_80x80.png" />
<!-- Workbench-->
<bt:Image id="t360.workbench_16x16" DefaultValue="https://localhost:7001/images/StackBuilder/StackBuilder_16x16.png" />
<bt:Image id="t360.workbench_32x32" DefaultValue="https://localhost:7001/images/StackBuilder/StackBuilder_32x32.png" />
<bt:Image id="t360.workbench_80x80" DefaultValue="https://localhost:7001/images/StackBuilder/StackBuilder_80x80.png" />
</bt:Images>
<bt:Urls>
<bt:Url id="t360.login.url" DefaultValue="https://localhost:4200/login" />
<bt:Url id="t360.stack-builder.url" DefaultValue="https://localhost:4200/workbench" />
<bt:Url id="t360.workbench.url" DefaultValue="https://localhost:4200/workbench" />
<bt:Url id="t360.GetStarted.LearnMoreUrl" DefaultValue="https://go.microsoft.com/fwlink/?LinkId=276812" />
<bt:Url id="t360.DesktopFunctionFile.Url" DefaultValue="https://localhost:7001/functions.html" />
</bt:Urls>
<!-- ShortStrings max characters==125. -->
<bt:ShortStrings>
<bt:String id="t360.CustomTabLabel" DefaultValue="T360" />

<!-- login -->
<bt:String id="t360.login.Label" DefaultValue="Login" />
<bt:String id="t360.login-group-label" DefaultValue="Login/Logout " />

<!-- stack builder -->
<bt:String id="t360.stack-builder.Label" DefaultValue="Stack Builder" />
<bt:String id="t360.workbench.Label" DefaultValue="Workbench" />
<bt:String id="t360.stack-builder-group-label" DefaultValue="Stack Builder" />

<bt:String id="t360.GetStarted.Title" DefaultValue="Get started with your sample add-in!" />
</bt:ShortStrings>
<!-- LongStrings max characters==250. -->
<bt:LongStrings>
<bt:String id="t360.Login.Tooltip" DefaultValue="Click to login" />
<bt:String id="t360.StackBuilderButton.Tooltip" DefaultValue="Click to open workbench" />
<bt:String id="t360.WorkbenchButton.Tooltip" DefaultValue="Click to open Workbench" />
<bt:String id="t360.GetStarted.Description" DefaultValue="Your sample add-in loaded succesfully. Go to the HOME tab and click the 'Show Taskpane' button to get started." />
</bt:LongStrings>
</Resources>
</VersionOverrides>
<!-- End Add-in Commands Mode integration. -->

</OfficeApp>


I have added the functions file to the server side and i do get a response when i navigate to https://localhost:7001/functions.html.

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Expires" content="0" />
<title></title>
<script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/custom-functions-runtime.js" type="text/javascript"></script>
<script type="text/javascript" src="https://localhost:7001/functions.js"></script>
<script>
console.log('funcitons.html file loaded');
</script>
</head>

<body>
<p>test</p>
</body>

</html>


My taskpane opens when i open excel but i do not see funcitons.html file loaded. I have added verbose logging to see what files are being served and i do not see functions.html.

Can you please tell my what I need to do to make excel download and run the functions.html file?

Continue reading...