Difference between revisions of "Creating an Angular Project for the CUI Template"
Wikieditor (talk | contribs) (Created page with "Follow the instructions present in the Angular official documentation to create a new Angular application. {{Note| Follow the above...") |
Wikieditor (talk | contribs) |
||
Line 11: | Line 11: | ||
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.<br> | 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.<br> | ||
< | <nowiki> | ||
{ | { | ||
"/networking": { | "/networking": { | ||
Line 24: | Line 24: | ||
} | } | ||
} | } | ||
</ | </nowiki><br> | ||
2. Update the '''''angular.json''''' to enable proxy and SSL in the development server. Perform the following changes in the '''''angular.json'''''file present in '''''projects.hello-cui.architect.serve.options'''''.<br> | 2. Update the '''''angular.json''''' to enable proxy and SSL in the development server. Perform the following changes in the '''''angular.json'''''file present in '''''projects.hello-cui.architect.serve.options'''''.<br> | ||
< | <nowiki> | ||
{ | { | ||
"proxyConfig": "proxy-config.json", | "proxyConfig": "proxy-config.json", | ||
"ssl": true | "ssl": true | ||
} | } | ||
</ | </nowiki><br> | ||
3. Run the Angular App by running the following command:<br> | 3. Run the Angular App by running the following command:<br> | ||
<code> | <code> | ||
Line 39: | Line 39: | ||
{{Note| Give certificate exceptions, when prompted.}}<br> | {{Note| Give certificate exceptions, when prompted.}}<br> | ||
4. Add the following JS files to the '''''src/index.html''''', just before the </body> tag.<br> | 4. Add the following JS files to the '''''src/index.html''''', just before the </body> tag.<br> | ||
< | <nowiki> | ||
<!-- ace-lib includes --> | <!-- ace-lib includes --> | ||
<script type="text/javascript" src="/ace-lib/runtime.js"></script> | <script type="text/javascript" src="/ace-lib/runtime.js"></script> | ||
Line 47: | Line 47: | ||
<script type="text/javascript" src="/ace-lib/vendor.js"></script> | <script type="text/javascript" src="/ace-lib/vendor.js"></script> | ||
<script type="text/javascript" src="/ace-lib/main.js"></script> | <script type="text/javascript" src="/ace-lib/main.js"></script> | ||
</ | </nowiki><br> | ||
5. Add the following CSS file to the '''''src/index.html'''', just before the </head> tag.<br> | 5. Add the following CSS file to the '''''src/index.html'''', just before the </head> tag.<br> | ||
< | <nowiki> | ||
<!-- ace-lib includes --> | <!-- ace-lib includes --> | ||
<link rel="stylesheet" href="/ace-lib/styles.css" /> | <link rel="stylesheet" href="/ace-lib/styles.css" /> | ||
</ | </nowiki><br> | ||
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.<br> | 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.<br> | ||
7. Add <code>CUSTOM_ELEMENTS_SCHEMA</code><br> | 7. Add <code>CUSTOM_ELEMENTS_SCHEMA</code><br> | ||
8. Configure the routes to use "#" by modifying the '''''src/app/app-routing.module.ts''''' file as below.<br> | 8. Configure the routes to use "#" by modifying the '''''src/app/app-routing.module.ts''''' file as below.<br> | ||
< | <nowiki> | ||
@NgModule({ | @NgModule({ | ||
imports: [RouterModule.forRoot(routes, { useHash: true })], | imports: [RouterModule.forRoot(routes, { useHash: true })], | ||
Line 62: | Line 62: | ||
}) | }) | ||
export class AppRoutingModule { } | export class AppRoutingModule { } | ||
</ | </nowiki><br> | ||
9. Add the SASS-based CSS theming support to the application by installing the '''''ace-lib-theme''''' using the following command.<br> | 9. Add the SASS-based CSS theming support to the application by installing the '''''ace-lib-theme''''' using the following command.<br> | ||
<code>npm i ace-lib-theme</code><br> | <code>npm i ace-lib-theme</code><br> |
Latest revision as of 09:42, 7 February 2023
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.