angular微前端-初識微前端

微前端

https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf/tutorial/tutorial.m
https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf-tools/tutorial/index.md

各個版本的代碼

https://github.com/manfredsteyer/multi-framework-version/blob/main/projects/shell/src/app/app.routes.ts

本質跟jq差不多, 插過來

原件化

ng new --create-application=false  mfdemo1 && cd mfdemo1
// 新建兩個項目
ng g application mfdemo1 --routing --style=scss
ng g application mf-element1 --routing --style=scss
// 自定義元素
ng add @angular/elements --project=mfdemo1
// 擴展 Angular CLI 的默認構建行爲
ng add ngx-build-plus --project=mfddemo1
或者把對應的mf-element1的angular改下
          "builder": "ngx-build-plus:build",
//          "builder": "@angular-devkit/build-angular:browser",

兩個項目其實也可以這樣執行

 "start:shell": "ng serve shell  -o --port 5000",
 "start:mfe1": "ng serve mfe1 -o --port 3000",
 需要去掉angular.json
defaultProject的屬性

我們在組件裏面mf-element1項目中app.module.ts去掉

import {createCustomElement} from "@angular/elements";
import {Injector, NgModule} from '@angular/core';
@Component({
 // selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

@NgModule({
  providers: [],
//  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(private injector: Injector) {
  }

  ngDoBootstrap(): void {
    const customElement = createCustomElement(AppComponent, {injector: this.injector})
    // 原生自定義元素的方法
    customElements.define('mf-element1', customElement)
  }
}

關於Polyfills設定

如果在非angular的項目使用, 引入zone.js

  • node_modules/zone.js/dist/zone.min.js

如果你的項目不支持自定義元素Polyfills(IE11)

  • 執行ng add @angular/elements 自定義會引入document-register-element
  • node_modules/document-register-element/build/document-register-element.js

打包

選項--prod是--configuration="production"的別名。但是--prod命令行參數在 Angular 12 中已被棄用。

// 打包的時候取消哈希的設置
   "build:mfdemo1": "ng build --project=mfdemo1 --configuration production --output-hashing=none",
   "build:mf-element1": "ng build --project=mf-element1 --configuration production --output-hashing=none --single-bundle",
// 把主要的兩個文件拷到主要文件裏面
    "build:mf-element1:deploy": "cp dist/mf-element1/main.js dist/mfdemo1/mf-element1.js & cp dist/mf-element1/polyfills.js dist/mfdemo1/mf-polyfills.js",
// yarn add lite-server  -D
 "serve:mfdemo1": "cd dist/mfdemo1 && lite-server",

介紹https://github.com/manfredsteyer/ngx-build-plus

ng build --single-bundle
:將所有可從主入口點訪問的內容放入一個包中。Polyfill、腳本和樣式保留在自己的包中,因爲消費應用程序可能有自己的版本。

打包後的差異

main.js  主要程式
mfmemo2 會把 runtime.js合併到 main.js

我們在主文件的index.html裏面

執行

執行 start serve:mfdemo1

看看index.html


<!DOCTYPE html><html lang="en"><head>
  <meta charset="utf-8">
  <title>Mfdemo1</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<!--<link rel="stylesheet" href="styles.css"></head>-->
<body>
<!--  <app-root></app-root>-->
<!--<script src="runtime.js" defer></script><script src="polyfills.js" defer></script><script src="main.js" defer></script>-->
<h1>ok</h1>
<mf-element1></mf-element1>
<script src="mf-polyfills.js"></script>
<script src="mf-element1.js"></script>
</body></html>

我們知道把mf-polyfills.js改成zone.min.js 也是可以的, 也就是說我們一個主文件不需要一個就行了

Angular 載入Angular Element

yarn add @angular-extensions/elements

導入到AppModule

 import {LazyElementsModule} from "@angular-extensions/elements";
import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';

imports: [
    BrowserModule,
    AppRoutingModule,
 +    LazyElementsModule
  ],
 schemas:[CUSTOM_ELEMENTS_SCHEMA],

app.component.ts, 自定義載入

<elementUrl *axLazyElement="elementUrl"></elementUrl>

  elementUrl = "/mf-element1.js"

然後執行

 yarn build:mfdemo1  打包主程序
 yarn build:mf-element1:deploy  把我們的包引過來
 yarn serve:mfdemo1  執行下打包後的index.html

demo完整地址

https://github.com/973782523/angular-element

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章