standalone remote ng app - error loading

[mirzinho]

Hello,

having some issues trying to load a standalone remote app into shell Shell code: https://github.com/mirzinho/microFrontEnds

works perfectly

Standalone app https://github.com/mirzinho/ngHello based on https://github.com/manfredsteyer/angular-app1

Router on shell:

{
    path: 'hello',
    component: WebComponentWrapper,
    data: {
      remoteEntry: 'http://localhost:5000/remoteEntry.js',
      remoteName: 'hello',
      exposedModule: './web-components',
      elementName: 'hello-app'
    } as WebComponentWrapperOptions
  }

Standalone app serves and loads in browser with no issues, but when i try to load it into the shell i get these errors:

[mirzinho]

Hello,

I managed to resolve this issue by adding

module.exports = {
  output: {
    uniqueName: "hello",
    publicPath: "auto",
    scriptType: 'text/javascript'
  }
  ...
}

And changing bootstrap.ts file to this code on both shell and remote app.

import {enableProdMode, VERSION} from '@angular/core';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import {platformBrowser} from "@angular/platform-browser";

if (environment.production) {
  enableProdMode();
}

const ngVersion = VERSION.full;

(window as any).plattform = (window as any).plattform || {};
let platform = (window as any).plattform[ngVersion];
if (!platform) {
  platform = platformBrowser();
  (window as any).plattform[ngVersion] = platform;
}

platform.bootstrapModule(AppModule)
  .catch((err: any) => console.error(err));

Apparently this issue appears if the shell and remote app have the identical version of angular.

@manfredsteyer can you confirm or clarify this.

Thank you