Adding a flow
package.jsonto 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.
To create a new angular application with single-spa enabled, complete the following steps:
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:
The command completes the following tasks:
--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
--port- The port number where the new application runs.
- Creates a new angular application with prefix as
<store-temp>/extensions/featuresfolder. All the source code will reside within
- Installs single-spa-angular.
- Generates a
- Generates a lazy loaded module with
- Updates the routing module
src/app-routing.module.tsfile with the following route definitions:
- Lazy loaded module with the appropriate route path definition.
EmptyRouteComponentfor unmatched routes.
- Updates the
package.jsonprojects root with the application start and build scripts. These scripts are used for starting and building the application.
- Registers the new application in
- To support localization and internationalization, the
i18nfolders are generated within the
src/assetsproject folder to maintain the language specific bundles. An empty
en.jsonbundle JSON file is generated within the
src/assets/<module-name>/i18nproject folder. The code is also updated to set up the
TranslateModuleto load the suitable translation bundle JSON files.
- Create new views or screens for the flow in
Each screen is a page component with a corresponding route that is defined in the
- Update new routes that are added as part of the new flow in
routes.json. The new routes are present in
The route provided in the application is configured as part of
feature-routes.jsonthat 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.