Change detection / Binding not working on Angular Element component

General Information

• Usage
• Development
• Documentation
• Feature Request

Specific generator

• Addons
• HandlebarsJS
• Angular Elements

What Version you are running?

• NodeJS: 10.17.0 64bit
• NPM: 6.11.3
• @pnp/spfx: 1.10.1 Note: tested with Angular CLI versions 7 and 8.

I created a very basic POC project using the @pnp/spfx generator and the Angular Elements based template.

While the project builds just fine, I am experiencing major issues with binding not working as expected inside the default created component. This is the content of my component.html file.

<p>
   It works! Description: {{description}}
</p>
 
{{foo}} 
<input type="text" [(ngModel)]="foo"/>

As you can see, I have just added a simple input to the component template, bound to a variable called “foo”. The same variable is used in the interpolation above. I would expect that when I change the value in the input field, the interpolated text changes too.

Using Chrome, the result is as expected. But when using Edge the interpolated text is not updated. Notice that this happens only when the component is tested in the workbench or the package is deployed in SharePoint. The binding / change detection works normally if I test the component outside SharePoint using ng serve. Also worth noticing is that if I defined an initial value for the variable in the component.ts file, that value gets correctly displayed in the component, but successive changes still have no effect on the displayed interpolated value {{foo}}.

Checking the Edge developer toolbar doesn’t seems to provide any clue.

Does anyone know if this is a known issue? I wasn’t able to find any specific mentions of similar problems… but as you can understand this is somehow of a blocking issue to have.

[RayMK42]

@StfBauer Thank you for your reply and your great explanation - you are right, the issue is indeed caused by Edge incomplete support of the custom elements standards. I assumed that Edge had that covered, but I was wrong - full support is still broken. Anyway, your solution works great, so I suppose there is no need for me to include the alternate zone strategy - I will just use the polyfill you mentioned. That said, I also wonder why my other solution worked too- maybe the alternate zone strategy somehow included some polyfill?

Out of curiosity, I also installed the “stable” version of the Chromium-based Edge browser (using the side-by-side installation method documented here in case you were interested) and as expected… it just works without the need for the polyfill. There are other minor css rendering issues but nothing directly related to Angular, SharePoint or the SPFX framework.

You can safely consider this question closed now. Thanks again for the assistence.

[StfBauer]

@RayMK42 Thank you very much for the POC. Was great to reproduce your issue.

First, forget the element-zone-strategy this has nothing to do with it. The issue is pure Edge and not supporting custom elements, which are a result of any Angular Elements project nowadays.

As part of web components, this was never supported and will never be supported in the current Edge browser. They are “In Development” for a long time but never landed on any Edge Browser.

This will change with Chromium Based Microsoft Edge. Finally, this browser will catch up.

The good news is you get this running even on Edge through a polyfill.

You need to install the following thing to your Angular Project:

npm install @webcomponents/custom-elements --save-dev

It is the polyfill for custom elements targeting Microsoft Edge. Next, you need to change the bundling.

// elements-bundle.js
const concat = require('concat');

(async function build() {
  const files = [
    './node_modules/@webcomponents/custom-elements/custom-elements.min.js',
    './dist/Poc/runtime.js',
    './dist/Poc/polyfills.js',
    './dist/Poc/scripts.js',
    './dist/Poc/main.js'
  ];
  await concat(files, './dist/Poc/bundle.js');
})();

You will find the elements-build.js file in the root of the Angular Elements project. The only thing to add here is the reference for the custom-elements.min.js

After that simply rebuild and reload the workbench. That is basically all I had to make it work.

I guess we should add this to the Angular Elements documentation of the generator in case someone needs to support this in current state Edge too.