paul58914080/01. generate-view-todo.md

## 01. generate-view-todo.md

      
    Raw
  

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

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

      
    Raw
  

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


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

      
    Raw
  

              04.  projects\view-todo\app-generate-m-c-s.md
            
          
    $ ng g module view-todo --flat=true --project=view-todo
$ ng g component view-todo --module=view-todo --selector=view-todo --entryComponent=true --flat=true --project=create-todo
$ ng g service view-todo --project=view-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 {ViewTodoModule} from '../../../projects/view-todo/src/app/view-todo.module';

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

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

## 07. web-component.md

      
    Raw
  

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

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


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

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

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

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

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

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


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

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

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

## 14. custom-webpack.md

      
    Raw
  

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

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

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

## 17. angular.json
"micro-frontend-todo": {
    "architect": {
      "build": {
        "options": {
          "scripts": [
              {
                "input": "node_modules/document-register-element/build/document-register-element.js"
              },
              "dist/elements/view-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\view-todo\src\app\view-todo.component.scss
@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css");

## 21. projects\view-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 {ViewTodoModule} from '../../../projects/view-todo/src/app/view-todo.module';

	@NgModule({
	declarations: [ HomeComponent ],
	imports: [
	CommonModule,
	ViewTodoModule
	]
	})
	export class HomeModule {
	}
	import {Injector, NgModule} from '@angular/core';
	import { CommonModule } from '@angular/common';
	import { ViewTodoComponent } from './view-todo.component';
	import {BrowserModule} from '@angular/platform-browser';
	import {createCustomElement} from '@angular/elements';



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

	ngDoBootstrap() {
	const viewTodoElement = createCustomElement(ViewTodoComponent, { injector: this.injector });
	customElements.define('view-todo-element', viewTodoElement);
	}
	}
	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/view-todo.js']);
	await fs.ensureDir('dist/elements');
	await concat(files, 'dist/elements/view-todo.js');
	})();
	export const environment = {
	production: false,
	loadBootstrap: true
	};
	export const environment = {
	production: true,
	loadBootstrap: false
	};
	import {Injector, NgModule} from '@angular/core';
	import {CommonModule} from '@angular/common';
	import {ViewTodoComponent} from './view-todo.component';
	import {BrowserModule} from '@angular/platform-browser';
	import {createCustomElement} from '@angular/elements';
	import {environment} from '../environments/environment';


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

	ngDoBootstrap() {
	const viewTodoElement = createCustomElement(ViewTodoComponent, { injector: this.injector });
	customElements.define('view-todo-element', viewTodoElement);
	}
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Web component</title>
	</head>
	<body>
	<view-todo-element></view-todo-element>
	<script type='application/javascript' src='view-todo.js'></script>
	</body>
	</html>
	"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"
	}
	}
	}
	}
	}
	}
	module.exports = {
	output: {
	jsonpFunction: 'webpackJsonpViewTodo'
	}
	};
	"micro-frontend-todo": {
	"architect": {
	"build": {
	"options": {
	"scripts": [
	{
	"input": "node_modules/document-register-element/build/document-register-element.js"
	},
	"dist/elements/view-todo.js"
	]
	}
	}
	}
	}