Creating an Angular Project for the CUI Template

Follow the instructions present in the [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 an Angular-based Application

Run the following Angular CLI command to create the hello-cui App.
ng new hello-cui

Configure API proxy in the Angular Application

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.

1. 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"
   }

}
2. Update the angular.json to enable proxy and SSL in the development server. Perform the following changes in the angular.jsonfile present in projects.hello-cui.architect.serve.options.
{

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

}
3. Run the Angular App by running the following command:
ng serve
Open the web browser and access https://localhost:4200/.

Note: Give certificate exceptions, when prompted.

4. Add the following JS files to the src/index.html, just before the </body> tag.

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

5. Add the following CSS file to the src/index.html', just before the </head> tag.

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

6. Update the <base href="/"> as <base href="./"> and empty the placeholder content from app.component.html, ensuring the <router-outlet></router-outlet> is retained.
7. Add CUSTOM_ELEMENTS_SCHEMA
8. Configure the routes to use "#" by modifying the src/app/app-routing.module.ts file as below.
@NgModule({

 imports: [RouterModule.forRoot(routes, { useHash: true })],
 exports: [RouterModule]

}) export class AppRoutingModule { }
9. Add the SASS-based CSS theming support to the application by installing the ace-lib-theme using the following command.
npm i ace-lib-theme
10. 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.