I'm attempting a basic Angular Web Component. I created a github repository that shows the approach here:
https://github.com/fireflysemantics/fs-gist
This is the component: https://github.com/fireflysemantics/fs-gist/blob/master/src/app/fs-gist/fs-gist.component.ts
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'fs-gist',
template: `
<p>
fs-gist works!
</p>
`,
styles: [
],
encapsulation: ViewEncapsulation.Native
})
export class FsGistComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
And this is the module: https://github.com/fireflysemantics/fs-gist/blob/master/src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FsGistComponent } from './fs-gist/fs-gist.component';
import { Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
@NgModule({
declarations: [
FsGistComponent
],
imports: [
BrowserModule
],
providers: [],
entryComponents: [FsGistComponent]
})
export class AppModule {
constructor(private injector: Injector) {}
ngDoBootstrap() {
const el = createCustomElement(
FsGistComponent,
{ injector: this.injector });
customElements.define('fs-gist', el);
}
}
And these are the build scripts in package.json
https://github.com/fireflysemantics/fs-gist/blob/master/package.json
"b": "ng build --prod --output-hashing=none",
"c": "bash -c 'cat dist/fs-gist/{runtime-es5,polyfills-es5,main-es5}.js > fs-gist.js'",
"c1": "bash -c 'cat dist/fs-gist/{runtime-es2015,polyfills-es2015,main-es2015}.js > fs-gist2015.js'",
"p": "npm run b && npm run c",
"p1": "npm run b && npm run c1",
"cp-fs-gist": "cp fs-gist.js ../wctest/src/assets/js/"
Running npm run p will create the web component fs-gist in the root folder.
I then copied that into the src/assets/js/ folder of this test project:
https://github.com/fireflysemantics/wc-test
When the application is loaded the the console logs:
fs-gist.js:1 ERROR TypeError: i.createShadowRoot is not a function at new n (fs-gist.js:1) at e.value (fs-gist.js:1) at fs-gist.js:1 at n.value (fs-gist.js:1) at e.value (fs-gist.js:1) at e.value (fs-gist.js:1) at HTMLElement.value (fs-gist.js:1) at ZoneDelegate.invoke (zone-evergreen.js:364) at Object.onInvoke (fs-gist.js:1) at ZoneDelegate.invoke (zone-evergreen.js:363)
I've included polyfills for web components in polyfills.js:
import "@webcomponents/custom-elements/src/native-shim";
import "@webcomponents/custom-elements/custom-elements.min";
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'
and I've added web component loading to index.html:
<script src="webcomponents/webcomponents-loader.js"></script>
<script>
if ( !window.customElements )
{ document.write('<!--') }
</script>
<script src="webcomponents/custom-elements-es5-adapter.js"></script>
<!-- ! KEEP ME -->
Any ideas?
Also just to see whether I could get this working in a minimal environment I took the fs-gist web component that the first project produces and made a minimal javascript stackblitz with it.
The demo imports the web components polyfill from a CDN.
This is it:
https://stackblitz.com/edit/js-custome-element-test
The following error is produced:
ERROR Error: Failed to execute 'define' on 'CustomElementRegistry': the name "fs-gist" has already been used with this registry
I think there is a bug in the Angular compilation of the web component.
The components View Encapsulation needs to be ViewEncapsulation.ShadowDom (See above mentioned bug report for reference):
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'fs-gist',
template: `
<p>
fs-gist works!
</p>
`,
styles: [
],
encapsulation: ViewEncapsulation.ShadowDom
})
export class FsGistComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}