Angular CLI script application sample
This 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 WebSphere Portal.
This article is intended for developers and architects, with an existing background knowledge of Angular and IBM Script Application.
- WebSphere Portal version 8.5, CF 09 or higher
- node version 6.x
- IBM Script Application
- Command line push application for IBM Script Application
- If Angular CLI is already installed globally, ensure it is at least version 1.4.5
This 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 IBM 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 portal page, possibly alongside other portlets.
Here are the key features illustrated in the sample:
- The three different views (list, details, and about) are separate Angular components loaded as pages with the Angular router, configured in app.module.ts.
- Angular Http is used to load the default JSON data file: src/assets/contacts.json.
- The Bootstrap 3 library is used for styling of the application UI.
To set up this sample:
- Download and unzip this npm repository.
- Install project dependencies by running
There are a few settings that need to be configured for WebSphere Portal to run any Angular application. These changes only need to be done once:
- Set (or create) both the
renderingplugin.shortform.enabledresource environment provider values of the
WCM WCMConfigServiceservice to
falsein the WebSphere Integrated Solutions Console, as this feature can interfere with Angular code that uses square brackets. Make sure to restart the
WebSphere_Portalserver after these updates. Click here for more information on these settings.
- The Angular router requires the
basetag to be present on the page. Do this by setting the theme parameter
true. The XML script to do this can be found here, and can be imported using the Administration portlet.
When creating a new Angular CLI application to run in the IBM Script Application, some code updates should be implemented. This sample already includes these changes:
- Add the
data-scriptportlet-combine-urls="true"parameter to the
htmltag in src/index.html to take advantage of WebSphere Portal's resource aggregator.
- Configure hash location strategy in the Angular router. Using the path location strategy is not compatible with WebSphere Portal URLs.
After configuration and development, build an application for production:
ng build -prodto package and compress the application into the
Note If the
ng command is not found, install the package globally by following the instructions here.
After building the application, use the Script Application command line application to push it to WebSphere Portal:
- From the
sp push -wcmContentName "Angular 4 CLI Contacts Sample"
- Add the Script Application to a page.
Alternatively 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.
Angular CLI information
This project was generated with Angular CLI version 1.4.5.
ng serve for a dev server. Navigate to
http://localhost:4200/. The app will automatically reload if you change any of the source files.
ng generate component component-name to generate a new component. You can also use
ng generate directive|pipe|service|class|guard|interface|enum|module.
ng build to build the project. The build artifacts will be stored in the
dist/ directory. Use the
-prod flag for a production build.
Running unit tests
ng test to execute the unit tests via Karma.
Running end-to-end tests
ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use
ng help or go check out the Angular CLI README.
See the included license file License.