{"id":13454,"library":"liferay-npm-bundler-preset-angular-cli","title":"Liferay NPM Bundler Preset for Angular CLI","description":"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.","status":"maintenance","version":"2.32.2","language":"javascript","source_language":"en","source_url":"https://github.com/liferay/liferay-frontend-projects","tags":["javascript"],"install":[{"cmd":"npm install liferay-npm-bundler-preset-angular-cli","lang":"bash","label":"npm"},{"cmd":"yarn add liferay-npm-bundler-preset-angular-cli","lang":"bash","label":"yarn"},{"cmd":"pnpm add liferay-npm-bundler-preset-angular-cli","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This package is a preset specifically for `liferay-npm-bundler` and relies on its functionality to process Angular projects for Liferay.","package":"liferay-npm-bundler","optional":false}],"imports":[{"note":"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.","wrong":"import 'liferay-npm-bundler-preset-angular-cli';\n// or\nconst preset = require('liferay-npm-bundler-preset-angular-cli');","symbol":"preset","correct":"{\n  \"preset\": \"liferay-npm-bundler-preset-angular-cli\"\n}"},{"note":"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.","wrong":"// No equivalent 'wrong' code for this conceptual import, it's about the file itself.","symbol":".npmbundlerrc","correct":"{\n  \"preset\": \"liferay-npm-bundler-preset-angular-cli\",\n  \"features\": {\n    \"commonjs\": true,\n    \"json\": true\n  }\n}"},{"note":"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.","wrong":"import { AngularApplication } from 'liferay-npm-bundler-preset-angular-cli';\n// (The preset doesn't export the application itself)","symbol":"AngularApplication","correct":"/* Angular CLI-generated application structure */\n// (The preset handles the bundling of this structure)"}],"quickstart":{"code":"// 1. Ensure you have an Angular CLI project set up and liferay-npm-bundler installed.\n//    e.g., npm install -g @angular/cli\n//    e.g., npm install --save-dev liferay-npm-bundler\n\n// 2. Install the Liferay Angular CLI bundler preset as a development dependency.\n//    Run in your Angular project's root directory:\n//    npm install --save-dev liferay-npm-bundler-preset-angular-cli\n\n// 3. Create or modify the .npmbundlerrc file in your project's root.\n//    This file instructs `liferay-npm-bundler` to use the Angular-specific configuration\n//    provided by this preset.\n//    .npmbundlerrc (JSON file example):\n/*\n{\n    \"preset\": \"liferay-npm-bundler-preset-angular-cli\",\n    \"features\": {\n        \"commonjs\": true,\n        \"json\": true,\n        \"sass\": true,\n        \"css\": true\n    },\n    \"globals\": {\n        \"liferay-amd-loader\": \"LiferayAmdLoader\"\n    }\n}\n*/\n\n// 4. Configure a build script in your package.json to run the bundler.\n//    package.json excerpt:\n/*\n{\n  \"name\": \"my-angular-liferay-portlet\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"build:liferay\": \"npm run build -- --configuration production && liferay-npm-bundler\"\n  },\n  \"devDependencies\": {\n    \"liferay-npm-bundler\": \"^2.x.x\",\n    \"liferay-npm-bundler-preset-angular-cli\": \"^2.x.x\"\n  }\n}\n*/\n\n// After these steps, running `npm run build:liferay` will build your Angular project\n// using Angular CLI and then process its output with `liferay-npm-bundler` and this preset\n// to generate a Liferay-compatible OSGi bundle.","lang":"typescript","description":"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."},"warnings":[{"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.","message":"The `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.","severity":"breaking","affected_versions":">=2.x.x"},{"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.","message":"Angular 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.","severity":"gotcha","affected_versions":">=2.0.0"},{"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.","message":"You 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.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"Multiple Angular portlets or an instanceable Angular portlet on the same page, leading to conflicts in Angular's global state management or module bootstrapping.","error":"Cannot read properties of undefined (reading 'ɵmod') or similar Angular bootstrapping errors on Liferay page."},{"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.","cause":"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.","error":"ERROR Error: Zone already loaded."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null}