Angular+无界(WuJie)微前端示例

无界 和Angular集成的示例。

Angular是 一个常用的前端开发框架(Github)， 无界是 腾讯开源的微前端框架(Github)。

使用 angular@19 以及 [email protected] 版本。

本地开发使用了 yalc ，避免重复的 npm link 操作。

主要文件说明

📒 $project //应用根目录
  📁 app-lib/projects/lib1 //通用代码提取库
    📄 wujie.router.ts //封装无界路由监听
    📄 wujie.define.ts //定义windows上的变量，防止编译错误
    📄 wujie.component.ts //封装无界组件
    📄 wujie.service.ts //封装无界初始化服务
  📁 app-main //主应用，端口42001
    📄 package.json //添加无界依赖
    📄 angular.json //关闭ng serve的缓存，避免yalc版本失效
    📁 src
      📄 main.ts //引入window定义
      📁 app
        📄 app.config.ts //初始化路由监听
        📄 app.routes.ts //添加子应用路由匹配
        📄 app.component.ts //配置子应用端点，以及是否预加载，此时还没有开启
        📄 pages/shop/shop.component.ts //开启子应用
  📁 app-shop //子应用1，端口42002
    📄 package.json //添加无界依赖
    📄 angular.json //关闭ng serve的缓存，避免yalc版本失效。同时添加headers以便在开发时允许跨域访问
    📁 src
      📄 main.ts //引入window定义，改造生命周期函数
      📄 app.config.ts //初始化路由监听
  📄 README.md //说明文件

问题

子应用配置跨域访问

在 angular.json 中配置，路径为： /projects/${yourAppName}/architect/serve/configurations/development:

"development": {
  "buildTarget": "app-shop:build:development",
  "disableHostCheck": true,
  "headers": {
    "Access-Control-Allow-Credentials": "true",
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Headers": "*",
    "Access-Control-Allow-Methods": "*",
    "Upgrade": "$http_upgrade",
    "Connection": "upgrade"
  }
}

webpack缓存了yalc导致代码更新失效

在 angular.json 中添加下面的代码来关闭缓存：

"cli": {
  "cache": {
    "enabled": false
  }
},