search

micro-zoe / micro-app

A simple, efficient and powerful micro front-end framework. 一款简约、高效、功能强大的微前端框架
https://micro-zoe.github.io/micro-app/
MIT License
5.65k stars 573 forks source link

angular里通过loadChildren惰性加载的应用作为子应用会报错 #393

Closed Huansheng1 closed 1 year ago

Huansheng1 commented 2 years ago

问题描述

问题的具体描述 angular里可能某种嵌套通过loadChildren惰性加载的应用作为子应用会报错？ 不确定根本原因，报错截图里的load.script脚本请求地址不对，4200是基座端口，不是子应用的端口，导致请求不到？我通过插件、配置等方式貌似也改不了该加载地址。

复现步骤

可能的，我也不确定到底怎么复现

  1. 一个模块设置为惰性加载，里面还有惰性加载 2.作为子应用嵌入

上传截图

请上传代码截图、控制台、终端等截图以帮助我们了解您的问题。

loadChildren: () =>
import('./dashboard/dashboard.module').then((m) => m.DashboardModule),

image

复现仓库

请提供一个精简的代码仓库，然后上传到自己的 github，以帮助我们复现您的问题。

环境信息

Huansheng1 commented 2 years ago

image image

这里加载的有问题，路径不对，导致加载的是 http://localhost:4200/default~modules-auth-auth-module~pages-layout-module.js 实际子应用的地址是 http://localhost:6677/default~modules-auth-auth-module~pages-layout-module.js 没有按照配置的url走啊： image

bailicangdu commented 2 years ago

将子应用首页改成非懒加载的试一下呢

Huansheng1 commented 2 years ago

将子应用首页改成非懒加载的试一下呢

您好，我强制将js路径都变更为本地子应用的开发路径，那个问题暂时跳过了，结果子应用直接渲染到父级应用的body上了： image 本来应该是子应用显示在父应用的一个局部区域，但是现在没有按照指定的区域渲染，在正常的右侧区域一闪而逝变成了全屏上去了，跑到外面来了，渲染到了基座应用的body上； 然后子应用的组件样式变形（按官网设置去除样式隔离参数，貌似没生效，可能和渲染位置错误跑到父亲应用的Body上有关系） 请求跨域报错（我是angular脚手架配置的，貌似还是存在这个问题，然后引入了自定义webpack插件按官网说的加了允许跨域，还是不行） image

Huansheng1 commented 2 years ago

将子应用首页改成非懒加载的试一下呢

您好，我强制将js路径都变更为本地子应用的开发路径，那个问题暂时跳过了，结果子应用直接渲染到父级应用的body上了： image 本来应该是子应用显示在父应用的一个局部区域，但是现在没有按照指定的区域渲染，在正常的右侧区域一闪而逝变成了全屏上去了，跑到外面来了，渲染到了基座应用的body上； 然后子应用的组件样式变形（按官网设置去除样式隔离参数，貌似没生效，可能和渲染位置错误跑到父亲应用的Body上有关系） 请求跨域报错（我是angular脚手架配置的，貌似还是存在这个问题，然后引入了自定义webpack插件按官网说的加了允许跨域，还是不行） image

渲染问题确定了，子应用选择器不知道为啥选择到了本地的Body，需要修改子应用的挂载点