0

I'm trying to load my angular 16 app as webcomponent into my host app with module federation.

Specified all of envirinment setting in below section. With all those, when I launch app with "ng serve", it fails with following error. enter image description here

Could someone help me to resolve this?

webpack.config.js:

new ModuleFederationPlugin({
      library: { type: 'module' },
      // library: { type: 'var', name: 'myMfe' },

      // For remotes (please adjust)
      name: 'myMfe',
      filename: 'remotemyMfeEntry.js',
      exposes: {
        './mfe-component': './src/bootstrap.ts',
      },
      experiments : {
    outputModule: true,
  }

AppModule:

export class AppModule implements DoBootstrap {
  constructor(private readonly injector: Injector) {}

  public ngDoBootstrap(_: ApplicationRef) {
    console.log('inside doBootstrap lifecycle hook');
    const ce = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('mfe-element', ce);
  }
}

tsConfig:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": ".",
    "downlevelIteration": true,
    "paths": {
      "src/*": [
        "src/*"
      ]
    },
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2020",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "ES2022",
    "typeRoots": [
      "src/stubTypes",
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "skipLibCheck": true,
    "useDefineForClassFields": false
  },
  "angularCompilerOptions": {
    "strictTemplates": true,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
  }
}

My app should have few commonJs libraries.

Riyaz
  • 1

0 Answers0