Angular ESTree Parser

15.4.3 verified Sun Apr 19 auth: no javascript

angular-estree-parser is a utility library designed to convert specific Angular template syntax constructs (such as actions, bindings, interpolation expressions, and template bindings) into an Abstract Syntax Tree (AST) that conforms to the ESTree specification. This makes it a critical component for tools like code formatters (e.g., Prettier), linters, and other static analysis tools operating within the Angular ecosystem. The library is currently stable at version 15.4.3 and maintains a reactive release cadence, frequently updating to support new major and minor versions of @angular/compiler as they are released. Its core differentiator lies in its deep integration with @angular/compiler's internal parsing mechanisms, ensuring accuracy and alignment with Angular's evolving syntax, while providing an ESTree-compatible output that is widely understood by the JavaScript tooling ecosystem. Users must explicitly install the appropriate @angular/compiler peer dependency to match their Angular project's version.

Common errors

error Error: Cannot find module '@angular/compiler' or its corresponding type declarations. ↓

cause The required `@angular/compiler` peer dependency is missing or not installed in your project.

fix

Install @angular/compiler using npm install @angular/compiler or yarn add @angular/compiler. Ensure the version satisfies the angular-estree-parser peer dependency range.

error TypeError: ngEstreeParser.parseBinding is not a function ↓

cause This usually indicates an incorrect module import. The library primarily uses ES Modules (ESM) with named exports, and attempting to `require()` or use a default import might lead to this error.

fix

Ensure you are using import * as ngEstreeParser from 'angular-estree-parser'; or specific named imports like import { parseBinding } from 'angular-estree-parser'; in an ESM-compatible environment.

error Error: The "angular-estree-parser" package requires Node.js version >= 20. Current version: v18.17.0 ↓

cause Your current Node.js version does not meet the minimum requirement specified by the package's `engines` field.

fix

Upgrade your Node.js installation to version 20 or higher. Use nvm install 20 and nvm use 20 or similar version management tools.

Warnings

breaking Version 15.0.0 introduced a breaking change by requiring `@angular/compiler` version `21.0.7` or higher. Projects using older `@angular/compiler` versions will need to upgrade or remain on `angular-estree-parser` v14.x. ↓

fix Ensure `@angular/compiler` is updated to a compatible version (e.g., `>=21.0.7` for `angular-estree-parser` v15). Run `npm install @angular/compiler@latest` or `yarn upgrade @angular/compiler`.

gotcha The `@angular/compiler` package is a peer dependency and must be explicitly installed alongside `angular-estree-parser`. Forgetting to install it will lead to runtime errors (e.g., 'Cannot find module'). ↓

fix Always install both packages: `npm install angular-estree-parser @angular/compiler` or `yarn add angular-estree-parser @angular/compiler`.

gotcha The package requires Node.js version 20 or higher, as specified in its `engines` field. Running on older Node.js versions will result in an error upon installation or execution. ↓

fix Upgrade your Node.js environment to version 20 or newer. Tools like `nvm` or `volta` can help manage Node.js versions efficiently.

gotcha Versions of `angular-estree-parser` prior to `15.4.3` may have had issues with module resolution due to an incorrect `exports` field, potentially affecting compatibility in certain build environments (e.g., specific ESM/CJS interop scenarios). ↓

fix Update to `angular-estree-parser` version `15.4.3` or later to ensure correct module resolution and compatibility across environments.

Install

npm install angular-estree-parser

yarn add angular-estree-parser

pnpm add angular-estree-parser

Imports

* as ngEstreeParser
wrong
```
const ngEstreeParser = require('angular-estree-parser');
```
correct
```
import * as ngEstreeParser from 'angular-estree-parser';
```
This is the primary way to import all parsing functions. The library is distributed as an ES Module (ESM).
parseBinding
wrong
```
import ngEstreeParser from 'angular-estree-parser'; ngEstreeParser.parseBinding(...);
```
correct
```
import { parseBinding } from 'angular-estree-parser';
```
Individual parsing functions like `parseBinding`, `parseAction`, `parseInterpolationExpression`, and `parseTemplateBindings` are named exports.
AST
wrong
```
import { AST } from 'angular-estree-parser';
```
correct
```
import type { AST } from 'angular-estree-parser';
```
For type-only imports, use `import type` to ensure they are stripped during compilation and don't introduce runtime dependencies or issues.

Quickstart

Demonstrates how to parse various Angular template expressions (binding, action, interpolation) into ESTree-compatible ASTs using the library's core functions.

import * as ngEstreeParser from 'angular-estree-parser';
import type { AST } from 'angular-estree-parser';

// Example: Parse an Angular binding expression
const bindingInput = 'user | uppercase';
const bindingAst: AST = ngEstreeParser.parseBinding(bindingInput);
console.log('Binding AST:', JSON.stringify(bindingAst, null, 2));

// Example: Parse an Angular action expression
const actionInput = 'onClick($event.target.value, item.id)';
const actionAst: AST = ngEstreeParser.parseAction(actionInput);
console.log('Action AST:', JSON.stringify(actionAst, null, 2));

// Example: Parse an Angular interpolation expression
const interpolationInput = '{{ title + " - " + version }}';
const interpolationAst: AST = ngEstreeParser.parseInterpolationExpression(interpolationInput);
console.log('Interpolation AST:', JSON.stringify(interpolationAst, null, 2));