部署时Angular Module-Federation Microfrontend Singleton服务不起作用

发布于 2025-02-12 10:40:05 字数 1565 浏览 0 评论 0原文

这种建筑绝对是与之合作的噩梦,但希望有人能够帮助我。我使用的是Angular 13, @Angular-Architects/模块 - FEDERATION 14.2.0。

我将尝试为正在与之合作的项目提供简化版本。

项目结构是

↓project-name
  ↓dist
    >project1
    >project2
    >shell
    >shared-library
  >node_modules
  ↓projects
     >project1
     >project2
     >shell
     >shared-library

外壳,每个项目都在他们的webpack.config:

 sharedMappings.register(
    path.join(__dirname, '../../tsconfig.json'),
    ['@shared-library']

的共享图片设置

"@shared-library": [
    "projects/shared-library/src/public-api.ts"
  ],

tsconfig.json具有此路径设置 而不是public-api.ts。我已经尝试过,但也什么也不做。

共享library具有诸如

>shared-library
  ↓src
    >lib
    >shared-library.module.ts
    >shared-library.service.ts
  public-api.ts

共享library.service.ts之类的结构。

使用共享library的组件。服务

import { SharedLibraryService } from '@shared-library';
constructor(private shared-library: SharedLibraryServce) {}

在我本地运行时使用它的运行良好,共享library.service是单身人士,每个MFE都可以与之共享数据。

当我部署项目时,共享图书馆将在外壳和每个MFE中实例化,因此它完全打破了项目。

我在部署部分并不是真正的经验,所以我假设我做错了。

Angular.json在“/projectName/apps/project1”之类的结构中具有每个项目的“ basehref” s,因此,当我将文件移至服务器时,我将它们放在

all shell files
>apps
  >project1
  >project2

我尝试将此库放置在每个结构中可能的地方,没有什么不同,但是我也注意到,即使我不将库放在服务器上,它仍然存在并且仍在实例化多次,所以我想部署库是不必要的吗?

代码比我提供的要多得多,但是我不知道这种类型的项目甚至可以在Stackblitz中完成,以进行更完整的示例。我试图提供所有与问题相关的代码,但是我可以根据要求提供更多我的代码示例。

This architecture is an absolute nightmare to work with, but hopefully someone is able to give me a hand. I'm using Angular 13, and @angular-architects/module-federation 14.2.0.

I'll try to give a simplified version of the project I'm working with.

project structure is

↓project-name
  ↓dist
    >project1
    >project2
    >shell
    >shared-library
  >node_modules
  ↓projects
     >project1
     >project2
     >shell
     >shared-library

Shell and each project have this in their webpack.config:

 sharedMappings.register(
    path.join(__dirname, '../../tsconfig.json'),
    ['@shared-library']

tsconfig.json has this path setup for shared-library

"@shared-library": [
    "projects/shared-library/src/public-api.ts"
  ],

I've seen some random blogs that show the tsconfig.json path using the path to the library in the dist folder instead of public-api.ts. I've tried that, but it does nothing either.

shared-library has a structure like

>shared-library
  ↓src
    >lib
    >shared-library.module.ts
    >shared-library.service.ts
  public-api.ts

shared-library.service.ts has the @Injectable({ providedIn: 'root' }) decorator.

The components that are using shared-library.service are importing it using

import { SharedLibraryService } from '@shared-library';
constructor(private shared-library: SharedLibraryServce) {}

When I run it locally it works fine, the shared-library.service is a singleton and each MFE can share data with it.

When I deploy the project, shared-library is instantiated in the shell and each MFE, so it totally breaks the project.

I'm not really experienced with the deployment part so I'm assuming there's something I'm doing wrong.

angular.json has "baseHref"s for each project in a structure like "/projectName/apps/project1", so when I move the files to the server, I place them in a structure like

all shell files
>apps
  >project1
  >project2

I've tried placing this library in every possible place and nothing makes a difference, but I also noticed that even if I don't put the library on the server, it still exists and is still being instantiated multiple times, so I guess deploying the library is unnecessary?

There is a lot more to the code than I provided, but I don't know that this type of project can even be done in stackblitz for a more complete example. I tried to give all code that seemed relevant to the problem, but I can give more samples of my code as requested.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文