目录

系列文章目录

前言

一、什么是portal、什么是子应用

二、使用步骤

1.配置portal

1-1.主应用（portal）安装版本对应的依赖包

1-2.主应用（portal）app.module.ts 引入NgxPlanetModule

1-3主应用（portal）使用Planet服务

2.配置子应用

2-1.子应用安装angular版本对应的依赖包

2-2.创建一个custom-webpack用的配置文件extra-webpack.config.js

2-3.子应用用添加一个路由输出用的组件（TenAppRouterOutLetComponent）以及关联配置：

2-4.子应用angular.json配置：

2-5 package.json

2-6.子应用通过defineApplication定义如何启动子应用的AppModule, 同时可以设置PlanetPortalApplication服务为主应用的全局服务

2-7 启动测试

3.portal 注册子应用

3-1.portal app.component.ts 注册子应用

3-3.app-routing.module.ts 添加路由

4.总结

5.报错处里 及注意事项

报错 An accessor cannot be declared in an ambient context.

---

前言

为了解决部门前端因随着功能的叠加导致前端工程的越发膨大；可维护性逐渐降低（例如到部署到k8s、run pipeline 时间越来越长，本地任意的改动dev-server重新呈现都越来越费时，不同团队都放置一个git仓库越发的乱，分支数倍增，升级难...）可谓是牵一发何止动全身的问题；最终实现将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，这些小块可以有独立的依赖，独立的样式，可以单独的升级，而在用户看来仍然是内聚的单个产品。

注：本文只教你如何快速基于ngx-planet快速搭建出Angular微前端，（不介绍 git cicd的配置，k8s的配置，sonarqube 配置.... 即自动化（自动部署）流程不做任何介绍）；其他的（例如：样式分离，样式按需应用）有空再补充。

angular-projects-webs · GitLab

一、什么是portal、什么是子应用

portal ：是所有子应用的入口，一般提供子应用的挂载，子应用的基底（公共）数据和（公共）serve。longin(即登录)、主页一般也放在实现。

子应用：就是功能模块，例如新开的专案。

二、使用步骤

1.配置portal

angular8 新创建的项目v8-portal-web为例.

1-1.主应用（portal）安装版本对应的依赖包

@angular/cdk

@worktile/planet

 npm install @angular/cdk@8 --save --force

npm install @worktile/planet@^1.2.4 --save --force

