01.generate-app-view-todo.sh

01. generate-app-view-todo.sh

ng g application view-todo --style=scss --prefix=view --viewEncapsulation=ShadowDom

# navigate to projects/view-todo/app
ng g module view-todo --flat=true

ng g component view-todo --module=view-todo --selector=view-todo  --entryComponent=true --flat=true

ng g service view-todo --flat=true

02. home.module.ts

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule,
    ViewTodoModule
  ],
})
export class HomeModule {
}

03. home.component.html

<div class="container-fluid">
  <create-todo></create-todo>
  <view-todo></view-todo>
</div>

04. view-todo.module.ts

# make it a web component

@NgModule({
  declarations: [ ViewTodoComponent ],
  providers: [ ViewTodoService ],
  exports: [ ViewTodoComponent ],
  imports: [ CommonModule, BrowserModule, HttpClientModule ],
  entryComponents: [ ViewTodoComponent ],
  bootstrap: [ViewTodoComponent],
})
export class ViewTodoModule {
  constructor(private injector: Injector) {
  }

  ngDoBootstrap() {
    const viewTodoElement = createCustomElement(ViewTodoComponent, {injector: this.injector});
    customElements.define('view-todo-element', viewTodoElement);
  }
}

05. view-todo.js

const fs = require('fs-extra');
const concat = require('concat');
const del = require('del');

(async function build() {
  const files = [
    'dist/view-todo/runtime-es2015.js',
    'dist/view-todo/polyfills-es2015.js',
    'dist/view-todo/main-es2015.js'
  ];
  await del([‘dist/elements/*.js']);
  await fs.ensureDir('dist/elements');
  await concat(files, 'dist/elements/view-todo.js');
})();

06. package.json

"build:view-todo:elements": "ng build view-todo --prod --output-hashing none && node projects/view-todo/build/view-todo.js”

07. angular.json

"micro-frontend-todo": {
    "architect": {
      "build": {
        "options": {
          "scripts": [
            "dist/elements/view-todo.js"
          ]
        }
      }
    }
  }

08. home.component.html

<div class="todo-create-container">
  <view-todo-element></view-todo-element>
  <view-todo></view-todo>
</div>

09. home.module.ts

@NgModule({
  declarations: [HomeComponent],
  imports: [CommonModule, ViewTodoAppModule],
  bootstrap: [HomeComponent],
  entryComponents: [HomeComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class HomeModule {
}

10. angular.json

"view-todo": {
    "projectType": "application",
    "architect": {
      "build": {
        "builder": "@angular-builders/custom-webpack:browser",
        "options": {
          "customWebpackConfig": {
            "path": "projects/view-todo/build/extra-webpack.config.js",
            "mergeStrategies": {
              "externals": "replace"
            }
          }
        }
      }
    }
  }

11. extra-webpack.config.js

module.exports = {
  output: {
    jsonpFunction: 'webpackJsonpViewTodo',
    library: 'viewTodo'
  }
};

12. home.component.html

<!-- Feature toggle -->
<div class="container-fluid" style="width:100%">
  <div *ngIf="!loadElements">
    <view-todo></view-todo>
  </div>
  <div *ngIf="loadElements">
    <view-todo-element></view-todo-element>
  </div>
</div>

13. styles.scss

@import url(‘https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');