https://github.com/biophoton/ng-elements-poc
A step by step description to setup web components with angular >=6
https://github.com/biophoton/ng-elements-poc
Last synced: 11 months ago
JSON representation
A step by step description to setup web components with angular >=6
- Host: GitHub
- URL: https://github.com/biophoton/ng-elements-poc
- Owner: BioPhoton
- Created: 2018-05-10T23:16:19.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-10T23:35:37.000Z (about 8 years ago)
- Last Synced: 2025-04-12T17:44:33.643Z (about 1 year ago)
- Language: TypeScript
- Size: 187 KB
- Stars: 7
- Watchers: 4
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular Elements Build Setup
The dev-kit has a package available for building web components with angular.
You can use the `@angular/elements` package for this.
Here you can follow a step by step setup for angular elements running standalone or in another angular app.
## Setup a new project
1. Create a new project. Run `ng new ng-elements-poc` in the console.
2. Switch into you new directory: `cd ng-elements-poc`
3. You should now be able to test it by running `ng serve --open` in the console.
## Setup WebComponents
1. Run `ng add @angular/elements` in the console.
The cli will install some packages to your `package.json`:
```json
// package.json
{
[...]
depenencies: {
[...]
"@angular/elements": "^6.0.0",
"document-register-element": "^1.7.2"
}
[...]
}
```
And add a script to your projects scripts config in `angular.json`:
```json
// angular.json
{
[...]
"projects": {
"ng-elements-poc": {
[...]
"scripts": [
{
"input": "node_modules/document-register-element/build/document-register-element.js"
}
],
[...]
},
[...]
},
[...]
}
```
3. Test the if everything is still working: `ng serve`
## Setup application for standalone web component
1. Generate a new project in which we can test an elements setup.
Run `ng generate application my-first-element` in the console.
2. Copy the script in your `angular.json` (mentioned in step `Setup WebComponents:1.`) from project `ng-elements-poc` to `my-first-element` scripts:
```json
// angular.json
{
[...]
"projects": {
[...]
"my-first-element": {
[...]
"scripts": [
{
"input": "node_modules/document-register-element/build/document-register-element.js"
}
],
[...]
},
[...]
},
[...]
}
```
3. Test it: `ng serve --project my-first-element`
4. Setup a script in your `package.json` to start the `my-first-element` application:
```json
// package.json
{
[...]
scripts: {
[...]
"first-element:start": "ng serve --project my-first-element",
},
[...]
}
```
5. Test it by running `npm run first-element:start`.
6. Now lets create a build task that we can use later on to generate the bundled web component file.
Setup a script in your `package.json` to build the application.
Note that we set the flag `output-hashing` to `none` to have the bundles always with the same file names.
```json
// package.json
{
[...]
scripts: {
[...]
"first-element:build": "ng build --prod --project my-first-element --output-hashing=none"
},
[...]
}
```
7. Run the command and check the file names in the `dist` folder.
8. You can also test the bundles directly. Therefore lets another package:
Install the `http-server` globally:
`npm install http-server -g`
Now we can run `http-server .\dist\my-first-element\` in our root folder.
As stated in the console we can now access the serve file under `127.0.0.1:8080`.
```
Starting up http-server, serving .\dist\my-first-element\
Available on:
http://192.168.43.58:8080
http://127.0.0.1:8080
```
## Create component and bootstrapping
We have setup a new project to test standalone web components. Now lets create one.
1. Create a component called `first-element` and set `viewEncapsulation` to `Native`:
`ng generate component first-element --project my-first-element --spec=false --viewEncapsulation=Native`
3. Remove AppComponent from you project.
- delete `app.component.ts`, `app.component.html`, `app.component.css`, `app.component.spec.ts`
- remove all references in `app.module.ts`
4. In `app.module.ts` remove the empty settings and add `FirstElementComponent` to the `entryComponents`
```typescript
// projects/my-first-element/src/app/app.module.ts
import { FirstElementComponent } from './first-element/first-element.component';
@NgModule({
declarations: [FirstElementComponent],
imports: [BrowserModule],
// providers: [],
// bootstrap: [],
entryComponents: [FirstElementComponent]
})
```
5. Implement the bootstrapping logic for your component.
```
// projects/my-first-element/src/app/app.module.ts
import {Injector, [...]} from '@angular/core';
import {createCustomElement, NgElementConfig} from '@angular/elements';
@NgModule({
[...]
})
export class AppModule {
constructor(private injector: Injector) {
}
ngDoBootstrap() {
const config: NgElementConfig = {injector: this.injector};
const ngElement = createCustomElement(FirstElementComponent, config);
customElements.define('app-first-element', ngElement);
}
}
```
3. In your `index.html` replace `` with ``:
```html
[...]