Micro-frontends with Angular 10 (Modern Web 2020)

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

2. 按一下以編輯母片標題樣式按一下以編輯母片子標題樣式 Micro-frontend with Angular 10 Will 保哥

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

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

5. 微前端 (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（建置有高度彈性、遇到錯誤可迅速回復的站台）

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

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

9. 初始化專案 • 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

10. 移除 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'; }

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

12. 加入 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); } }

13. 關於 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

14. 建置專案 • 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 所有套件的授權聲明 favicon.ico favicon.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 內容

15. 部署 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

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

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

19. 從 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

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

Micro-frontends with Angular 10 (Modern Web 2020)

Will Huang

Micro-frontends with Angular 10 (Modern Web 2020)