Using MF-tools:v14:exposes web-components: throws Error like Uncaught (in promise): Error: NG04002: Cannot match any routes. URL Segment: 'angular14'

[CP-Ram]

I am using angular v14.1.1 and "@angular-architects/module-federation": "^14.3.10","@angular-architects/module-federation-tools": "^14.3.10".And exposes web-components from remote app. shell app routes:

const routes: Routes = [ 
{
  path: 'angular14',
  component: WebComponentWrapper,
  data: {
    type:'module',
    remoteEntry: 'http://localhost:4201/remoteEntry.js',
    exposedModule: './web-components',
    elementName: 'angular14-customer'
  } as WebComponentWrapperOptions
}
];

remote app webpack.config:

module.exports = withModuleFederationPlugin({
  name: "angular14",
  // library: { type: "module", name: "angular14" },
  filename: "remoteEntry.js",
  exposes: {
    './web-components': './src/bootstrap.ts',
  },

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },

});

remote module angular elements:

export class AppModule implements DoBootstrap
{
  constructor(private injector: Injector) { }
  ngDoBootstrap(): void {
    if (!customElements.get('angular14-customer')) {
      customElements.define(
        'angular14-customer',
        createCustomElement(MFEComponent, { injector: this.injector })
      );
    }
  }
 }

Sample angular v14 application work fine with other routes but once try to access MF web-components routes path in shell app getting error.

Error: core.mjs:7644 ERROR Error: Uncaught (in promise): Error: NG04002: Cannot match any routes. URL Segment: 'angular14' Error: NG04002: Cannot match any routes. URL Segment: 'angular14' at ApplyRedirects.noMatchError (router.mjs:3578:16) at router.mjs:3560:28 at catchError.js:10:39 at OperatorSubscriber._error (OperatorSubscriber.js:23:21) at OperatorSubscriber.error (Subscriber.js:40:18) at OperatorSubscriber._error (Subscriber.js:64:30) at OperatorSubscriber.error (Subscriber.js:40:18) at OperatorSubscriber._error (Subscriber.js:64:30) at OperatorSubscriber.error (Subscriber.js:40:18) at OperatorSubscriber._error (Subscriber.js:64:30) at resolvePromise (zone.js:1211:31) at resolvePromise (zone.js:1165:17) at zone.js:1278:17 at _ZoneDelegate.invokeTask (zone.js:406:31) at Object.onInvokeTask (core.mjs:26367:33) at _ZoneDelegate.invokeTask (zone.js:405:60) at Zone.runTask (zone.js:178:47) at drainMicroTaskQueue (zone.js:585:35)

[pdashford]

@CP-Ram

I also had this issue, it seems that the documentation is not been updated correctly and points to older github repo's and it took me a few days to finally get it working.

I seems that the angular-architects/module-federation creates the webpack file, but when adding angular-architects/module-federation-tools it to updates the webpack but that part does not happen if the files already exist.

Thus is you look at how the webfile should be using the tools it is very dofferent to how it is explained in the documentation.

const {
  shareAll,
  withModuleFederationPlugin,
} = require("@angular-architects/module-federation/webpack");

module.exports = withModuleFederationPlugin({
  name: "angular1",

  exposes: {
    "./web-components": "./src/bootstrap.ts",
  },

  shared: {
    ...shareAll({
      singleton: true,
      strictVersion: true,
      requiredVersion: "auto",
    }),
  },
});

I've put a link to my working boiler plate -> https://github.com/pdashford/module-federation

[CP-Ram]

@pdashford - quite not understand. could you please explain,As we don't have router module in MFEs, even though getting above error.

-If MFEs doesn't have router module and path, just exposing web components, using shell app router to navigateByUrl to Mfes web component. what is the resolution for the above error?