This is based on blogs around the release of Angular 6.

1. Add these packages to npm
   

   ng add @angular/elements

2. in the app-module
   1. add these imports 
      

      import { Injector} from '@angular/core'; // for elements
      import { createCustomElement } from '@angular/elements'; // for elements

   2. replace: bootstrap: [YourAppComponentName]
      with: entryComponents: [YourAppComponentName]
3. replace: export class AppModule {} with
   

   export class AppModule {
     constructor(privateinjector:Injector) {
       const tag=createCustomElement(YourAppComponentName, { injector });
       customElements.define('your-tag-name', tag);
     }
     ngDoBootstrap() {}
   }

4. Add the necessary polyfills as recommended in this SO thread
   • if you're building to ES5 and only need to ensure it works in chrome, add this after the section * APPLICATION IMPORTS:
     
     import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
5. ...