狠狠撸

按一下以編輯母片標題樣式
按一下以編輯母片子標題樣式
我是［黃保翕］
Will 保哥
多奇數位創意有限公司技術總監
https://blog.miniasp.com
Find me at
https://www.facebook.com/will.fans

Micro-frontend with
Angular 10
Will 保哥

Micro-frontends with Angular 10
使用 Angular 10 實現微前端
Implementing Micro-frontends with Angular 10
將元件整合進不同的前端框架
Integrate Angular 10 components into other frameworks
何謂微前端
What is Micro-frontends?

Micro-frontends with Angular 10
使用 Angular 10 實現微前端
Implementing Micro-frontends with Angular 10
將元件整合進不同的前端框架Integrate Angular 10 components into other frameworks
何謂微前端
What is Micro-frontends?

微前端 (Micro Frontends)
? 最早出現於 2016 年 ThoughtWorks 的技術雷達
? 借用微服務架構 (Microservices) 許多概念與作法
? 有效解構大型前端架構下的各種相依、協作、整合等問題
? Be Technology Agnostic（不限定各團隊所採用的前端技術）
? Isolate Team Code（不同的團隊代碼必須彼此隔離以降低相依性）
? Establish Team Prefixes（建立團隊之間的命名規則以降低資源衝突）
? Favor Native Browser Features over Custom APIs（使用原生 API 為
主）
? Build a Resilient Site（建置有高度彈性、遇到錯誤可迅速回復的站台）

將頁面分割為不同的 Web 元件
https://www.toptal.com/front-end/micro-frontends-strengths-benefits

套用微前端架構的 HTML 結構範例
可動態載入外部 JS 檔案
自訂元素 (Custom Elements)
Custom Elements (V1)

初始化專案
? ng new --create-application=false mfdemo1 && cd mfdemo1
? ng g application mfdemo1 --routing --style=css
? ng g application mf-element1 --routing=false --style=css
? ng add @angular/elements --project=mf-element1
? ng add ngx-build-plus --project=mf-element1

移除 AppComponent 的 selector 屬性
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'mf-element1';
}

移除 AppModule 的 bootstrap 屬性
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: []
, bootstrap: [AppComponent]
})
export class AppModule { … }

加入 AppModule 的 ngDoBootstrap()
import { Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
@NgModule(…)
export class AppModule {
constructor(private injector: Injector) {}
ngDoBootstrap(): void {
const customElement = createCustomElement(AppComponent, { injector: this.injector });
customElements.define('mf-element1', customElement);
}
}

關於 Polyfills 設定
? 使用於 non-Angular 網頁環境需額外載入 zone.js 才能執行
? node_modules/zone.js/dist/zone.min.js
? 針對不支援 Custom Elements (V1) 的瀏覽器提供 Polyfills
(IE11)
? 在執行 ng add @angular/elements 的時候會自動加入 document-register-element 套件
? node_modules/document-register-element/build/document-register-element.js
? 其他可能需要的 Polyfills 套件
? ng g ngx-build-plus:wc-polyfill --project mf-element1
? npm install core-js@2

建置專案
? ng build --project=mfdemo1 --prod --output-hashing=none
? ng build --project=mf-element1 --prod --output-hashing=none --single-bundle
mfdemo1 mf-element1 說明
3rdpartylicenses.txt 3rdpartylicenses.txt 所有套件的授權聲明
favicon1.ico favicon1.ico 網站的 Favicon 圖檔
index.html index.html 網站預設首頁
main.js main.js 主要程式
runtime.js 內容被合併至 main.js 執行 Angular 所需的共用程式
polyfills.js polyfills.js 支援舊版瀏覽器所需的 Polyfills
styles.css styles.css 全站共用的 CSS 內容

部署 Angular Elements 與 Polyfills
? 複製主程式與 Polyfills
? cp dist/mf-element1/main.js dist/mfdemo1/mf-element1.js
? cp dist/mf-element1/polyfills.js dist/mfdemo1/mf-polyfills.js
? 僅複製必要的 zone.js 與 document-register-element.js
? cp node_modules/zone.js/dist/zone.min.js dist/mf-element1/zone.min.js
? cp node_modules/document-register-element/build/document-register-element.js dist/mf-
element1/document-register-element.js
? 注意事項：請不要在 main.ts 匯入 zone.js
? import 'zone.js/dist/zone';
? Configuring CommonJS dependencies

非 Angular 網頁嵌入 Angular Elements
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mfdemo1</title>
</head>
<body>
<mf-element1></mf-element1>
<script src=/slideshow/microfrontends-with-angular-10/239038336/"mf-polyfills.js" defer></script>
<script src="mf-element1.js" defer></script>
</body>
</html>

非 Angular 網頁嵌入 Angular Elements
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mfdemo1</title>
</head>
<body>
<mf-element1></mf-element1>
<script src=/slideshow/microfrontends-with-angular-10/239038336/"zone.min.js" defer></script>
<script src="mf-element1.js" defer></script>
</body>
</html>

從 Angular 載入 Angular Elements
? 安裝 Angular Extensions Elements 套件
? npm i @angular-extensions/elements
? 匯入 LazyElementsModule 至 AppModule 的 imports 屬性
? import { LazyElementsModule } from '@angular-extensions/elements';
? 加入 CUSTOM_ELEMENTS_SCHEMA 至 AppModule 的 schemas 屬性
? schemas: [CUSTOM_ELEMENTS_SCHEMA]
? 使用 *axLazyElement 結構型指令
? <mf-element1 *axLazyElement="'/mf-element1.js'"></mf-element1>
? The Best Way To Lazy Load Angular Elements | by Tomas Trajan
? Angular Elements Demo

歡迎將
講者照片
裁成圓形
置於此處
我是［黃保翕］
Will 保哥
多奇數位創意有限公司技術總監
https://blog.miniasp.com
Find me at
https://www.facebook.com/will.fans

狠狠撸

Micro-frontends with Angular 10 (Modern Web 2020)

Recommended

More Related Content

What's hot (20)

Similar to Micro-frontends with Angular 10 (Modern Web 2020) (20)

More from Will Huang (20)

Micro-frontends with Angular 10 (Modern Web 2020)

Editor's Notes