Web Components and Angular 18

What are the Changes form Angular 17 to 18 for Web Components (Standalone Elements)? I've tried some Angular 17 related Guides / couldn't find any (usefull) information about the changes for 18 so far.

My Setup

main.ts:

import {createApplication} from '@angular/platform-browser';
import {createCustomElement} from "@angular/elements";
import {GridWidgetComponent} from "./app/grid-widget/grid-widget.component";

(async () => {
const app = await createApplication({
providers: []
});

const gridElement = createCustomElement(GridWidgetComponent, {
injector: app.injector,
});

customElements.define("grid-widget", gridElement);
})();


PHP Storm informs me in my main.ts that: "Expression statement is not assignment or call"

index-test.html:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<grid-widget></grid-widget>
<script src="component-lib.js" type="module"></script>

</body>
</html>


script linked as type=module because there was a message for Syntax Error: Uncaught SyntaxError: Unexpected token 'export' (at component-lib.js:3:144) but changed nothing

src/app/grid-widget/grid-widget.component.ts:

import { Component } from '@angular/core';
import {CommonModule} from "@angular/common";

@Component({
selector: 'grid-widget',
standalone: true,
imports: [CommonModule],
templateUrl: './grid-widget.component.html',
styleUrl: './grid-widget.component.scss'
})
export class GridWidgetComponent {
constructor() {
}
}


angular.json:

...
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser-esbuild",
"options": {
"outputPath": "dist/webcomponent-example",
"index": "src/index.html",
"main": "src/main.ts",
...


package.json:

...
"build": "ng build --output-hashing=none --configuration production",
"package" : "npm run build && cat dist/webcomponent-example/{polyfills,main}.js > dist/component-lib.js",
...
"dependencies":{
...
"@angular/elements": "^18.2.1",
...
"@angular/platform-browser": "^18.1.0",
...
}


The result is an error in the console that "Nt" already has been declared: "Uncaught SyntaxError: Identifier 'Nt' has already been declared" when using type=module without type=module I've got a Syntax Error about the Export: "Uncaught SyntaxError: Unexpected token 'export'"

One of the tutorials I've used was https://www.youtube.com/watch?v=sDf4PFC_Vok&t=508s In the docs I've only found https://angular.dev/guide/elements but it does not show how to build it correctly.

Target is to have a Web Component (obviously for a grid and later others too) which can be embedded into a PHP site. Because there could be multiple instances on the same page I tough WebComponents / Elements would be a working solution.

Did anyone got a good reference on how to create Web Components with Angular 18?

Continue reading...