babel-preset-angular2

0.0.2 verified Sat Apr 25 auth: no javascript deprecated

A Babel preset (v0.0.2, last updated in 2016) for compiling Angular 2 applications, wrapping plugins for Angular 2 annotations, decorators, class properties, and Flow type stripping. This package is outdated and unmaintained; Angular 2+ now uses TypeScript and the official Angular CLI, making this preset obsolete. It depends on legacy Babel 6 plugins and is not compatible with modern Angular versions or Babel 7+. Use for legacy projects only; new projects should use the Angular CLI with TypeScript.

Common errors

error SyntaxError: Unexpected token @ ↓

cause Missing the babel-plugin-transform-decorators-legacy plugin or the angular2 preset.

fix

Ensure babel-preset-angular2 is installed and listed in your .babelrc presets.

Warnings

deprecated This preset is unmaintained and only supports Angular 2.0 (not later versions). ↓

fix Use the Angular CLI with TypeScript and the Angular compiler instead of Babel for Angular projects.

breaking Missing es2015 preset will cause syntax errors in Angular 2 templates or ES2015 code. ↓

fix Always include the es2015 preset in your .babelrc.

gotcha The decorator transform is based on legacy decorators, which may not work with newer TypeScript or Angular versions. ↓

fix Use TypeScript's own decorator support instead of Babel for Angular projects.

Install

npm install babel-preset-angular2

yarn add babel-preset-angular2

pnpm add babel-preset-angular2

Imports

default (preset)
wrong
```
{
  "presets": ["angular2"]
}
```
correct
```
{
  "presets": ["es2015", "angular2"]
}
```
The preset does not include ES2015 features; you must also add the es2015 preset in .babelrc.

Quickstart

Shows installation, .babelrc configuration, and a basic Angular 2 component using decorators.

// Install the preset and its peer dependency
npm install --save-dev babel-preset-angular2 babel-preset-es2015

// .babelrc
{
  "presets": ["es2015", "angular2"]
}

// Example Angular 2 component (with decorators)
import { Component } from '@angular/core';

@Component({
  selector: 'hello-world',
  template: '<h1>Hello {{ name }}!</h1>'
})
export class HelloWorldComponent {
  name: string = 'Angular 2';
}