{"id":17056299,"url":"https://github.com/biophoton/ng-elements-poc","last_synced_at":"2025-07-29T20:34:34.083Z","repository":{"id":77494363,"uuid":"132963915","full_name":"BioPhoton/ng-elements-poc","owner":"BioPhoton","description":"A step by step description to setup web components with angular \u003e=6","archived":false,"fork":false,"pushed_at":"2018-05-10T23:35:37.000Z","size":191,"stargazers_count":7,"open_issues_count":0,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-12T17:44:33.643Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BioPhoton.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-05-10T23:16:19.000Z","updated_at":"2022-03-09T11:57:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"5a53fe83-e4f2-4c9e-9a22-7a9a1dacb8a1","html_url":"https://github.com/BioPhoton/ng-elements-poc","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BioPhoton/ng-elements-poc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioPhoton%2Fng-elements-poc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioPhoton%2Fng-elements-poc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioPhoton%2Fng-elements-poc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioPhoton%2Fng-elements-poc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BioPhoton","download_url":"https://codeload.github.com/BioPhoton/ng-elements-poc/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioPhoton%2Fng-elements-poc/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267754791,"owners_count":24139435,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T10:23:59.341Z","updated_at":"2025-07-29T20:34:34.075Z","avatar_url":"https://github.com/BioPhoton.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Elements Build Setup\n\nThe dev-kit has a package available for building web components with angular. \nYou can use the `@angular/elements` package for this. \nHere you can follow a step by step setup for angular elements running standalone or in another angular app.\n\n## Setup a new project\n\n1. Create a new project. Run `ng new ng-elements-poc` in the console.\n\n2. Switch into you new directory: `cd ng-elements-poc`\n\n3. You should now be able to test it by running `ng serve --open` in the console.\n\n## Setup WebComponents\n\n1. Run `ng add @angular/elements` in the console.\nThe cli will install some packages to your `package.json`:\n\n```json\n// package.json\n\n{\n[...] \n  depenencies: {\n    [...]\n    \"@angular/elements\": \"^6.0.0\",\n    \"document-register-element\": \"^1.7.2\"\n  }\n[...]\n}\n```\n\nAnd add a script to your projects scripts config in `angular.json`:\n\n```json\n// angular.json\n\n{\n[...]\n  \"projects\": {\n    \"ng-elements-poc\": {\n    [...]\n      \"scripts\": [\n        {\n          \"input\": \"node_modules/document-register-element/build/document-register-element.js\"\n        }\n      ],\n      [...]\n    },\n    [...]\n  },\n  [...]\n}\n```\n\n3. Test the if everything is still working: `ng serve`\n\n## Setup application for standalone web component\n\n1. Generate a new project in which we can test an elements setup.\nRun `ng generate application my-first-element` in the console.\n\n2. Copy the script in your `angular.json` (mentioned in step `Setup WebComponents:1.`) from project `ng-elements-poc` to `my-first-element` scripts:  \n\n```json\n// angular.json\n\n{\n[...]\n  \"projects\": {\n    [...]\n    \"my-first-element\": {\n    [...]\n      \"scripts\": [\n        {\n          \"input\": \"node_modules/document-register-element/build/document-register-element.js\"\n        }\n      ],\n      [...]\n    },\n    [...]\n  },\n  [...]\n}\n```\n\n3. Test it: `ng serve --project my-first-element`\n\n4. Setup a script in your `package.json` to start the `my-first-element` application:\n\n```json\n// package.json\n\n{\n  [...] \n  scripts: {\n  [...]\n   \"first-element:start\": \"ng serve --project my-first-element\",\n  },\n  [...]\n}\n```\n\n5. Test it by running `npm run first-element:start`.\n\n6. Now lets create a build task that we can use later on to generate the bundled web component file. \n   Setup a script in your `package.json` to build the application. \n   Note that we set the flag `output-hashing` to `none` to have the bundles always with the same file names.\n\n```json\n// package.json\n\n{\n  [...] \n  scripts: {\n  [...]\n   \"first-element:build\": \"ng build --prod --project my-first-element --output-hashing=none\"\n  },\n  [...]\n}\n```\n\n7. Run the command and check the file names in the `dist` folder.\n\n8. You can also test the bundles directly. Therefore lets another package:\n\nInstall the `http-server` globally:\n`npm install http-server -g`\n\nNow we can run `http-server .\\dist\\my-first-element\\` in our root folder.\nAs stated in the console we can now access the serve file under `127.0.0.1:8080`.\n\n```\nStarting up http-server, serving .\\dist\\my-first-element\\\nAvailable on:\n  http://192.168.43.58:8080\n  http://127.0.0.1:8080\n```\n\n## Create component and bootstrapping\n\nWe have setup a new project to test standalone web components. Now lets create one. \n\n1. Create a component called `first-element` and set `viewEncapsulation` to `Native`:\n`ng generate component first-element --project my-first-element --spec=false --viewEncapsulation=Native`\n\n3. Remove AppComponent from you project. \n- delete `app.component.ts`, `app.component.html`, `app.component.css`, `app.component.spec.ts`\n- remove all references in `app.module.ts`\n\n4. In `app.module.ts` remove the empty settings and add `FirstElementComponent` to the `entryComponents`\n\n```typescript\n// projects/my-first-element/src/app/app.module.ts\n\nimport { FirstElementComponent } from './first-element/first-element.component';\n\n@NgModule({\n  declarations: [FirstElementComponent],\n  imports: [BrowserModule],\n  // providers: [],\n  // bootstrap: [],\n  entryComponents: [FirstElementComponent]\n})\n```\n\n5. Implement the bootstrapping logic for your component.\n\n```\n// projects/my-first-element/src/app/app.module.ts\n\nimport {Injector, [...]} from '@angular/core';\nimport {createCustomElement, NgElementConfig} from '@angular/elements';\n\n@NgModule({\n[...] \n})\nexport class AppModule {\n  constructor(private injector: Injector) {\n\n  }\n\n  ngDoBootstrap() {\n    const config: NgElementConfig = {injector: this.injector};\n    const ngElement = createCustomElement(FirstElementComponent, config);\n\n    customElements.define('app-first-element', ngElement);\n  }\n\n}\n```\n\n3. In your `index.html` replace `\u003capp-root\u003e\u003c/app-root\u003e` with `\u003capp-first-element\u003e\u003c/app-first-element\u003e`:\n\n\n```html\n\u003c!-- projects/my-first-element/src/index.html --\u003e \n\n[...]\n\u003cbody\u003e\n  \u003c!-- vvv REMOVE vvv\n  \u003capp-root\u003e\u003c/app-root\u003e\n  vvv ADD vvv --\u003e\n  \u003capp-first-element\u003e\u003c/app-first-element\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n``` \n\n4. Test your web component. \nRun `npm run first-element:start`\n\n5. You can also setup a new script in `package.json` to bundle the files to use your web component in another place.\nLet's introduce the `bundle-standalone` script. \n\n```json\n// package.json\n\n{\n  [...]\n  \"first-element:bundle-standalone\": \"cat dist/my-first-element/{runtime,polyfills,scripts,main}.js \u003e dist/my-first-element/my-first-element-standalone.js\",\n}\n```\n\n6. Run `npm run first-element:bundle-standalone` in the console to test it.\n\n\n# Test web component in another angular app\n\n1. Setup new script in `package.json` to bundle the files for another angular project\n\n```json\n// package.json\n\n{\n  [...]\n  \"first-element:bundle-ng\": \"cat dist/my-first-element/{runtime,main}.js \u003e dist/my-first-element/my-first-element-ng.js\",\n}\n```\n\n2. Run `npm run first-element:bundle-ng` in the console to test it.\n\n3. Copy `dist/my-first-element/my-first-element-ng.js` into \n`src/assets/ng-elements` to serve this file as an asset of your root project.\n\n4. In your root application `ng-elements-poc` open `app.module.ts`\n\nAdd the following to your ngModule decorator:\n\n```\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA]\n})\n```\n\nAnd insert following code to `AppModule` constructor\n\n```typescript\nexport class AppModule {\n\n  constructor() {\n    const scriptTag = document\n          .createElement(`script`);\n        scriptTag.setAttribute('src', 'assets/elements/my-first-element-ng.js');\n        scriptTag.setAttribute('type', 'text/javascript');\n\n    document.body.appendChild(scriptTag);\n  }\n\n}\n```\n\n5. Add the html tag into your `app.component.html`\n```html\n\u003c!-- src/app/app.component.html --\u003e\n\n[...]\n\u003capp-first-element\u003e\u003c/app-first-element\u003e\n```\n\n# Using multiple element bundles in one app\n\nTest test if we can use multiple elements we can test **a** multiple elements in the same bundle and **b** multiple elements in different bundles.\n\nLet's start with **b** multiple elements in a different bundle.\n\n1. Create a new project name `my-other-element`. Do this by following the steps from [Setup application for standalone web component]() and [Create component and bootstrapping]()\n\n2. Create npm scripts for copying the files over into `src/assets/elements`\n\n```json\n// package.json\n\n{\n  [...]\n  \"first-element:copy-bundle\": \"cat dist/my-first-element/my-first-element-ng.js \u003e src/assets/ng-elements/my-first-element-ng.js\",\n  \"other-element:copy-bundle\": \"cat dist/my-other-element/my-other-element-ng.js \u003e src/assets/ng-elements/my-other-element-ng.js\",\n  \"copy-bundles\": \"npm run first-element:copy-bundle \u0026\u0026 npm run other-element:copy-bundle\"\n}\n```\n\n2. In your root application `ng-elements-poc` open `app.module.ts`\n   \n   Refactor the creation of the script into a separate function:\n   \n   ```typescript\n   export class AppModule {\n   \n     constructor() {\n       const bundles = ['my-first-element-ng', 'my-other-element-ng'];\n       \n       bundles\n        .forEach(name =\u003e document.body.appendChild(this.getScriptTag(name)));\n      \n     }\n     \n     getScriptTag(fileName: string): HTMLElement {\n        const scriptTag = document\n          .createElement(`script`);\n    \n        scriptTag.setAttribute('src', `assets/ng-elements/${fileName}.js`);\n        scriptTag.setAttribute('type', 'text/javascript');\n    \n        return scriptTag;\n     }\n      \n   }\n   ```\n \n5. Add the html tag into your `app.component.html`\n```html\n\u003c!-- src/app/app.component.html --\u003e\n\n[...]\n\u003capp-other-element\u003e\u003c/app-other-element\u003e\n```\n\n6. Test it. Run following commands:\n\n```\nnpm run first-element:build\nnpm run first-element:bundle-ng\nnpm run other-element:build\nnpm run other-element:bundle-ng\nnpm run copy-bundles\n```\n\n## Setup for IE !!! In progress !!!\n\n1. In your `angular.json` remove the a scripts your `my-elements` `scripts` section. \nIt will fail in IE/Edge. \n\n```json\n{\n  [...]\n  // vvvv REMOVE vvvv\n  \"scripts\": [\n    {\n      \"input\": \"node_modules/document-register-element/build/document-register-element.js\"\n    }\n  ]\n}\n```\n\n2. `npm i @webcomponents/custom-elements --save`\n\n3. In the `my-elements` project folder add the below polyfill to your `polyfills.ts`.\n\n```typescript\nimport '@webcomponents/custom-elements/custom-elements.min.js';\nimport '@webcomponents/custom-elements/src/native-shim.js'\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiophoton%2Fng-elements-poc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbiophoton%2Fng-elements-poc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiophoton%2Fng-elements-poc/lists"}