remackgeek / elements-zone-strategy

A custom NgElementStrategyFactory to enable zone-based change detection for Angular Elements

elements-zone-strategy

This library provides an Angular Elements Strategy Factory which always runs in the NgZone, allowing automatic change detection

This library is no longer needed for Angular versions 10.1 and above!

see: here

This addresses the following issues with @angular/elements:

• #23841 - elements: change detection breaks in *ngFor loop -- this is fixed in angular 10.1.0
• #24181 - @angular/elements component events are called from an inconsistent zone -- This is fixed in zone.js v0.8.27

Usage

install the package:

npm install --save elements-zone-strategy

use the new strategy:

import { ElementZoneStrategyFactory } from 'elements-zone-strategy';

const strategyFactory = new ElementZoneStrategyFactory(HelloComponent, this.injector);
const helloElement = createCustomElement(HelloComponent, { injector: this.injector, strategyFactory });
customElements.define('my-hello', helloElement);

Versions

Not needed in Angular 11

use version 10.0.0 for Angular 10 (not needed as of 10.1)

use version 9.0.0 for Angular 9

use version 8.0.0 for Angular 6-8

elements-zone-strategy's Issues

Test and update peer dependencies to support Angular 8

Currently the peer dependencies for this library allow it to be cleanly used with Angular 6 and 7.

We need to test with Angular 8 and update the peer dependencies to allow npm install to run cleanly.

Angular 11 Support

I'm filing this issue to help us determine whether there are changes needed to support Angular 11, or whether we can just bump the peer dependency to include Angular 11.

DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry

Hi,

First of all thanks! This module made my change detection work which was the thing that was putting me off using Angular Elements.

I have noticed that using this causes the above error to reappear when I try to load a second Angular Element (I only use one at a time but I need to be able to switch them).

I had this problem before but I hacked my way around it by messing with webpackJsonP. When I use your module, this no longer works and I can't really work out why it has this effect.

Do you have any ideas what might be causing that?