# wujie-demo1

**Repository Path**: consolelog/wujie-demo1

## Basic Information

- **Project Name**: wujie-demo1
- **Description**: wujie-demo1
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-23
- **Last Updated**: 2025-04-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

[无界](https://github.com/Tencent/wujie) 和Angular集成的示例。

Angular是 [一个常用的前端开发框架](https://angular.cn)([Github](https://github.com/angular/angular))，
无界是 [腾讯开源的微前端框架](https://wujie-micro.github.io/doc/)([Github](https://github.com/Tencent/wujie))。

使用 `angular@19` 以及 `wujie@1.0` 版本。

本地开发使用了 [yalc](https://github.com/wclr/yalc) ，避免重复的 `npm link` 操作。

## 使用说明

### podman/docker启动方式

```shell
podman-compose build lib
podman-compose build main shop
podman-compose up -d main shop
```

然后访问 http://localhost:30080

### 本地开发

提前使用yalc本地部署app-lib，之后再分别启动主应用和子应用。

然后访问 http://localhost:30080

## 主要文件说明

```
📒 $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/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 //说明文件
  📄 docker-compose.yml //docker脚本
  📄 Dockerfile-main //docker脚本，主应用
  📄 Dockerfile-shop //docker脚本，子应用
  📄 nginx.conf //docker脚本，主应用的nginx配置文件
```

## 问题

### 子应用配置跨域访问

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

```json
"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` 中添加下面的代码来关闭缓存：

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

### nginx反向代理

本地开发时可以根据不同的域名区分应用（主应用localhost:42001，子应用localhost:42002）。
部署后要么使用不同的域名，要么就需要通过nginx配置反向代理来区分。

我这里使用的是同域名的方式，通过url规则进行区分。
即：访问 `$domain/child-shop/**` 的时候代理到shop子应用中，`$domain/**` 将剩下的代理到主应用中。

之后如果还有新增的子应用，也可以根据规则添加，通过 `$domain/child-$subApp/**` 代理到新的子应用 `$subApp` 中。

```
location ~* ^/child-(.*) {
  rewrite ^/child-(.*)/(.*)$ /$2 break;
  resolver 10.89.4.1 ipv6=off valid=10s;
  proxy_pass http://$1;
}
```