paul58914080/01. generate-create-todo.md

## 01. generate-create-todo.md

      
    Raw
  

              01. generate-create-todo.md
            
          
    $ ng g application create-todo --style=scss --prefix=create --viewEncapsulation=ShadowDom --routing=false

  
## 02. projects\create-todo\app\delete-app-content.md

      
    Raw
  

              02. projects\create-todo\app\delete-app-content.md
            
          
    Only delete the content inside projects/create-todo/app and not the app directory


## 04. projects\create-todo\app-generate-m-c-s.md

      
    Raw
  

              04. projects\create-todo\app-generate-m-c-s.md
            
          
    $ ng g module create-todo --flat=true --project=create-todo
$ ng g component create-todo --module=create-todo --selector=create-todo  --entryComponent=true --flat=true --project=create-todo
$ ng g service create-todo --flat=true --project=create-todo

  
## 05. src\app\home\home.module.ts
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {HomeComponent} from './home.component';
import {CreateTodoModule} from '../../../projects/create-todo/src/app/create-todo.module';

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

## 06. src\app\home\home.component.html
<div class="container-fluid">
  <create-todo></create-todo>
</div>

## 07. web-component.md

      
    Raw
  

              07. web-component.md
            
          
    $ ng add @angular/elements --project=create-todo

  
## 08. projects\create-todo\src\app\create-todo.module.ts
import {Injector, NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {CreateTodoComponent} from './create-todo.component';
import {BrowserModule} from '@angular/platform-browser';
import {createCustomElement} from '@angular/elements';


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

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

## 09. projects\create-todo\build\bundle.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/create-todo.js']);
  await fs.ensureDir('dist/elements');
  await concat(files, 'dist/elements/create-todo.js');
})();

## 10. projects\create-todo\src\environments\environment.ts
export const environment = {
  production: false,
  loadBootstrap: true
};

## 11. projects\create-todo\src\environments\environment.prod.ts
export const environment = {
  production: true,
  loadBootstrap: false
};

## 12. projects\create-todo\src\app\create-todo.module.ts
import {Injector, NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {CreateTodoComponent} from './create-todo.component';
import {BrowserModule} from '@angular/platform-browser';
import {createCustomElement} from '@angular/elements';
import {environment} from '../environments/environment';


@NgModule({
  declarations: [ CreateTodoComponent ],
  imports: [
    CommonModule,
    BrowserModule
  ],
  entryComponents: [ CreateTodoComponent ],
  bootstrap: environment.loadBootstrap? [ CreateTodoComponent ] : [],
  exports: [ CreateTodoComponent ]
})
export class CreateTodoModule {
  constructor(private injector: Injector) {
  }

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

## 13. dist\elements\index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Web component</title>
</head>
<body>
<create-todo-element></create-todo-element>
<script type='application/javascript' src='create-todo.js'></script>
</body>
</html>

## 14. custom-webpack.md

      
    Raw
  

              14. custom-webpack.md
            
          
    $ npm i --save @angular-builders/custom-webpack

  
## 15. 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"
            }
          }
        }
      }
    }
  }

## 16. projects\create-todo\build\extra-webpack.config.js
module.exports = {
  output: {
    jsonpFunction: 'webpackJsonpCreateTodo'
  }
};

## 17. angular.json
"micro-frontend-todo": {
    "architect": {
      "build": {
        "options": {
          "scripts": [
              {
                "input": "node_modules/document-register-element/build/document-register-element.js"
              },
              "dist/elements/create-todo.js"
            ]
        }
      }
    }
  }

## 18. src\app\home\home.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'todo-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  loadElement = false;

  constructor() { }

  ngOnInit() {
  }

}

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

## 20. projects\create-todo\src\app\create-todo.component.scss
@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css");

## 21. projects\create-todo\src\styles.scss
@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css");
	import {NgModule} from '@angular/core';
	import {CommonModule} from '@angular/common';
	import {HomeComponent} from './home.component';
	import {CreateTodoModule} from '../../../projects/create-todo/src/app/create-todo.module';

	@NgModule({
	declarations: [ HomeComponent ],
	imports: [
	CommonModule,
	CreateTodoModule
	]
	})
	export class HomeModule {
	}
	<div class="container-fluid">
	<create-todo></create-todo>
	</div>
	import {Injector, NgModule} from '@angular/core';
	import {CommonModule} from '@angular/common';
	import {CreateTodoComponent} from './create-todo.component';
	import {BrowserModule} from '@angular/platform-browser';
	import {createCustomElement} from '@angular/elements';


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

	ngDoBootstrap() {
	const createTodoElement = createCustomElement(CreateTodoComponent, { injector: this.injector });
	customElements.define('create-todo-element', createTodoElement);
	}
	}
	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/create-todo.js']);
	await fs.ensureDir('dist/elements');
	await concat(files, 'dist/elements/create-todo.js');
	})();
	export const environment = {
	production: false,
	loadBootstrap: true
	};
	export const environment = {
	production: true,
	loadBootstrap: false
	};
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Web component</title>
	</head>
	<body>
	<create-todo-element></create-todo-element>
	<script type='application/javascript' src='create-todo.js'></script>
	</body>
	</html>
	"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"
	}
	}
	}
	}
	}
	}
	module.exports = {
	output: {
	jsonpFunction: 'webpackJsonpCreateTodo'
	}
	};
	"micro-frontend-todo": {
	"architect": {
	"build": {
	"options": {
	"scripts": [
	{
	"input": "node_modules/document-register-element/build/document-register-element.js"
	},
	"dist/elements/create-todo.js"
	]
	}
	}
	}
	}