Issue with the Angular Interpolation

[fahad198]

Prerequisites

Please answer the following questions before submitting an issue. YOU MAY DELETE THE PREREQUISITES SECTION.

• [Yes] I am running the latest version of Node and the tools
• [Yes] I checked the documentation and found no answer
• [Yes ] I checked to make sure that this issue has not already been filed

Expected behavior

I created an app for outlook addIn. The notation under interpolation ({{}} brackets ) must be replaced with the value. It doesn't seems to work.

Current behavior

Its just {{caseTypeInternal?.firstApplicant?.name}}

Steps to Reproduce

I don't have any reproduction steps. It seems to work in the local host but doesn't work when I deploy it to the server. It used to work fine previously until I updated the angular and node.

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

• Operating System: Windows10
• Node version: node: '12.14.1'
• Office version: 365
• Tool version:

Failure Logs

Please include any relevant log snippets, screenshots or code samples here.

[AlexanderFinkbeiner]

Are the angular directives like *ngIf working? If not it could also be related to this issue: Angular directive from Angular CommonModule not loaded correctly after building the App

To which angular version did you updated?

[fahad198]

the directives are working fine ... Even the control like input or telerik controls are getting set properly ... It's only the interpolation that is not working and I have tried to downgrade node and angular cli still same.

[AlexanderFinkbeiner]

As workaround you could do the same thing as I did: https://github.com/OfficeDev/generator-office/issues/600#issuecomment-776102512

[mpk]

For anyone having problems with this:

I debugged Angular (version 11.2) JIT compiler and found out it depends on String.prototype.startsWith function to detect "{{" and "}}" interpolation brackets.

However, Office.js loads a MicrosoftAjax.js file, which includes lots of polyfills which forcefully rewrites native browser functions (including String.prototype.startsWith). The problem is that their polyfill is broken and does not have support for "position" argument which Angular expects.

Until Microsoft fixes this, I see two workarounds:

1. use AOT
2. protect startsWith function from being rewritten using something like Object.defineProperty(String.prototype, 'startsWith', { writable: false }) (seems like a hack, I have not tested it anywhere except Chrome...)