micro-frontend-codejam-create

01.generate-app-create-todo.sh

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

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

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

ng g service create-todo --flat=true

02.home.module.ts

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

03.home.component.html

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

04.create-todo.module.ts

# make it a web component

@NgModule({
  declarations: [ CreateTodoComponent ],
  providers: [ CreateTodoService ],
  exports: [ CreateTodoComponent ],
  imports: [ CommonModule, BrowserModule, FormsModule, HttpClientModule ],
  entryComponents: [ CreateTodoComponent ],
  bootstrap: [CreateTodoComponent],
})
export class CreateTodoModule {
  constructor(private injector: Injector) {
  }

  ngDoBootstrap() {
    const createTodoElement = createCustomElement(CreateTodoComponent, {injector: this.injector});
    customElements.define('create-todo-element', createTodoElement);
  }
}

05.create-todo.js

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

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

06.package.json

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

07.angular.json

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

08.home.component.html

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

09.home.module.ts

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

10.angular.json

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

11.extra-webpack.config.js

module.exports = {
  output: {
    jsonpFunction: 'webpackJsonpCreateTodo',
    library: 'createTodo'
  }
};

12.home.component.html

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

13. styles.scss

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

home.component.scss

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