Next-generation platform

Adding a flow

You can create flows in accordance with your business requirements. Each flow is a single-spa-enabled angular application with its own package.json to manage its dependencies and a bunch of screens or page components modeled as angular route. A page component is a route level angular component that is used to define a route in the routing module.

Procedure

To create a new angular application with single-spa enabled, complete the following steps:
  1. Go to the <store-temp> directory, and run the following command:
    yarn new-extension-feature --module-name=<module-name> --port=<port>
    This command supports the following options:
    • --module-name - The name of the module.
      Note: Ensure that each word in the <module-name> attribute value is separated by a hyphen (-). For example, if the module name is custom move inventory, specify the value as custom-move-inventory.
    • --port - The port number where the new application runs.
    The command completes the following tasks:
    • Creates a new angular application with prefix as isf under <store-temp>/extensions/features folder. All the source code will reside within <store-temp>/extensions/features/<module-name> folder.
    • Installs single-spa-angular.
    • Generates a main.single-spa.ts in your src project folder.
    • Generates a lazy loaded module with <module-name> in your src/app project folder.
    • Updates the routing module src/app-routing.module.ts file with the following route definitions:
      • Lazy loaded module with the appropriate route path definition.
      • EmptyRouteComponent for unmatched routes.
    • Updates the package.json projects root with the application start and build scripts. These scripts are used for starting and building the application.
    • Registers the new application in <store-temp>/extensions/override-static-assets/root-config/custom/import-map.json. The import-map.json file registers the JavaScript module to load a specific application.
    • To support localization and internationalization, the i18n folders are generated within the src/assets project folder to maintain the language specific bundles. An empty en.json bundle JSON file is generated within the src/assets/<module-name>/i18n project folder. The code is also updated to set up the TranslateModule to load the suitable translation bundle JSON files.
  2. Create new views or screens for the flow in <store-temp>/extensions/features/<module-name>/src/app/features/<module-name>.

    Each screen is a page component with a corresponding route that is defined in the <store-temp>/extensions/features/<module-name>/src/app/features<module-name>/<module-name>.routing.module.ts file.

  3. Update new routes that are added as part of the new flow in routes.json. The new routes are present in <store-temp>/extensions/override-static-assets/root-config/custom/routes.json.

    The route provided in the application is configured as part of feature-routes.json that is present in store-single-spa/extensions/override-static-assets/root-config/custom/routes.json. For more information about updating the new routes, see Updating import-maps and routes.json.

What to do next

Complete the following tasks: