We used cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. What For?

« Back to Blogs

Angular 4 Portlet in Liferay DXP/7

Why do we need to integrate angular with portlet?

Single Page Application (SPA) is an application that fits on a single web page with dynamic actions without refreshing the page. To build SPA we can use Angular - an open source SPA framework. To create Single Page Application using Angular(formerly known as AngularJS) in liferay portlet, it is necessary to integrate angular with the portlet.

 

Prerequisite:

Before visiting this blog, please make sure you must have a basic idea of angular and how to create mvc portlet .

 

Environment requirements:

  • Liferay IDE v3.0+

  • Liferay Portal 7.0.2 CE GA3 / Liferay DXP

  • JDK 8

  • Blade CLI

  • Gradle 3.0

  • node version : 4.7.0+

  • npm version :  5.5.1+

             

Creating MVC-Portlet Module:

  1. Create an MVC portlet by using Liferay IDE or Blade CLI and Edit following generated files.

    • bnd.bnd

      • Add these 2 lines at the end of file:

        -includeresource: package.json

        -plugin.npm: com.liferay.ant.bnd.npm.NpmAnalyzerPlugin

    • build.gradle

      • Add buildscript and plugin before dependencies:


        build.gradle-1

         

      • Add Gradle build tasks:- npmInstall, compileTypeScript,  copyAngularModules as described below.

         

        build.gradle-2

         

    • view.jsp

      • Add system scripts from node modules and configure environment  variable according to requirements.

         

        view.jsp

         

      • Change angular-portlet-1.0.0 with <YOUR-PORTLET-NAME>-1.0.0

      • Change selector name (e.g.  angular-app)  according to index.html

  2. Create following angular resources:

    • package.json inside( /modules/angular-portlet/ ) : Used to manage locally installed npm packages.You can add or remove packages according to your requirements.

    • tsconfig.json inside( /modules/angular-portlet/ ) : It is a typescript configuration file to guide the compiler as it generates javascript files.

    • index.html, main.ts, polyfills.ts inside(/modules/angular-portlet/src/main/resources/META-INF/resources/) :

      • index.html : Main layout file

      • main.ts : It is the entry point of application, compiles the application with just-in-time and bootstraps the application’s root module.

      • polyfills.ts : Many browsers lack native support for some features in the latest HTML standards, features that Angular requires. "Polyfills" can emulate the missing features.

      • Create new folder : e.g.  app  (/modules/angular-portlet/src/main/resources/META-INF/resources): Create files app.component.ts, app.module.ts inside this folder

        • app.component.ts : The main component

        • app.module.ts : An Angular module class describes how the application parts fit together.

  3. Add this file to configure angular with liferay:

    • systemjs.config.js inside( /modules/angular-portlet/src/main/resources/META-INF/resources/ ) :It is used to tell SystemJS where to look when we import a module.

      Now, project structure will look like :

       

      angular-portlet-structure

       

  4. Update angular resources created in step 2 to bootstrap angular in portlet:

    • package.json : Add dependencies and devDependencies according to your project need and also change angular version to 5.0.0

       

      tsconfig.json

       

    • tsconfig.json : Add include and exclude directory paths to bundle required files.

    • index.html : html tag used to bootstrap App must match component selector.

    • main.ts :

      • Change bootstrapModule method like

         

        main.ts

         

      • If you change selector name in app.component.ts, change angular-app with that name in main.ts as well.

    • systemjs.config.js : Change web context path in this file according to your portlet name.

       

      systemjs.config.js

       

    • polyfills.ts : Update polyfills.ts file with the following code

       

      polyfills.js

       

Deployment:

Run below blade commands to deploy angular portlet.

  • To build project run command: blade gw build

  • To create jar file for portlet run command: blade gw deploy

After deployment add portlet and it will look like :

 

angular-portlet-output

 

 

Explore more about our Angular JS Development Services.

contact-us Request a callback WhatsApp