Creating next-generation 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 guides you through how to create a next-generation Order Hub application and store it in a basic Angular repository.

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: These required options are 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 is buc-app-settings, the module short name must be settings.; Note: The root-config package is generated based on the module-short-name. Do not rename or add a prefix to the module-short-name or you will not be able to deploy the customizations.
--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 will create the 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/

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.

Add some text that you want to display in your new application by updating the src/app/app.component.html file. For example, to add Hello, World!, use the following code.


<div class="app-root-custom-angularrepo">
	<div class="app-region-body">
		<div class="app-body-content" *ngIf="isBucTenantChangeSuccess || isBucJwtRefreshSuccess">
			<router-outlet></router-outlet>
		</div>
		<div *ngIf="isInitialState" class="app-loading">
			<div ibmCol>
				<buc-loading [isActive]="isInitialState"></buc-loading>
			</div>
		</div>

Hello World!

	</div>
</div>

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 the ng serve script in the package.json file.

Note: To accept the certificate, 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.