This project was created to test out Angular Elements.

In order to demonstrate that this project has a html page with Bootstrap 3 and jQuery and a 'part' of the page running Bootstrap 4 and ng-Bootstrap. This is done by using Custom Elements (also called Web Components) to isolate the new functionality from any existing CSS / Javascript.

It shows that you can have a legacy website and upgrade it incremetally instead of having to do a rewrite from scratch.

Here is a link to the running project.

1. ng build --prod --output-hashing none
2. node build-elements
3. http-server dist/angular-elements-example
4. http://localhost:8080/index-elements.html

It was tested on Chrome, Firefox, Edge and Safarri. I didn't add support for Internet Explorer 11, it can be done but the cost v benefit just didn't add up for me...

The project was generated with Angular CLI version 8.3.18.

1. Create Project ng new angular-elements-example

2. Angular Elements ng add @angular/elements

3. Scripting Libraries concat and fs-extra npm install concat --save-dev npm install fs-extra --save-dev

4. Install Polyfills n.b. Shady DOM didnt work from a pollyfill for some reason although it was suggested it would here.

   4a. Add to pillyfills.ts: import '@webcomponents/custom-elements/src/native-shim'; import '@webcomponents/custom-elements/custom-elements.min'; npm i @webcomponents/custom-elements --save

   4b. Remove the script from angular.json "input": "node_modules/document-register-element/build/document-register-element.js"

5. Bootstrap 4 & ng-nootstrap npm install bootstrap@4 --save npm install --save @ng-bootstrap/ng-bootstrap

The npm package http-server is a lightweight ummmm... http server. npm install http-server -g

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.