Beispiel Web Component für das Meetup vom 25.04.2019 bei PROFFIX Software AG in Wangs.

Die Software wurde mit der Angular CLI und VisualStudio Code erstellt.

1. Installation NodeJS
2. Installation Angular CLI: npm install @angular/cli -g
3. Dieses Repository clonen oder herunterladen
4. VisualStudio Code installieren
5. Empfohlene Erweiterungen in VisualStudio nach dem das Repository geöffnet wurde
6. Abhängigkeiten installieren: npm install (im Projekt-Verzeichnis)

1. Entwicklungsserver starten: ng serve --aot (im Projekt-Verzeichnis)
2. Software aufrufen: http://localhost:4200 (oder F5 in VisualStudio Code)

1. Angular Projekt erstellen
2. ng add @angular/elements
3. Wenn Classic Browser Support (ES5): npm i document-register-element@1.8.1

1. Normale Component mit @Input und @Output
2. Styles alle im Component-(S)CSS, damit diese ins JS compiled werden

1. AppComponent entfernen (inkl. Referenzen in AppModule, auch Bootstrap wird manuell ausgeführt)
2. Im AppModule zu entryComponents hinzufügen
3. Registrierung in AppModule des CustomElements
4. Bootstrapping manuell auslösen

1. WebComponent direkt in "index.html" einbinden

1. Output Hashing in "angular.json" deaktivieren
2. concat als Dev Dep installieren: npm i concat --save-dev
3. Build-Task in package.json anpassen: ng build --prod && concat ./dist/WeatherWebComponent/{runtime,es2015-polyfills,polyfills,scripts,main}.js -o ./dist/weathercomponent.js