Liferay NPM Bundler Angular Dependencies Injector

1.8.0 verified Thu Apr 23 auth: no javascript

The `liferay-npm-bundler-plugin-inject-angular-dependencies` package is a specialized plugin for `liferay-npm-bundler` designed to address the challenges of deploying Angular applications within Liferay Portal's npm architecture. Its primary function is to automatically inject necessary peer dependencies (such as `rxjs` for `@angular/forms`) that the Liferay NPM Bundler may not correctly resolve or bundle by default. This ensures Angular packages function correctly at runtime, preventing 'module not found' errors. As of version 1.8.0, it remains critical for bridging the gap until `liferay-npm-bundler` offers full, native `peerDependency` support. The plugin determines the correct dependency versions by scanning the output `node_modules` directory. Its release cadence is typically tied to updates and maintenance within the broader Liferay ecosystem, focusing on compatibility and stability for Angular projects in Liferay Portal.

Common errors

error Cannot find module 'rxjs' or similar 'module not found' errors at runtime for Angular peer dependencies. ↓

cause The Liferay NPM Bundler fails to correctly identify and bundle peer dependencies required by Angular modules (e.g., `@angular/forms` requires `rxjs`).

fix

Add "inject-angular-dependencies" to the plugins array in your .npmbundlerrc file to ensure these dependencies are forcibly injected.

error Zone.js has detected that ZoneAwarePromise is overwritten. ↓

cause Multiple instances or incorrect versions of core Angular/Zone.js dependencies are being bundled, often due to improper peer dependency resolution or conflicting bundling configurations.

fix

Ensure liferay-npm-bundler-plugin-inject-angular-dependencies is correctly configured and that no other bundling plugins or manual configurations are causing duplicate or conflicting injections of core Angular libraries.

Warnings

gotcha The `dependenciesMap` option is explicitly noted as a temporary workaround. Its use is discouraged except to bypass specific, unaddressed errors, and its behavior or availability may change in future versions. ↓

fix Avoid using `dependenciesMap` unless absolutely necessary. Monitor Liferay-NPM-Bundler updates for permanent solutions to dependency issues.

breaking This plugin mitigates the `liferay-npm-bundler`'s incomplete `peerDependency` support. If `liferay-npm-bundler` introduces full native `peerDependency` handling, this plugin may become obsolete or require significant breaking changes, rendering its current usage incorrect. ↓

fix Regularly check `liferay-npm-bundler` release notes for enhancements in `peerDependency` resolution and be prepared to update or remove this plugin.

gotcha Improper configuration of this plugin, or conflicts with other bundling configurations, can lead to unintended dependency injection, duplicate modules, or unexpected runtime behavior in Angular applications. ↓

fix Thoroughly test your bundled Angular applications and inspect the dependency tree to ensure the plugin is resolving dependencies as expected without introducing conflicts.

Install

npm install liferay-npm-bundler-plugin-inject-angular-dependencies

yarn add liferay-npm-bundler-plugin-inject-angular-dependencies

pnpm add liferay-npm-bundler-plugin-inject-angular-dependencies

Imports

inject-angular-dependencies
wrong
```
import { InjectAngularDependencies } from 'liferay-npm-bundler-plugin-inject-angular-dependencies';
```
correct
```
{
	"*": {
		"plugins": ["inject-angular-dependencies"]
	}
}
```
This plugin is configured as a string identifier within the `.npmbundlerrc` file's `plugins` array, not directly imported into JavaScript or TypeScript application code.

Quickstart

This `.npmbundlerrc` snippet globally enables the `inject-angular-dependencies` plugin without any custom options, applying it to all bundles.

{
	"*": {
		"plugins": ["inject-angular-dependencies"]
	}
}