0

I'm trying to create a client extension for Liferay using Angular, but after deploying the extension, it shows up as a blank screen. Below are the steps I followed:

Steps I Took:

  • Created Liferay Workspace:

  • I created a liferay-workspace and added a client-extensions folder inside the workspace.

Created Angular Project:

  • Inside the client-extensions folder, I created an Angular project using ng new. The Angular version I used is 14.

I made changes to the Angular project:

  • Created client-extension.yaml file
assemble:
    - from: build/static
      into: static
sample-page:
    cssURLs:
        - styles.*.css
    friendlyURLMapping: sample-page
    htmlElementName: sample-page
    instanceable: false
    name: My Sample Page 
    portletCategoryName: category.client-extensions
    type: customElement
    urls:
        - main.*.js
        - polyfills.*.js
        - runtime.*.js
    useESM: true
  • Updated the app-root tag in app.component.ts to match my custom element name from the client extension YAML (sample-about-page).

app.component.ts

@Component({
  selector: 'sample-page',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
  • Updated the root element in index.html to use . Added the necessary client-extension.yaml file to configure the extension.

index.html

<body>
  <sample-page></sample-page>
</body>

Built the Project:

From the workspace root, I ran ./gradlew build, which created the dist and build folders, and generated a ZIP file of the Angular project.

Deployed to liferay:

  • I copied the generated ZIP file into liferay-portal/osgi/client-extensions folder.
  • I started the Liferay server by navigating to liferay-portal/tomcat/bin and running the command sh startup.sh.
  • The Liferay server launched on localhost:8080.
  • I verified the client extension in the control panel (Control Panel > Client Extensions), and the extension was listed there.
  • On the home page, I clicked the pencil (pen icon) and found the extension in the widget list. After dragging and dropping the extension onto the screen, it shows up as a blank screen.

Problem: The Angular client extension appears in Liferay’s widget section and can be dragged onto a page, but the widget itself is blank when rendered on the page.

Additional Info:

  • The client-extension.yaml file was configured with the correct htmlElementName (sample-page).
  • The root element in index.html was updated to use .
  • I am not using Angular routing, and all code is placed inside the app.component.html.

What Could Be Going Wrong?

I would appreciate any insights or suggestions on what might be causing the client extension to display as a blank screen after deployment. Are there any additional configurations or steps I might have missed when integrating an Angular client extension with Liferay?

Darsh8
  • 1

1 Answers1

0

I solved the issue by modifying the client-extension.yaml file. The problem was with the incorrect path in the assemble section. I replaced:

assemble:
    - from: build/static
      into: static

With:

assemble:
    - from: dist/sample-page
      into: static

This change corrected the file paths and resolved the issue.

Darsh8
  • 1