Updating import-maps and routes.json

You can register each route application as a module in import-map.json. You can also define routes of the new application to be rendered on UI in routes.json.

About this task

The store-root-config application is the entry point to the application, which uses single-spa to load different route modules. Each route application is registered as a module in an import-map loaded by SystemJS. To register the new application with store-root-config application, you must update both import-map.json and routes.json.

routes.json - This file links the route in the micro-frontend application with the angular application that renders the route.
import-map.json - This file registers the JavaScript module to load for a specific application. For more information about import-maps, see import-map specification.

Procedure

The UMD (Universal Module Definition) module bundles for each of the single-spa-enabled angular application is configured in the import-map.json file that is present in <store-temp>/extensions/root-config/custom/import-map.json.
This import-map.json is automatically updated with <module-name> and the relative path of the JavaScript module to be loaded by SystemJS.
```
{ "imports": { "<module-name>":"/<module-name>/main.js" } }
```

Update new routes that are added as part of the new flow in routes.json as illustrated in the sample code. The new routes are present in <store-temp>/extensions/root-config/custom.

{
    "routes": [
      { "type": "route",
        "path": "shell/invoice/list",
         "routes": [
            { "type": "application",
              "name": "invoice"  // NOTE:  This value is same as the <feature-module-specifier> specified in import-maps.json
            }
      ]
      },
      {
        "type": "route",
        "path": "shell/invoice/summary/:invoiceKey",
        "routes": [
          {
            "type": "application",
            "name": "invoice" // NOTE: This value is same as the <feature-module-specifier> specified in import-maps.json
          }
        ]
      } 
    ]
  }

The route provided in the application is configured as part of feature-routes.json that is present in <store-temp>/packages/apps/store-root-app/src/assets/root-config/config/feature-routes.json.