Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

199
Views
Shared components aren't being rendered in SSR from host app

Got a problem when used SSR with module federation. My example with code

How to start

  • yarn install:all
  • yarn shell:server:build
  • yarn shell:server:start
  • yarn remote:start

I have two different applications, one of them is a Host app with SSR and logic for render components, second one its like a shared library with components. I configured ng-universal in host app and want to see full code in response when page is being loaded, but I got only code from host app. Screenshot of my response That code give me an opportunity to get components from 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
    );
}

I think problem because I don't have object Window on server side, but I use domino for that. Maybe anybody could help me, I'd appreciate it.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Problem was solved. Just build remote app and start it with lite server. Repo was updated. Use it if u need. https://i.imgur.com/pkyTEsQ.png

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!