{"id":13455,"library":"liferay-npm-bundler-preset-angular","title":"Liferay NPM Bundler Angular Preset","description":"The `liferay-npm-bundler-preset-angular` package provides a specialized configuration preset for `liferay-npm-bundler`, designed to streamline the bundling and optimization of Angular projects for deployment within the Liferay Portal environment. It consolidates a set of Babel presets (specifically `babel-preset-liferay-standard`) and Liferay NPM Bundler plugins (like `liferay-npm-bundler-plugin-replace-browser-modules` and `liferay-npm-bundler-plugin-inject-angular-dependencies`) into a single, easy-to-use configuration. This ensures Angular applications are correctly processed for Liferay's module federation and runtime requirements. The current stable version is 1.8.0, and its release cadence is typically tied to the broader `liferay-npm-build-tools` ecosystem rather than an independent schedule. Its key differentiator is simplifying complex build setups for Angular developers working with Liferay by providing a pre-baked, opinionated solution.","status":"active","version":"1.8.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install liferay-npm-bundler-preset-angular","lang":"bash","label":"npm"},{"cmd":"yarn add liferay-npm-bundler-preset-angular","lang":"bash","label":"yarn"},{"cmd":"pnpm add liferay-npm-bundler-preset-angular","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This preset configures the liferay-npm-bundler; it's a core dev dependency.","package":"liferay-npm-bundler","optional":false},{"reason":"Included internally by this preset for standard Babel transformations in Liferay projects.","package":"babel-preset-liferay-standard","optional":false},{"reason":"Included internally by this preset to handle browser-specific module replacements for Liferay compatibility.","package":"liferay-npm-bundler-plugin-replace-browser-modules","optional":false},{"reason":"Included internally by this preset to correctly inject Angular's runtime dependencies into the bundled output for Liferay.","package":"liferay-npm-bundler-plugin-inject-angular-dependencies","optional":false}],"imports":[],"quickstart":{"code":"{\n  \"preset\": \"liferay-npm-bundler-preset-angular\",\n  \"output\": {\n    \"name\": \"angular-portlet\",\n    \"globals\": {\n      \"@angular/core\": \"Liferay.Angular.core\",\n      \"@angular/common\": \"Liferay.Angular.common\"\n    }\n  },\n  \"plugins\": [\n    // Any additional liferay-npm-bundler plugins specific to your project\n    // For example, if you need to process other file types or modify behavior\n    // {\"name\": \"liferay-npm-bundler-plugin-css\"}\n  ]\n}","lang":"json","description":"Shows how to configure your project's `.npmbundlerrc` file to use the Angular preset, including typical output and global settings."},"warnings":[{"fix":"Consult the official Liferay documentation and `liferay-npm-build-tools` release notes for compatibility matrices and migration guides before upgrading.","message":"Major version upgrades of `liferay-npm-bundler` or the underlying `liferay-npm-build-tools` can introduce breaking changes to the preset's internal configuration or expected behavior. Always review the release notes.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure that custom Babel configurations do not duplicate or conflict with presets and plugins already included by `babel-preset-liferay-standard`. Prefer extending the preset's configuration rather than defining entirely separate ones.","message":"Combining this preset with custom Babel configurations (e.g., in `babel.config.js` or `package.json`) can lead to conflicts, as the preset already includes `babel-preset-liferay-standard`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Verify that your `.npmbundlerrc` `output.globals` section correctly maps Angular packages (e.g., `@angular/core`) to the Liferay-provided global variables as shown in the quickstart example.","message":"The preset expects Angular's runtime dependencies to be available as globals within the Liferay environment. Incorrect global mapping can lead to runtime errors.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install --save-dev liferay-npm-bundler-preset-angular` in your project's root directory.","cause":"The `liferay-npm-bundler-preset-angular` package is not installed or is not resolvable from the project's node_modules.","error":"Error: Cannot find module 'liferay-npm-bundler-preset-angular' from '.../.npmbundlerrc'"},{"fix":"Double-check the `output.globals` section in your `.npmbundlerrc` against the Liferay documentation for the correct Angular global variable names. Ensure the Liferay portal itself is configured to provide these globals.","cause":"The `output.globals` configuration in `.npmbundlerrc` is incorrect, or the Liferay environment is not exposing the expected Angular globals at runtime.","error":"TypeError: bundler.define.globals is not a function (or similar runtime error related to global variables)"},{"fix":"While the preset includes standard Babel support, complex or bleeding-edge syntax might require explicit additional Babel configuration. Consider adding custom Babel plugins/presets to your `.npmbundlerrc`'s `plugins` array (if supported by `liferay-npm-bundler`) or configuring Babel directly if the bundler allows it.","cause":"A file type (e.g., a specific TypeScript feature or ESNext syntax) is not being correctly transpiled by the Babel configuration included in the preset, or a required plugin/preset is missing.","error":"Module parse failed: Unexpected token (X:Y) You may need an appropriate loader to handle this file type."}],"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}