Migrating new Order Hub applications using a standard Angular repository

Using a standard Angular repository provides a simpler more traditional approach to an Angular UI application. Use this approach if you are creating an independent UI application and want to code it fast without much dependency or code sharing.

About this task

This procedure migrates your new applications in a new standard Angular repository in the next-generation Order Hub environment.

Procedure

Extract the next-generation Order Hub code. For more information, see Getting started with customizing next-generation Order Hub.

Note: The version parameter for the om-compose.sh extract-orderhub-code command must be oms to extract the next-generation Order Hub code. The version parameter omoc is not applicable to next-generation Order Hub.
Open a console and go to the next-generation Order Hub code directory. The default location is devtoolkit_docker/orderhub-code.
To bypass the SSL verification for interactions with registries, set strict-ssl to false by running the following command.
```
npm config set "strict-ssl" false
```
Reinstall the latest version of @buc/schematics to access the IBM®-provided schematics by running the following commands.

npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v3latest.tgz

Create a folder for your new application. The name of the folder is the module name.
In the console, go to the folder that you created.
Create a workspace and initialize a new Angular application by running the following command.

ng new --collection=@buc/schematics \
--module-name=<name-of-the-module> \
--module-short-name=<the-short-name-for-the-module> \
--prefix=<selector-prefix> \
--mode=on-prem

Note: The ng new command requires the --mode=on-prem parameter.

The schematic supports the following options.

--skip-git: This option does not initialize a GitHub repository. The default is false.
--commit: This option includes the initial GitHub repository commit information. The default is true.
--module-name: This required option is the name of the module. For example, buc-app-settings.
--module-short-name: The short name for the module. If the module name has dashes, then the short name must be the text after the last dash. For example, if the module name is buc-app-settings, the module short name must be settings.
--prefix: The HTML selector to use for generated components. The default is buc.
--mode: Set this option to on-prem to generate code that is applicable for next-generation Order Hub.

See the following example of running the command that creates the new angular application.

ng new --collection=@buc/schematics  --module-name=custom-angularrepo
      --module-short-name=angularrepo  --prefix=angularrepo --mode=on-prem

Note: If you encounter an error similar to the following message, then you can safely ignore the error. These errors do not affect the icons that are used by Order Hub.

Error: Failed to compile entry-point @carbon/icons-angular/

Copy the angular.json file from the existing customization.

Note: Do not copy the module package.json file from the existing customization.

Copy the src/app and src/assets folders and any other custom code from existing customization.

Note: Do not copy the src/environments folder from the existing customization.

If next-generation Order Hub containers are not currently running, go to the devtoolkit_docker/compose directory and run the following command.

./om-compose.sh start orderhub

Create the local development version of the features.json file. For information, see Creating the features.json files.
To test your new application locally, copy the features.json file into the om-orderhub-base container by running the following commands.

docker exec om-orderhub-base bash -c 'mkdir -p /opt/app-root/src/shell-ui/assets/custom'

docker cp <orderhub-code>/shell-ui/assets/dev/. om-orderhub-base:/opt/app-root/src/shell-ui/assets/custom/

Start the server by entering the following command.

yarn start --host=localhost

Note: You see the following message.

"** Angular Live Development Server is listening on localhost:<port>, 
open your browser on https://localhost:<port>/<module>/<route> **"

You can ignore this message.

To accept the self-signed certificate in the web browser, in a browser, open a tab to https://localhost:4000 and accept the certificate. The port 4000 is the value that is used in devServerConfig in the app-config.json file.

Note: To accept certification, it is now https://localhost:4000 instead of https://bucgenerichost:4000.

Start next-generation Order Hub by opening a tab in a browser to https://localhost:7443/order-management. The default port is 7443. If you set the OH_BASE_HTTPS_PORT property in the devtoolkit_docker/compose/om-compose.properties file, use that port number.
Click your new menu item in the left menu navigation.

What to do next

Prepare for deployment, then build, test, and deploy your customizations. For more information , see Deployment process.