Registry / web-framework / liferay-npm-bundler-preset-angular-cli

liferay-npm-bundler-preset-angular-cli

library2.32.2jsnpmunverified

The `liferay-npm-bundler-preset-angular-cli` package is a specialized configuration preset designed to facilitate the integration of projects created with the Angular CLI into the Liferay DXP and Liferay Portal CE environments. It serves as an extension for `liferay-npm-bundler`, streamlining the process of packaging Angular applications into OSGi-compliant modules that can be deployed as Liferay portlets. This preset addresses the unique challenges of Angular's bootstrapping mechanism within a portal context, ensuring proper module resolution and execution. The current stable version is `2.32.2`. While direct changelog updates for this specific package are not provided in the recent releases excerpt, it belongs to the actively maintained `liferay-frontend-projects` monorepo, implying ongoing development and compatibility updates. Its core value lies in offering a pre-configured solution that enables Angular developers to leverage their familiar toolchain while adhering to Liferay's frontend development best practices, simplifying what would otherwise be a complex manual configuration process for module federation.

web-framework devops

npm install liferay-npm-bundler-preset-angular-cli

github ↗package ↗

INSTALL

IMPORT

SIG · LIFERAY-NPM-BUNDLE

liferay-npm-bundler-preset-angular-cli

web-frameworkjavascriptv2.32.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

preset

✓ { "preset": "liferay-npm-bundler-preset-angular-cli" }

✗ import 'liferay-npm-bundler-preset-angular-cli'; // or const preset = require('liferay-npm-bundler-preset-angular-cli');

This package functions as a configuration preset for the `.npmbundlerrc` file, not a JavaScript module. Its functionality is activated by referencing its name as a string value under the `preset` key. There are no traditional JavaScript or TypeScript symbols exported for direct code-level imports from this package.

.npmbundlerrc

✓ { "preset": "liferay-npm-bundler-preset-angular-cli", "features": { "commonjs": true, "json": true } }

✗ // No equivalent 'wrong' code for this conceptual import, it's about the file itself.

The `.npmbundlerrc` file is the primary interface for configuring `liferay-npm-bundler` and its presets. This preset specifically defines how Angular CLI projects should be bundled for Liferay, making the configuration of this file crucial.

AngularApplication

✓ /* Angular CLI-generated application structure */ // (The preset handles the bundling of this structure)

✗ import { AngularApplication } from 'liferay-npm-bundler-preset-angular-cli'; // (The preset doesn't export the application itself)

While this package doesn't export `AngularApplication` as a symbol, its core purpose is to correctly process and prepare an Angular CLI-generated application for deployment to Liferay. The 'import' here refers to the conceptual integration of an Angular application's build output into the Liferay bundler's workflow.

This quickstart demonstrates how to install the preset and configure your `.npmbundlerrc` and `package.json` to enable `liferay-npm-bundler` to correctly process and deploy an Angular CLI project as a Liferay portlet.

// 1. Ensure you have an Angular CLI project set up and liferay-npm-bundler installed. // e.g., npm install -g @angular/cli // e.g., npm install --save-dev liferay-npm-bundler // 2. Install the Liferay Angular CLI bundler preset as a development dependency. // Run in your Angular project's root directory: // npm install --save-dev liferay-npm-bundler-preset-angular-cli // 3. Create or modify the .npmbundlerrc file in your project's root. // This file instructs `liferay-npm-bundler` to use the Angular-specific configuration // provided by this preset. // .npmbundlerrc (JSON file example): /* { "preset": "liferay-npm-bundler-preset-angular-cli", "features": { "commonjs": true, "json": true, "sass": true, "css": true }, "globals": { "liferay-amd-loader": "LiferayAmdLoader" } } */ // 4. Configure a build script in your package.json to run the bundler. // package.json excerpt: /* { "name": "my-angular-liferay-portlet", "version": "1.0.0", "scripts": { "build:liferay": "npm run build -- --configuration production && liferay-npm-bundler" }, "devDependencies": { "liferay-npm-bundler": "^2.x.x", "liferay-npm-bundler-preset-angular-cli": "^2.x.x" } } */ // After these steps, running `npm run build:liferay` will build your Angular project // using Angular CLI and then process its output with `liferay-npm-bundler` and this preset // to generate a Liferay-compatible OSGi bundle.

Debug

Known issues

breakingThe `liferay-npm-bundler` itself, which this preset extends, is deprecated as of Liferay 2024.Q4/Portal GA129 and is planned for future removal. Projects should consider migrating to standard JavaScript tooling like Esbuild, Webpack, or Vite.

fix

Review official Liferay documentation for migration guides from `liferay-npm-bundler` to modern frontend tooling, particularly for Angular projects, as this preset will become obsolete.

affects: >=2.x.x

gotchaAngular CLI-adapted portlets processed by this preset MUST NOT be instanceable because of the way Angular bootstraps its applications. Deploying an instanceable Angular portlet will lead to runtime errors or unexpected behavior.

fix

Ensure that your Liferay portlet configuration for Angular applications is set to non-instanceable. Avoid attempting to deploy multiple instances of the same Angular portlet on a single Liferay page.

affects: >=2.0.0

gotchaYou MUST NOT place more than one Angular CLI-adapted portlet (processed by this preset) into the same Liferay page due to conflicts arising from Angular's global bootstrapping mechanisms.

fix

Design your Liferay pages to host only a single Angular CLI-adapted portlet per page to prevent bootstrapping conflicts and ensure stable application execution.

affects: >=2.0.0

Errors

Common errors & fixes

Cannot read properties of undefined (reading 'ɵmod') or similar Angular bootstrapping errors on Liferay page.

Multiple Angular portlets or an instanceable Angular portlet on the same page, leading to conflicts in Angular's global state management or module bootstrapping.

fix

Ensure only one Angular CLI-adapted portlet is present on any given Liferay page, and verify that the portlet is configured as non-instanceable in Liferay.

ERROR Error: Zone already loaded.

This error typically occurs when `zone.js` (a dependency of Angular) is loaded multiple times. In a Liferay context, this can happen if multiple Angular portlets are on the same page, or if `zone.js` is bundled incorrectly.

fix

Confirm that only a single Angular CLI-adapted portlet is placed on the Liferay page. Verify bundler configuration to ensure `zone.js` is not duplicated or globally exposed in a conflicting manner, though the preset aims to handle this.

Upgrade

Version history

2.32.2latest on npm

Audit

Dependencies

liferay-npm-bundlerrequiredThis package is a preset specifically for `liferay-npm-bundler` and relies on its functionality to process Angular projects for Liferay.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/liferay/liferay-frontend-projects ↗

packagehttps://www.npmjs.com/package/liferay-npm-bundler-preset-angular-cli ↗