micro-zoe / micro-app-demo Goto Github PK

请问main app及child app可支援Angular 13?
我实作出来不work?

Vite 子应用，发布时必须指定baseurl 吗？不能相对路径？

Angular12使用数据绑定baseroute会报错：
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'xxxxx'

Angular CLI: 13.2.6
Node: 16.14.2
Package Manager: npm 8.5.0
OS: darwin arm64

Angular: 13.2.7
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1302.6
@angular-devkit/build-angular   13.2.6
@angular-devkit/core            13.2.6
@angular-devkit/schematics      13.2.6
@angular/cdk                    13.2.6
@angular/cli                    13.2.6
@schematics/angular             13.2.6
rxjs                            7.5.6
typescript                      4.5.5

如题，子路由之间切换未触发当前页面生命周期，导致页面上popover组件、订阅事件等无法正常卸载，导致切回子应用后，页面显示错误。在官方angular11项目中也可以复现
注：子应用卸载的时候 unmount 生命周期里app.destroy()会报错，屏蔽掉了

侧边栏如果放在主应用中，进入基座无法和子应用通信呀 求解答

1. If 'micro-app' is an Angular component, then verify that it is part of this module.
2. If 'micro-app' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
   

我看每个项目的文件夹下都有.gitignore文件，是每个微前端都是一个仓库吗？这个demo中的仓库是怎么管理的

问题表现：
配置 destory: true 后，连续切换子应用，内存持续增加。
重现步骤：
测试1：任务管理器

1. 在 main_apps/react16/src/index.js 配置 start 函数，增加 destroy: true, 配置。
2. yarn dev:main-react16。
3. 访问首页，不打开控制台，打开浏览器任务管理器。
4. 连续切换 vue2, vue3, vue-vite, nextjs11, nuxtjs2 5个子应用，循环8次，每次循环结束后等待15s GC，然后查看内存。
   

测试2：控制台内存查看

1. 打开控制台的内存 tab，点击收集垃圾，选择时间线配置
2. 记录，连续切换 vue2, vue3, vue-vite, nextjs11, nuxtjs2 5个子应用，循环4次。
3. 点击收集垃圾，然后停止记录
   

测试3： 配置 destory: false

1. 在 main_apps/react16/src/index.js 配置 start 函数，增加 destroy: false, 配置。
2. 打开控制台的内存 tab，点击收集垃圾，选择时间线配置
3. 记录，连续切换 vue2, vue3, vue-vite, nextjs11, nuxtjs2 5个子应用，循环4次。
4. 点击收集垃圾，然后停止记录
   

另外，在 destory: true模式下，第二次进入 react16, react 17 子应用报错，这又是另外的问题了。

//main.tsx或者index.tsx中
const handleMicroData = () => {
const navigate = useNavigate();//报错，原因是需要在组件中使用
const location = useLocation();//报错
if (window.eventCenterForAppSource) {
const dt = window.eventCenterForAppSource.getData();
console.log("微应用【app-source】 getData:", dt);
if (dt.path && typeof dt.path === "string") {
console.log("子应用得到的路由-初始", dt.path, location.pathname);
dt.path = dt.path.replace(/^#/, "");
if (dt.path && dt.path !== location.pathname) {
debugger;
navigate(dt.path as string);
}
}
window.eventCenterForAppSource.addDataListener(
(data: Record<string, unknown>) => {
console.log("微应用【app-source】addDataListener:", data);
if (data.path && typeof data.path === "string") {
console.log("子应用得到的路由", data.path, location.pathname);
data.path = data.path.replace(/^#/, "");
if (data.path && data.path !== location.pathname) {
debugger;
navigate(dt.path as string);
}
}
}
);
setTimeout(() => {
window.eventCenterForAppSource.dispatch({ myname: "appSource" });
}, 3000);
}
};

子项目的导航怎么写到主应用的左边菜单的，现在切换子应用的两个菜单，是不能切换的，主子应用都是history模式

要实现这种路由，请问下怎么配置的

问题描述

纯js案例没有加载出来

复现步骤

1.运行子应用：cd 当前路径micro-app-demo/child_apps/purejs && npm run dev
2. 运行父应用：cd yarn dev:main-react16
3. 打开 http://localhost:3000/main-react16/app-purejs

上传截图

复现仓库

切换到该仓库的purejs分支

Uncaught TypeError: Failed to resolve module specifier "/child/vite2/node_modules/.vite/deps/vue.js?v=e77709cf". Invalid relative url or base scheme isn't hierarchical.

当前在子应用内部的keepalive可以正常（实验了vue2、vue3、vite-vue3）
当切换子应用后，keepalive失效。
如果在micro-app中增加keepalive，切换子应用都无变化了。

能否提供一个例子呢？

1、vite-vue3基座打包后需要修改路径才可以运行；
2、打开vite子应用控制台报错
/Uncaught TypeError: Failed to resolve module specifier "/child/vite/node_modules/vite/dist/client/env.mjs". Invalid relative url or base scheme isn't hierarchical.
app-vite:1 Uncaught TypeError: Failed to resolve module specifier "/child/vite/node_modules/.vite/vue.js?v=74605dfe". Invalid relative url or base scheme isn't hierarchical./
请问作者第二个问题怎么解决呢

使用实例代码 https://github.com/micro-zoe/micro-app-demo 测试

描述：

1. 主应用和子应用均为Nuxt2应用
2. URL: http://localhost:3000/app-nuxtjs2/?type=123
3. asyncData函数中 query为 {}
4. 如果单独打开子应用页面如http://localhost:4003/app-nuxtjs2/?type=123 ，可以获取到query

主应用、子应用都是vite+vue3，micro-app标签添加shadowDOM属性，白屏无法渲染。
报警告：

runtime-core.esm-bundler.js:6620 [Vue warn]: Failed to mount app: mount target selector "#vite-app" returned null.
warn2 @ runtime-core.esm-bundler.js:6620

官方demo里面，子应用切换，左侧导航高亮是显示的

但是点击了某个子应用里面的路由后，左侧导航的高亮不见了，请问怎么处理

都不显示了