共享组件未在主机应用程序的 SSR 中呈现答案

【问题标题】：Shared components aren't being rendered in SSR from host app共享组件未在主机应用程序的 SSR 中呈现
【发布时间】：2021-11-10 16:38:14
【问题描述】：

将 SSR 与模块联合使用时出现问题。 My example with code

如何开始

纱线安装：全部
yarn shell:server:build
yarn shell:server:start
纱线远程：开始

我有两个不同的应用程序，其中一个是带有 SSR 和渲染组件逻辑的主机应用程序，第二个是带有组件的共享库。我在主机应用程序中配置了 ng-universal，并希望在加载页面时看到完整的代码响应，但我只从主机应用程序获得代码。 Screenshot of my response 该代码让我有机会从 remoteEntry.js 获取组件

import { LoadRemoteModuleOptions } from '../interfaces/module-federation.interfaces';

type Scope = unknown;
type Factory = () => any;

type Container = {
    init(shareScope: Scope, initScope?: Scope): void;
    get(module: string, getScope?: Scope): Promise<Factory>;
};


const createContainer = (name: string): Container => {
  // @ts-ignore
  const container = window[name] as Container;
  return container
} ;

declare const __webpack_init_sharing__: (shareScope: string) => Promise<void>;
declare const __webpack_share_scopes__: { default: Scope, plugin: Scope };

const moduleMap: any = {};

export function loadRemoteEntry(remoteEntry: string): Promise<boolean> {
    return new Promise<any>((resolve, reject) => {
        if (moduleMap[remoteEntry]) {
            resolve(moduleMap[remoteEntry]);
            return;
        }

        const script = document.createElement('script');
        script.src = remoteEntry;

        script.onerror = reject;

        script.onload = () => {
            moduleMap[remoteEntry] = true;
            resolve(moduleMap[remoteEntry]); // window is the global namespace
        };

        document.body.appendChild(script);
    });
}

async function lookupExposedRemote<T>(
    remoteName: string,
    exposedModule: string
): Promise<T> {
  // Initializes the share scope. This fills it with known provided modules from this build and all remotes
  await __webpack_init_sharing__('default');
  // @ts-ignore
  // @ts-ignore
  const container = createContainer(remoteName);
  if (!container) {throw new Error('Container with script is not defined')}
  await container.init(__webpack_share_scopes__.default);
  const factory = await container.get(exposedModule);
  const Module = factory();
  return Module as T;
}

export async function loadRemoteModule(
    options: LoadRemoteModuleOptions
): Promise<any> {
    await loadRemoteEntry(options.remoteEntry);
    return await lookupExposedRemote<any>(
        options.remoteName,
        options.exposedModule
    );
}

我认为问题是因为我在服务器端没有对象 Window，但我为此使用了多米诺骨牌。也许有人可以帮助我，我将不胜感激。

【问题讨论】：

也许这会给你一些提示？ github.com/newvladimirov/…
嗨！不幸的是，它在我的情况下不起作用。
当前进度：在 index.html 中添加了带有远程应用 src 的脚本。函数 loadRemoteEntry 已删除。遇到新问题```错误错误：未捕获（承诺中）：TypeError：angular_core__WEBPACK_IMPORTED_MODULE_0_.uudefineComponent不是函数TypeError：angular_core__WEBPACK_IMPORTED_MODULE_0_.uudefineComponent不是函数```
CSR：i.imgur.com/dU5wyuR.png SSR：i.imgur.com/ZrvcpTS.png

标签： javascript angular webpack webpack-module-federation

【解决方案1】：

问题已解决。只需构建远程应用程序并使用 lite 服务器启动它。回购已更新。如果您需要，请使用它。 https://i.imgur.com/pkyTEsQ.png

【讨论】：