Adding custom components, pipes, providers, and directives in application-provided shared module

Procedure

1. Depending upon what you want to add to the shared module, navigate to the corresponding folder:

   SCREEN_EXTENSIONS_HOME/shared/{components or directives or pipes or services}.

   Create the folders appropriately, if already not present.

2. Copy shared-extension.module.ts from <WORKSPACE>/store-frontend/src/app/shared to <WORKSPACE>/store-frontend/store-extensions-src/app/shared folder.

   If shared-extension.module.ts is already present then do not copy the file.

3. Use one of the following CLI commands to create the component:

   Table 1. CLI commands and purposes

   CLI command	Purpose
   ng g c <component-name> --project=store-extensions —skip-import	Generate a component. Note: To be executed from this location: SCREEN_EXTENSIONS_HOME/shared/components
   ng g directive <directive-name> --project=store-extensions —skip-import	Generate a directive. Note: To be executed from this location: SCREEN_EXTENSIONS_HOME/shared/directives
   ng g pipe <pipe-name> --project=store-extensions —skip-import	Generate a pipe. Note: To be executed from this location: the SCREEN_EXTENSIONS_HOME/shared/pipes
   ng g s <service-name> --project=store-extensions —skip-import	Generate a service. Note: To be executed from this location: SCREEN_EXTENSIONS_HOME/shared/services

4. Update the newly-created component, directive, or pipe class name in the providers property of @NgModule decorator in shared-extension.module.ts.

   Similarly, if you create a provider or service in the SCREEN_EXTENSIONS_HOME/shared/services folder, service class name must be in the declarations and exports property of @NgModule decorator in shared-extension.module.ts.