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.

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

5. 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" />
 

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.