Using an Angular (Angular 4) Single Page Application as a Script Portlet
Open source JavaScript frameworks are becoming the de-facto platform for web or mobile development. There are several advantages of using a JavaScript framework for web or mobile development. However, the biggest advantage of using these JavaScript frameworks is that they make your web or mobile application completely platform agnostic. Until you can access your service over HTTP protocol and get your response data, you can build your entire application client side by using these open source JavaScript frameworks irrespective of your back-end platform.
IBM Script Portlet takes this platform agnostic approach to building web and mobile applications up a notch. With the Script Portlet, you can import any JavaScript framework application as a JSR-286 portlet and host it on WebSphere Portal. You can build your entire enterprise portal by building individual JavaScript framework applications and importing them as portlets with Script Portlet irrespective of your back-end platform. You can also use the same application in a mobile app and as a portlet. Therefore, you can reuse the same code for multiple devices and multiple platforms.
The following article describes the steps to import a simple Angular (Angular 4) Single Page Application in a Script Portlet to convert it into a JSR-286 portlet.
NOTE: If you are interested in using ReactJS, Backbone.js or AngularJS (Angular1), refer to the following articles:
- Using a ReactJS Single Page Application as a Script Portlet
- Using a Backbone.js Single Page Application as a Script Portlet
- Using an AngularJS (Angular1) Single Page Application as a Script Portlet
The ReactJS, Backbone.js, and AngularJS articles demonstrate how to build and deploy the same sample application with respective JavaScript Frameworks that is described in this Angular article. This adds credence to the argument that you can use Script Portlet to import Single Page Applications as portlets irrespective of what JavaScript framework is used to build the application.
Target AudienceThis article is intended for developers and architects. It illustrates how a Single Page Application built in an open source JavaScript framework, like Angular, can be converted into a JSR-286 portlet with minimal effort. This article is not intended to be an introduction or tutorial for either Angular or IBM Script Portlet.
Application Overview
The sample Angular application that is built in this article demonstrates the functions of viewing and searching an Employee Directory in Script Portlet that is hosted on WebSphere Portal. As the portlet is rendered, it displays the entire employee list as shown in the following image.
The user can type in the search box to search by employee name. The search input is a type-ahead field and the employee list that is displayed is filtered as the user types in the search string.
Rest Services for Sample Application
The application uses the following two rest services to get its data.
The REST services that are listed return either a single or collection of following JSON object.
{ “id”:”1″, “name”:”Samantha Daryn”, “title”:”Sr. Vice President”, “location”:”Chicago”, “email”:”daryn981029@xyzmail.com”, “phone”:”3456″, “image”:”http://{yourdomain}:{port}/images/SamanthaDaryn.jpg” }
Prerequisites
Make sure that you have the latest version of Node.js installed on your machine. You will use the Angular CLI to build the angular application in the later steps.
Setting up your WorkspaceOpen a command prompt window and go to the directory on your file system where you want to create the EmployeeDirectory application. Run the commands in the next section in the sequence that is mentioned to set up your workspace.
- npm install -g @angular/cli
- ng new EmployeeDirectory
- cd EmployeeDirectory
- ng eject
- ng g component employeeList
- ng g service employee-list/employeeList
Note: The commands that are listed implement the following:
- npm install -g @angular/cli – Installs Angular CLI globally on your system, which you will use to create the Angular application.
- ng new EmployeeDirectory – Creates a directory EmployeeDirectory on your file system and installs all the modules under it that you will need to create the Angular application.
- ng eject – Ejects the app and exposes the webpack.config.js file that you will customize in later steps to deploy the application.
- ng g component employeeList – Creates the empty shell for employeeList Angular component that you will use to build the application.
- ng g service employeeList – Creates the empty shell for employeeList Angular service that you will use in this angular application under the employee-list folder that is created by the previous step.
Creating the Angular Service
Add the following code to employee-list.service.ts file to create the Angular services.
Note: The TypeScript code shown implements the following:
- Creates getEmployeeList service to be consumed by an Angular component.
- Creates getEmployeeByName service to be consumed by an Angular component.
Creating the Angular Component
Add the following code to employee-list.component.ts file to create the Angular services.
Note: The TypeScript code shown implements the following:
- Creates the EmployeeList Component by defining the selector, templateURL, and providers.
- Imports the EmployeeListService created in previous step.
- Defines the constructor of the EmployeeList component, which calls the getEmployeeList service of the Angular Service.
- Defines a filterRecords function in the EmployeeList component that calls the getEmployeeByName service of the Angular Service.
Add the following code to employee-list.component.html file to create the UI for the component.
Note: The HTML code shown implements the following:
- Creates a search input box with which calls the filterRecords function of the component.
- Create a list of employees by using the *ngFor directive that iterates through the service results.
This completes the steps required to build the Angular component.
Putting it All Together
Modify app.module.ts to register and bootstrap the EmployeeList component.
Note: The TypeScript code shown implements the following:
- Imports the relevant modules required by the EmployeeList component.
- Define the URL routing for the EmployeeList component.
- BootStrap the EmployeeList component so that it is initialized by Angular.
Next, modify index.html to call the EmployeeList component.
This completes all the steps to build your Angular application.
Building your Angular Application
Now that you completed developing your Angular application, it is time to build your application for deployment. Add the following code to webpack.config.js file before you build the application.
In the top section of the file, add:
const webpack = require('webpack');

Under the module export sections, add:
new webpack.optimize.UglifyJsPlugin({
output: {
"ascii_only": true
}
}),

Note:These changes to webpack.config.js are required to preserve Unicode characters post minification of the JavaScript files during the build process. Refer to the Technote for more details.
Next, open a command prompt window and navigate to the EmployeeDirectory folder on your file system. To build the Angular app, from the command prompt, run the command:
- npm run build
This creates a folder dist under the EmployeeDirectory folder on your file system. This folder contains all the artifacts that you require to deploy your application to any server.
Running your Angular Application as a Portlet
Now that you have your Angular application built, the next step is to deploy this Single Page Application as a portlet on WebSphere Portal with Script portlet in one of the following two ways:
- Using Command Line Push Script to Deploy Script Portlet Applications – Command Line Push can be used for iterative editing during the development of your application and thus you do not need to wait until you complete your application development. You can see your changes in Script portlet as you push your changes.
- Importing your application as a zip file in Script Portlet – This approach is preferred when you have an application ready to go and all you need is to import in a Script portlet to host on WebSphere Portal. Zip the contents of you application folder that contains your html, js, css, and other relevant code and import it in an instance of Script portlet.
After you deploy your application in a Script Portlet, test your application as a portlet that runs on WebSphere Portal.
Conclusion
The above article illustrates that you can convert a JavaScript framework based Single Page Application into a JSR-286 portlet with minimal effort thus leveraging your JavaScript framework knowledge as well as leveraging WebSphere Portal as your enterprise platform.
Refer to the article “Using Single Page Applications with Script Portlet” to understand best practices, tips and limitations of importing JavaScript framework applications as portlets.
References
- Using an AngularJS (Angular1) Single Page Application as a Script Portlet
- Using a Backbone.js Single Page Application as a Script Portlet
- Using a ReactJS Single Page Application as a Script Portlet
- Using Command Line Push Script to Deploy Script Portlet Applications
- Using Single Page Applications with Script Portlet
About the Authors
Abhishek Singh (abhisheks@us.ibm.com) is a Senior Digital Experience Architect with IBM Watson Customer Engagement. He has over 17 years of IT experience specializing in delivery of Portal and Mobile Application development with focus on SOA, Analytics, Content Management Systems, Responsive UI design and enterprise Java/ JEE applications. His experience includes designing and developing software products, service- oriented architecture, information systems, telecom applications, and client/server applications.
Nischitha Rai (nyrai@us.ibm.com) is a Managing Consultant working with IBM Watson Customer Engagement. She has over 10 years of experience working on several WebSphere Portal and JAVA/JEE application development engagements. Her expertise is in WebSphere Portal, WebSphere Experience Factory and Content Management Systems.
Hi thanks for the effort. I follow the post but I encountered some problems.
The `EmployeeListService` is not provided. It should be provided in the module: `providers: [EmployeeListService]`.
The routing removes the path and parameters from the url. As a result, you can’t refresh the page. Also the `app-employee-list` is displayed statically. Actual routing would require a `router-outlet`.
Multiple Angular4 script portlets on a single page results in a ZoneJS exception.
As of Angular-CLI 1.3 it is no longer required to eject the webpack config. Unicode character compression is prevented.
Good day
I am using “Angular CLI: 1.7.0” to compile my angle project, but when I try to upload two applications on the same portal page, the error “Error: Zone already loaded.”
What should we do to prevent this from happening?
I would really appreciate any help
regards
Hello Augusto.
Were you able to fix the “Error: Zone already loaded.” issue?
As I faced the same problem when uploading 2 Angular script portlets on the same page.
My understanding that your issue is when loading 2 angular applications, the reason for that may be due to the fact that you are trying to initialize the same angular component twice and hence the second invocation fails. When having multiple angular applications on the same portal page, consider delegating angular initialization to the portal theme.
Thank you Abhishek for your response.
I understand that we can initialize AngularJS in the portal theme, but starting of Angular 2, the code is written in Typescript, and when building the application, new JS files are generated, where I assume we do not have control of.
So, it seems we need to look for another way.
Good stuff Abhishek/Nischitha.
Hey can anyone make a video of walk through steps for deploying a basic Angular6 app as script portlet. The steps here are very clear. But missing some steps may be.. it is not really working.
A video with all details, like what kind of IBM websphere accounts we need, to deploying a basic angular app would be helpful