Follow the instructions in Angular official documentation to create a new angular application.

Note: Follow the above documentation to install and configure the angular CLI and other dependencies in your system.

Create angular application:

Run the following Angular CLI command to create "Hello CUI" app.

ng new hello-cui

Configure API proxy in Angular app

During the Angular based CUI template development, it is essential for the 'ace-lib' components to internally communicate with AgileApps instance (10.13.5 and above) over APIs. Hence, while developing, the angular application needs some proxy configurations.

• Create a JSON file named proxy-config.json and put the following content in it. Place it in the ROOT directory of 'hello-cui' angular app.

  {
  "/networking": {
  "target": "https://agileappshostname",
  "secure": false,
  "changeOrigin": "true"
  },
  "/ace-lib": {
  "target": "https://agileappshostname",
  "secure": false,
  "changeOrigin": "true"
  }
  }

• Update the angular.json to enable proxy and SSL in the development server. Perform the following changes in angular.json. (available in, projects.hello-cui.architect.serve.options)

  {
  "proxyConfig": "proxy-config.json",
  "ssl": true
  }    

  After you make the changes, it should look like as follows:

  

• Next run the angular app by running the following command:

  ng serve

  Now open the web browser https://localhost:4200/.

  Note: Give certificate exceptions, when prompted.

• Next, add the following JS files to the src/index.html, just before the </body> tag.

  <!-- ace-lib includes -->
  <script type="text/javascript" src="/ace-lib/runtime.js"></script>
  <script type="text/javascript" src="/ace-lib/es2015-polyfills.js" nomodule></script>
  <script type="text/javascript" src="/ace-lib/polyfills.js"></script>
  <script type="text/javascript" src="/ace-lib/scripts.js"></script>
  <script type="text/javascript" src="/ace-lib/vendor.js"></script>
  <script type="text/javascript" src="/ace-lib/main.js"></script>

• Next, add the following css file to the src/index.html, just before the </head> tag.

  <!-- ace-lib includes -->
  <link rel="stylesheet" href="/ace-lib/styles.css" />

• Next, update the <base href="/"> as <base href="./"> and empty the placeholder content from app.component.html, ensuring the <router-outlet></router-outlet> is retained.

• Next add CUSTOM_ELEMENTS_SCHEMA

• Next, configure the routes to use "#" by modifing the src/app/app-routing.module.ts file as below.

  @NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
  })
  export class AppRoutingModule { }

• Next, add the SASS based css themeing support to the application by installing the ace-lib-theme using the following command.

  npm i ace-lib-theme

• Next, import the default theme css file from node_modules/ace-lib-theme/dist/css/theme.min.css. To import, open 'style.css' from src/style.css and place the following import css statement into it:

  @import "ace-lib-theme/dist/css/theme.min.css";

Now the 'hello-cui' angular app is ready for deployment.