Angular微前端-初识微前端，如何构建长尾词策略？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1136个文字，预计阅读时间需要5分钟。
微前端教程资源：
- 微前端Angular插件教程：[点击访问](https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf/tutorial/tutorial.md)- 微前端工具教程：[点击访问](https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf-tools/tutorial/index.md)- 各个版本的代码：[点击访问](https://github.com/angular-architects/module-federation-plugin)
微前端github.com/angular-architects/module-federation-plugin/blob/main/libs/mf/tutorial/tutorial.m
github.com/angular-architects/module-federation-plugin/blob/main/libs/mf-tools/tutorial/index.md
各个版本的代码
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-elementnode_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",
打包后的差异介绍
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 也是可以的, 也就是说我们一个主文件不需要一个就行了
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完整地址
github.com/973782523/angular-element
总有一天我也能成为大佬
本文共计1136个文字，预计阅读时间需要5分钟。
微前端教程资源：
- 微前端Angular插件教程：[点击访问](https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf/tutorial/tutorial.md)- 微前端工具教程：[点击访问](https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf-tools/tutorial/index.md)- 各个版本的代码：[点击访问](https://github.com/angular-architects/module-federation-plugin)
微前端github.com/angular-architects/module-federation-plugin/blob/main/libs/mf/tutorial/tutorial.m
github.com/angular-architects/module-federation-plugin/blob/main/libs/mf-tools/tutorial/index.md
各个版本的代码
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-elementnode_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",
打包后的差异介绍
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 也是可以的, 也就是说我们一个主文件不需要一个就行了
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完整地址
github.com/973782523/angular-element
总有一天我也能成为大佬