{"id":23624770,"url":"https://github.com/hcl-tech-software/sample-angular-script-application","last_synced_at":"2025-08-31T00:31:27.105Z","repository":{"id":39243674,"uuid":"237054757","full_name":"HCL-TECH-SOFTWARE/sample-angular-script-application","owner":"HCL-TECH-SOFTWARE","description":"This sample illustrates building an Angular CLI application and deploying it as a script application. It includes all the configuration and build steps needed to get the application running smoothly in HCL Digital Experience.","archived":false,"fork":false,"pushed_at":"2023-03-04T05:52:16.000Z","size":705,"stargazers_count":8,"open_issues_count":20,"forks_count":4,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-12-20T12:15:45.585Z","etag":null,"topics":["angular","dx","hcl-dx"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HCL-TECH-SOFTWARE.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-29T18:35:30.000Z","updated_at":"2024-11-01T13:43:35.000Z","dependencies_parsed_at":"2023-02-07T09:45:27.517Z","dependency_job_id":null,"html_url":"https://github.com/HCL-TECH-SOFTWARE/sample-angular-script-application","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HCL-TECH-SOFTWARE%2Fsample-angular-script-application","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HCL-TECH-SOFTWARE%2Fsample-angular-script-application/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HCL-TECH-SOFTWARE%2Fsample-angular-script-application/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HCL-TECH-SOFTWARE%2Fsample-angular-script-application/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HCL-TECH-SOFTWARE","download_url":"https://codeload.github.com/HCL-TECH-SOFTWARE/sample-angular-script-application/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231539820,"owners_count":18392343,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","dx","hcl-dx"],"created_at":"2024-12-27T21:16:25.701Z","updated_at":"2024-12-27T21:16:26.237Z","avatar_url":"https://github.com/HCL-TECH-SOFTWARE.png","language":"TypeScript","readme":"# Angular CLI script application sample\n\n## Overview\n\nThis sample illustrates building an Angular CLI application and deploying it as a JSR-286 script application portlet. It includes all the configuration and build steps needed to get the application running smoothly in HCL Digital Experience.\n\n[Angular CLI](https://cli.angular.io/) is a command line tool that allows developers to quickly get their applications up and running. This sample showcases a simple contact list written in [Angular 8](https://angular.io/).\n\nWith the HCL DX Script Application, any JavaScript framework application can be imported as a JSR-286 portlet and hosted on HCL Digital Experience. Since the sample application is platform agnostic, the same code can be run as a portlet or mobile app, allowing reuse over multiple devices and platforms.\n\n### Target audience\n\nThis article is intended for developers and architects, with an existing background knowledge of Angular and HCL DX Script Application. \n\n### Requirements\n\n- HCL Digital Experience version 8.5, CF 09 or higher\n- [node](https://nodejs.org/en/) version 10.13 or later\n- [HCL Script Application](https://help.hcltechsw.com/digital-experience/8.5/script-portlet/ibm_script_portlet.html)\n- [Command line push application for HCL Script Application](https://help.hcltechsw.com/digital-experience/8.5/script-portlet/cmd_line_push_ovr.html)\n- If [Angular CLI](https://cli.angular.io/) is already installed globally, ensure it is at least version 8.3.23\n\n## Sample application \n\n### Description\n\nThis is an example of a simple application built with Angular CLI and the Bootstrap CSS library. It can run standalone with the `ng serve` command, and it can be imported into an HCL DX Script Application. It's an example of a Single Page Application (SPA), where the different views within a single index.html page are dynamically loaded by the Angular framework. When used in a Script Application, a SPA is displayed as one portlet on a page, possibly alongside other portlets. \n\nHere are the key features illustrated in the sample:\n\n* The three different views (list, details, and about) are separate Angular components loaded as pages with the [Angular router](https://angular.io/guide/router), configured in app.module.ts.\n* [Angular HttpClient](https://angular.io/guide/http) is used to load the default JSON data file: *src/assets/contacts.json*.\n* There are a few separate JavaScript files in the built application, and when running in HCL Script Application they are combined into a single resource by HCL Digital Experience's [resource aggregation](https://help.hcltechsw.com/digital-experience/8.5/dev-theme/themeopt_reso_agg.html) feature (available in version 8.5, CF03 or later).\n* The [Bootstrap 3](https://getbootstrap.com/docs/3.3/) library is used for styling of the application UI.\n\n### Install\n\nTo set up this sample:\n\n1. Download and unzip this [npm](https://www.npmjs.com/get-npm) repository.\n2. Install project dependencies by running `npm install`.\n\n### Configure\n\nHCL Digital Experience\n* Set (or create) both the `dynamic.parameter.tag.enabled` and the `renderingplugin.shortform.enabled` [resource environment provider](https://help.hcltechsw.com/digital-experience/8.5/admin-system/adsetcfg.html) values of the `WCM WCMConfigService` service to `false` in the HCL Digital Experience Integrated Solutions Console, as this feature can interfere with Angular code that uses square brackets. \nStarting with CF201 a configuration task can be used instead - for details see: [here]{https://help.hcltechsw.com/digital-experience/8.5/script-portlet/script_app_improvements.html?hl=react#script_app_improvements__section_mhm_pzw_3sb}\n\nMake sure to restart the `WebSphere_Portal` server after these updates. Click [here](https://help.hcltechsw.com/digital-experience/8.5/wcm/wcm_tags_behavior.html) for more information on these settings.\n* The Angular router requires the `HTML` `base` tag to be present on the page. Do this by setting the theme parameter `com.ibm.portal.theme.hasBaseURL` to `true`. The XML script to do this can be found [here](https://help.hcltechsw.com/digital-experience/8.5/wcm/prevent_friendly_url_redirects.html), and can be imported using the [Administration portlet](https://help.hcltechsw.com/digital-experience/8.5/admin-system/adxmltsk_portlets_imp.html).\n\n### Develop\n\nWhen creating a new Angular CLI application to run in the HCL Script Application, some code updates should be implemented. This sample already includes these changes:\n\n* Add the `data-scriptportlet-combine-urls=\"true\"` parameter to the `html` tag in *src/index.html* to take advantage of HCL Digital Experience's resource aggregator.\n* Configure [hash location strategy](https://angular.io/guide/router#hashlocationstrategy) in the Angular router. Using the path location strategy is not compatible with HCL Digital Experience URLs.\n\n### Build\n\nAfter configuration and development, build an application for production:\n\n1. Run `ng build --prod` to package and compress the application into the `/dist` folder.\n\n**Note** If the `ng` command is not found, install the package globally by following the instructions [here](https://github.com/angular/angular-cli#installation).\n\n### Deploy\n\nAfter building the application, use the [Script Application command line application](https://help.hcltechsw.com/digital-experience/8.5/script-portlet/cmd_line_push_cmd.html) to push it to HCL Digital Experience:\n\n1. From the `/dist` folder, run `sp push -wcmContentName \"Angular 8 CLI Contacts Sample\"`\n2. [Add the Script Application](https://help.hcltechsw.com/digital-experience/8.5/script-portlet/drop_app_toolbar.html) to a page.\n\nAlternatively to sp push one can also zip the contents of the dist folder into a zip file and use the import functionality of the script application to import.\n\n## Angular CLI information\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.23.\n\n### Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n### Code scaffolding\n\nRun `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n### Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.\n\n### Running unit tests\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n### Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).\n\n### Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).\n\n## Support\n\nThis software is provided \"AS-IS\" without warranty of any kind, expressed or implied. \n\n\n## License\n\nSee the included license file [License](LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhcl-tech-software%2Fsample-angular-script-application","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhcl-tech-software%2Fsample-angular-script-application","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhcl-tech-software%2Fsample-angular-script-application/lists"}