Liferay is a web application platform that allows developers to create and manage complex web applications with ease. It offers a range of features and tools that enable developers to build feature-rich, dynamic, and interactive web applications that cater to various business needs.

Liferay also supports client-side extensions that allow developers to create custom user interfaces for Liferay applications using popular client-side technologies such as Angular. 

Angular is a popular client-side JavaScript framework for building web applications. It offers a range of features and tools that enable developers to build highly interactive and dynamic web applications. By integrating Angular with Liferay, developers can create custom user interfaces that cater to their business needs.

Angular Custom Elements, on the other hand, is a feature of Angular that allows us to create custom HTML elements with Angular components. These custom elements can be used in any web application including Liferay.

In this article, we will explore how to create a Liferay client extension with Angular.

Step 1: Set up the development environment

To start building a Liferay client extension with Angular, you need to set up your development environment. You will need to have the following tools installed:

• Liferay 

• Angular CLI

Step 2: Create a new Angular project 

Once you have set up your development environment, you can create a new Angular project. You can use the Angular CLI to create a new project. 

To create a new Angular project, open your terminal and run the following command:

ng new my-app

This will create a new Angular project with the name 'my-app'.

Step 3: Create a new component 

Once you have created a new Angular project, you can create a new component. A component is a building block of an Angular application that represents a part of the user interface. 

To create a new component, run the following command:

ng generate component my-component

This will create a new component with the name 'my-component'.

Step 4: Install required dependencies

You will need to install the following npm packages in order to build your web components.

npm i @angular/elements  npm i concat  npm i fs-extra

 

Step 5: Prepare build script “Concat the generated JS files into single JS file”

Navigate to your angular application folder and create a new file “build.js” and insert the following script.

const fs = require('fs-extra'); const concat = require('concat'); const path = require('path'); const buildFolder = '< angular build folder >; const componentBuildFolder = ‘<target build folder>’; const componentBuiltFile = ‘<component-file-name>’; function fromDir(startPath, filter) {     var _files = [];     console.log(startPath);     if (!fs.existsSync(startPath)) {         console.log("Wrong Folder Path!", startPath);         return;     }     var files = fs.readdirSync(startPath);     for (var i = 0; i < files.length; i++) {         var filename = path.join(startPath,files[i]);         if (filename.endsWith(filter)) {             _files.push(filename);             console.log('-- found: ', filename);         };     }     return _files; }; (async function build() {     const js_files = fromDir(buildFolder,'.js');     const css_files = fromDir(buildFolder,'.css');     await fs.ensureDir(componentBuildFolder);     await fs.removeSync(`${componentBuildFolder}/${componentBuiltFile}.js`);     await fs.removeSync(`${componentBuildFolder}/${componentBuiltFile}.css`);     await concat(js_files, `${componentBuildFolder}/${componentBuiltFile}.js`);     await concat(css_files, `${componentBuildFolder}/${componentBuiltFile}.css`); })();

 

Step 6: Prepare live testing server “Provide component live testing” 

In order to have a live testing experience, we will need to create a simple node js express server to publish your component(s) js and css files over http.

Create a node js file “testing_server.js” under your angular project folder and insert the following script:

var express = require('express') var path = require('path') var serveStatic = require('serve-static') var app = express() app.use(serveStatic(path.join(__dirname, '<target build folder>'))) app.listen(3000)

 

Step 7: Create Build and Publish Commands

Navigate to you angular project root folder, edit “package.json” look for the scripts section and insert the following:

"build-element": "ng build && node ./build.js",  "publish-element": "npm run build-element && node ./server_testing.js"

 

Step 8: Configure application to build Web Components

Navigate to your angular project, open “app.module.ts” and remove “bootstrap: [AppComponent]” and insert the following code inside your AppModule class:

ngDoBootstrap() {}  constructor(private injector: Injector)  {  const myComponent = createCustomElement(my-component, { injector: this.injector }); customElements.define("<your component element tag>", myComponent); }

 

Step 9: Build your component

In order to build your component, run the following command:

npm run build-element

Once the command is executed successfully, you will have a folder containing your component’s JS and CSS files generated.

Step 10: Integrate the created component in Liferay

Navigate to Liferay -> global menu -> Custom Apps -> Client Extensions and click the plus icon to add a new client extension “Custom Element”.

In the configuration panel make sure to specify the JS and CSS files URLyou have generated.

Step 11: Enable Live Testing

Open your angular project and run the following command at the project root:

npm run publish-element

This command will build your project, create the web component JS and CSS files and then start a node express server to provide you with two http url for your component:

http://localhost:3000/components.js

http://localhost:3000/components.css

Step 12: Test your component in Liferay Page

Create a new Liferay Page and try to find the create Custom Element under the widgets in the left side menu.

If you want to do any change in the angular application and test that on Liferay, do the required changes and then run the following command:

Npm run build-element

 

This will rebuild the application files and since we have a node js express server serving the files to Liferay, you will just need to refresh the Liferay page to see the changes on Liferay.

 

Example Source Repository

https://github.com/mahmoudhtayem87/generic_components