1-2.主应用（portal）app.module.ts 引入NgxPlanetModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxPlanetModule } from '@worktile/planet';@NgModule({declarations: [AppComponent],imports: [BrowserModule,AppRoutingModule,NgxPlanetModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

1-3主应用（portal）使用Planet服务

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Planet, SwitchModes } from '@worktile/planet';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {get loadingDone() {return this.planet.loadingDone;}constructor(private planet: Planet,private router: Router) {}ngOnInit() {this.planet.setOptions({switchMode: SwitchModes.default,errorHandler: error => {console.error(`Failed to load resource, error:`, error);}});// common Dataathis.planet.setPortalAppData({foundationSvc: {}});// 注册子应用this.planet.registerApps([]);// start monitor route changes// get apps to active by current path// load static resources which contains javascript and css// bootstrap angular sub app module and show itthis.planet.start();}gotoDomePage(event: any) {this.router.navigate([`/admin/dome-page`]);}
}

2.配置子应用

angular10 新创建的项目ten-web为例.

2-1.子应用安装angular版本对应的依赖包

@angular/cdk

@worktile/planet

@angular-builders/custom-webpack

 npm install @angular/cdk@10 --save --force

npm install @worktile/planet@^10 --save --force

npm install @angular-builders/custom-webpack@10 --save-dev 

其他可选依赖

webpack-assets-manifest: "^4.0.6"

concurrently

2-2.创建一个custom-webpack用的配置文件extra-webpack.config.js

const WebpackAssetsManifest = require('webpack-assets-manifest');
// const PrefixWrap = require('@worktile/planet-postcss-prefixwrap');module.exports = {optimization: {runtimeChunk: false},plugins: [new WebpackAssetsManifest()],// module: {//     rules: [//         {//             test: /\.scss$/,//             use: [//                 {//                     loader: 'postcss-loader',//                     options: {//                         plugins: [//                             PrefixWrap('.ten-web', {//                                 hasAttribute: 'planet-inline',//                                 prefixRootTags: true//                             })//                         ]//                     }//                 },//                 'sass-loader'//             ]//         }//     ]// }
};

2-3.子应用用添加一个路由输出用的组件（TenAppRouterOutLetComponent）以及关联配置：

import { Component } from '@angular/core';@Component({selector: 'ten-app-router-outlet',template: '<router-outlet></router-outlet>'
})
export class TenAppRouterOutLetComponent {
}

子应用ten-app.module.ts ：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';import { TenAppRoutingModule } from './ten-app-routing.module';
import { TenAppComponent } from './ten-app.component';
import { TenAppRouterOutLetComponent } from './ten-app-router-outlet-component';
import { ProjectsModule } from 'src/projects/projects.module';@NgModule({declarations: [TenAppComponent, // root 组件TenAppRouterOutLetComponent // 子应用输出组件],imports: [BrowserModule,TenAppRoutingModule,ProjectsModule],providers: [],bootstrap: [TenAppComponent]
})
export class TenAppModule { }

子应用ten-app-routing.module.ts：配置router

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DomePageComponent } from 'src/projects/dome-page/dome-page.component';
import { TenAppRouterOutLetComponent } from './ten-app-router-outlet-component';const routes: Routes = [{path: 'ten',component: TenAppRouterOutLetComponent,children: [{path: 'dome-page',component: DomePageComponent,}]}];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class TenAppRoutingModule { }

2-4.子应用angular.json配置：

      "architect": {"build": {"builder": "@angular-builders/custom-webpack:browser","options": {"customWebpackConfig": {"path": "src/extra-webpack.config.js","mergeStrategies": {"module.rules": "prepend"},"replaceDuplicatePlugins": true},"vendorChunk": false,..."serve": {"builder": "@angular-builders/custom-webpack:dev-server","options": {"browserTarget": "ten-web:build","port": 3002,"vendorChunk": false},

2-5 package.json

serve:ten-web： // 执行该指令 用于单独启动该子应用

start： // 在启动子应用的同时也会启动portal 的start  (portal要放置跟子应用同一个文件夹下才起作用)

    "serve:ten-web": "ng serve ten-web --deploy-url=/ten-web/","start": "concurrently \"npm run start --prefix=../v8-portal-web\" \"npm run serve:ten-web\"","build": "ng build ten-web --prod --deploy-url=/ten-web/",

 2-6.子应用通过defineApplication定义如何启动子应用的AppModule, 同时可以设置PlanetPortalApplication服务为主应用的全局服务

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { defineApplication, PlanetPortalApplication } from '@worktile/planet';import { TenAppModule } from './ten-app/ten-app.module';
import { environment } from './environments/environment';if (environment.production) {enableProdMode();
}// platformBrowserDynamic().bootstrapModule(TenAppModule)
//   .catch(err => console.error(err));defineApplication('ten-web', (portalApp: PlanetPortalApplication) => {return platformBrowserDynamic([{provide: PlanetPortalApplication,useValue: portalApp}]).bootstrapModule(TenAppModule).then(appModule => {return appModule;}).catch(error => {console.error(error);return null;});
});

2-7 启动测试

3.portal 注册子应用

3-1.portal app.component.ts 注册子应用

this.planet.registerApps([{name: 'ten-web',hostParent: '#app-root-portal',hostClass: 'thy-layout',routerPathPrefix: '/ten',selector: 'ten-app-root',preload: false,manifest: 'ten_proxy/ten-web/manifest.json',scripts: ['ten_proxy/ten-web/main.js',],styles: [// 'ten_proxy/ten-web/styles.css','ten_proxy/ten-web/ten-styles.css']}]);

 3-2.使用方向代理 proxy.conf.js

const PROXY_CONFIG = {};PROXY_CONFIG["/admin-web"] = {target: "http://localhost:3001",secure: false,changeOrigin: true,pathRewrite: { // 对请求路径进行重定向以匹配到正确的请求地址"^/admin-web": "/admin-web",},
};// ten-web 的方向代理
PROXY_CONFIG["/ten_proxy"] = {target: "http://localhost:3002",secure: false,changeOrigin: true,pathRewrite: { // 对请求路径进行重定向以匹配到正确的请求地址"^/ten_proxy": "",},
};module.exports = PROXY_CONFIG;

portal angular.json:

  "serve": {"builder": "@angular-devkit/build-angular:dev-server","options": {"browserTarget": "v8-portal-web:build","proxyConfig": "proxy.conf.js"},"configurations": {"production": {"browserTarget": "v8-portal-web:build:production"}}},

3-3.app-routing.module.ts 添加路由

const routes: Routes = [{path: 'admin',component: EmptyComponent,children: [{path: '**',component: EmptyComponent}]},{path: 'ten',component: EmptyComponent,children: [{path: '**',component: EmptyComponent}]},
...

4.总结

案例代码Git 仓储地址：：angualr-ngx-planet-self · GitLab

以上就是angular 最全也最简单的实现方案

5.报错处里 及注意事项

报错 An accessor cannot be declared in an ambient context.

一般出现在angular8或更低的版本TypeScript 某个版本的缺陷

tsconfig.app.json   "skipLibCheck": true

{"extends": "./tsconfig.json","compilerOptions": {"outDir": "./out-tsc/app","types": [],"skipLibCheck": true},"files": ["src/main.ts","src/polyfills.ts"],"include": ["src/**/*.ts"],"exclude": ["src/test.ts","src/**/*.spec.ts"]
}

style报错：

注意事项：

• 主要各个路径要配置要对应实际路径
• 更多内容可以参考 ngx-planet  （去做按需调整）

Angular微前端相关推荐

1. mac webpack 版本_晓前端周刊 第48期：EMP面向未来微前端方案正式开源了！玩转 webpack，使你的打包速度提升 90%；...

   业界动态 苹果最大杀招:iPhone App 已能在电脑运行 近日网友反馈,苹果 App Store 中大量应用在兼容性一栏中显示:已支持运行 macOS 11(及以上版本)的 Mac 电脑.这意味着 ...

2. 乾坤 微前端_微前端架构初探以及我的前端技术盘点

   前言 最近几年微前端一直是前端界的热门议题, 它类似于微服务架构, 主要面向于浏览器端,能将一个复杂而庞大的单体应用拆分为多个功能模块清晰且独立的子应用,且共同服于务同一个主应用.各个子应用可以独立运 ...

3. 关于前端开发 Framework Agnostic 和微前端的话题

   1 What does it mean by Framework agnostic? 框架不可知一般意味着确切地说,即不可知或独立于任何框架. 举个例子,公司或产品团队经常处理以下优先事项: 通常在大 ...

4. 微前端与项目实施方案研究

   一.前言 微前端(micro-frontends)是近几年在前端领域出现的一个新概念,主要内容是将前端应用分解成一些更小.更简单的能够独立开发.测试.部署的小块,而在用户看来仍然是内聚的单个产品.微前 ...

5. web 折线图大数据量拉取展示方案_对比多种微前端方案

   转自原文:帮你对比多种微前端方案 一.写在前面 在之前的文章中,我们已经深入剖析了微前端究竟是什么,可以带来什么收益,现在让我们复习一下微前端的概念: Techniques, strategies a ...

6. 闲庭信步聊前端 - 见微知著微前端

   笔者初次接触微前端在2020年7月,是从同事的口中听说的.虽然不算是一个早期接触者,但是也确实的推动和跟进了内部某大型项目的开发和落地.也希望能把一些走过的坑和一些思考分享给大家.文内所指应用均为PC ...

7. 听说你还不了解微前端？[收藏=学会]

   一.自我介绍 qiankun 简介 首先开始之前,我先给大家简单的介绍一下乾坤,大家可以在 <qiankun.umijs.org> 的官网上,看到 qiankun 的介绍和 qiankun ...

8. 基于qiankun搭建ng-alain15微前端项目示例实践

   基础环境 实践日期:2023-03-04 ng versionAngular CLI: 15.2.1 Node: 18.14.2 Package Manager: npm 9.5.0 OS: win3 ...

9. 基于qiankun搭建ng-alain15微前端项目入门实践

   基础环境 实践日期:2023-02-22 ng versionAngular CLI: 15.1.6 Node: 18.14.2 Package Manager: npm 9.5.0 OS: win3 ...

最新文章

1. 关于机器学习模型的可解释性算法！
2. python-opencv3 kmeans图像分类
3. Spring MVC文件上传
4. win10redis闪退
5. 同步异步和阻塞3-同步阻塞
6. Design and Model Analysis of the E-Commerce Development Platform for 3-Tiered Web Applications
7. golang json 转 map 切片 结构体
8. 没有基础一样可以一次性拿下CCSK认证？快来看这里！
9. 九、MySQL数据库之HAVING与子查询
10. bootstrap动态折叠菜单，按钮拉伸，菜单动态获取数据
11. unity 刷新layout_【Unity源码学习】Layout
12. 习题 9.9 商店销售某一商品，商店每天公布统一的折扣（discount）。同时允许销售人员在销售时灵活掌握售价（price），在此基础上，对一次购10件以上者，还可以享受9.8折优惠。
13. 朴素的UNIX之-翻开历史
14. 飞桨领航团AI达人创造营第一课2021.7.26
15. 计算机那些事(8)——图形图像渲染原理
16. 数据结构复习题（线性表）
17. 如何设置自定义任务栏图标_轻松自定义Windows 7任务栏图标
18. Bochs编程环境安装
19. 阿里云SSL数字证书Nginx配置部署
20. 全网优秀IT博客导航

热门文章

1. 直线检测练习：hough线变换
2. NX二次开发-UFUN获得装配树根tag UF_ASSEM_ask_root_part_occ
3. 【安卓开发之图片分享应用5：上传图片到服务器】
4. 如何擦除FLASH解决方法
5. 2019内蒙古大学计算机学院研究生分数线,2021内蒙古大学研究生分数线一览表（含2019-2020历年复试）...
6. BP，RBF，GRNN和PNN神经网络
7. 牛客网剑指offer——Java题解
8. dilation conv 和 deconv
9. 对口单招计算机组装维修理论,江苏省对口单招计算机组装与维修计算机原理考题分类汇总...
10. The driver has not received any packets from the server，java.net.ConnectException: Connection refuse