微前端
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