This project was generated with Angular CLI version 6.0.8.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.
Run npm run build && npm run package
Import dist/ng-button-element.js in HTML to use. See index.html in parent folder
- ng add @angular/elements
- npm i @webcomponents/custom-elements --save
- Add two new imports in polyfills.ts import '@webcomponents/custom-elements/src/native-shim'; import '@webcomponents/custom-elements/custom-elements.min';
- ng g component ng-button --inline-style --inline-template -v Native
- Update AppModule.ts
Inject Injector - constructor(private injector: Injector) {}
Add entry component - entryComponents: [NgButtonComponent]
Remove bootstrap
Hook up ngDoBootstrap Create customelement using createCustomElement
Export custom element using customElements.define - Update Package.json "package": "cat ./dist/angular-web-component-example/runtime.js ./dist/angular-web-component-example/polyfills.js ./dist/angular-web-component-example/scripts.js ./dist/angular-web-component-example/main.js > dist/ng-button-element.js"
- For easy packaging control install npm install --save-dev concat fs-extra
- Update Package.json "build:elements": "ng build --prod --output-hashing none && node build-elements.js",
- Run npm run build:elements