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:
-
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.
- 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.
- 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: