Scully jsonRoutePlugin support a microfrontend architecture

[pegaltier]

🧩 Feature request

Description

Currently the jsonRoutePlugin seems to not work correctly with a microfrontend lazy module (using webpack5 and module federations).

For instance in my app i would like to generate product details pages using the products from the fakestoreapi.com and the product module comes from the product microfrontend (see configuration below). This configuration is not working.

routes: {
  "/product/detail/:productId": {
    type: "json",
    productId: {
      url: "https://fakestoreapi.com/products",
      // url: "http://localhost:4202/assets/json/products.json",
      // resultsHandler: (response) => response.data,
      property: "id",
    },
  },
},

If I move the product detail component inside the mdmf-shell app routing file then it works.

{ path: "product/detail/:productId", component: ProductDetailComponent },

Here is my POC: https://github.com/pegaltier/module-federation-examples/tree/angular-mf-scully

Describe the solution you'd like

Improve the jsonRoutePlugin to support this architecture

In addition to that it could be nice to improve the debugging experience of the jsonRoutePlugin for instance in this case it seems the route with a :productId is not detected but i don't get any feedback in the console. Even if it's another issue it could be useful to get an information message in the console.

[pegaltier]

After chatting with Sanders on Gitter, he explained me that in the routes config we traverse the local source, we can't traverse something that's not there (the microfrontend module is not there) Instead of adding those routes to the routes config I should add it to the extraroutes config and Scully will traverse them. Extraroutes takes a promise, so it's possible to fetch them from an external api. In addition to that extraroutes don't have to be fully qualified, for instance this will work: /product/detail/:id

[SanderElias]

@pegaltier Thanks for the update. For now, I'm going to close this issue, as there is no actionable content. If there is, we can reopen this issue any time

[pegaltier]

Yes solution explained with extraRoutes is working, Thank you very much!

[SanderElias]

Ok, now its more clear to me what you wanted. You can have the same result with:

extraRoutes: ['/product/detail/:productId'],
routes: {
  "/product/detail/:productId": {
    type: "json",
    productId: {
      url: "https://fakestoreapi.com/products",
      // url: "http://localhost:4202/assets/json/products.json",
      // resultsHandler: (response) => response.data,
      property: "id",
    },
  },
},