AgileApps - Creating an angular project for CUI template

Knowledge base
, , , ,
1

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:

    angular.json changes

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