Creating an Angular Project for the CUI Template
Follow the instructions present in the [Angular official documentation] to create a new Angular application.
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/
.
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.