当前位置 : 主页 > 编程语言 > 其它开发 >

angular微前端-初识微前端

来源:互联网 收集:自由互联 发布时间:2022-07-03
微前端 https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf/tutorial/tutorial.mhttps://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf-tools/tutorial/index.md 各个版本的代码 htt
微前端
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

决定自己的高度的是你的态度,而不是你的才能 记得我们是终身初学者和学习者

总有一天我也能成为大佬

上一篇:java第一周学习
下一篇:没有了
网友评论