Angular Support for Parcel 1

0.5.0 verified Thu Apr 23 auth: no javascript abandoned

parcel-plugin-angular is an abandoned Parcel plugin, currently at version 0.5.0, designed to provide comprehensive Angular support for the Parcel 1 bundler. It enables features like AOT (Ahead-of-Time) compilation using the official Angular compiler, lazy loading of Angular modules, and automatic processing of templates and styles. The plugin also performs transformations, such as decorator removal in AOT mode for smaller bundles and replacing JIT bootstrap code with AOT. It explicitly requires Parcel 1.x and Angular versions around 5.1.0, along with their associated compiler tools. Due to the release of Parcel 2 with a completely redesigned plugin system in September 2021, this plugin is no longer maintained or compatible with modern Parcel versions or recent Angular releases. Its release cadence was irregular and it has not seen updates since 2018.

Common errors

error Error: Plugin "parcel-plugin-angular" is not compatible with Parcel 2.x.x. Requires "1.x" but the current version is "2.x.x". ↓

cause Attempting to use parcel-plugin-angular with Parcel 2 or higher.

fix

This plugin is incompatible with Parcel 2+. Downgrade Parcel to a 1.x version (npm install parcel-bundler@^1.0.0 --save-dev) or migrate your project's build system to Parcel 2 or Angular CLI.

error Error: Cannot find module '@angular/compiler' ↓

cause The required peer dependency '@angular/compiler' is missing or its version does not satisfy the plugin's requirement.

fix

Install the correct version of '@angular/compiler' and '@angular/compiler-cli' (e.g., npm install @angular/compiler@^5.1.0 @angular/compiler-cli@^5.1.0 --save-dev). Ensure all peer dependencies listed in package.json are met.

error TypeError: Class constructor 'X' cannot be invoked without 'new' ↓

cause Often caused by mismatched TypeScript, Angular, or Babel configurations, or older Angular versions being bootstrapped incorrectly in a JIT context with incompatible transpilation.

fix

Verify that your tsconfig.json matches the plugin's recommended configuration, especially for target, module, emitDecoratorMetadata, and experimentalDecorators. Ensure Angular dependencies are within the ^5.1.0 range.

Warnings

breaking This plugin is only compatible with Parcel 1.x. It will not work with Parcel 2.x or newer versions due to a complete overhaul of Parcel's plugin system. ↓

fix Migrate your project to Parcel 2.x and use a different Angular setup (Parcel 2 has built-in TypeScript support and no longer requires specific Angular plugins), or downgrade Parcel to version 1.x.

breaking The plugin's peer dependencies require Angular versions around 5.1.0. It is not compatible with modern Angular versions (e.g., Angular 6 and above) due to breaking changes in Angular's core and compiler. ↓

fix For new projects, avoid this plugin and use a build system actively supporting your Angular version (e.g., Angular CLI, or Parcel 2 with a native Angular setup). For existing projects, ensure your Angular version matches the plugin's peer dependency requirements.

gotcha The `parcel-plugin-angular` package is abandoned and has not received updates since 2018. This means there will be no new features, bug fixes, or security patches, leaving projects using it vulnerable to known and unknown issues. ↓

fix Strongly consider migrating to a current build toolchain that actively supports Angular, such as the Angular CLI or Parcel 2 with its native TypeScript capabilities. Do not use this plugin for new projects.

gotcha The plugin's README explicitly states that `parcel-plugin-typescript` should *not* be installed alongside `parcel-plugin-angular` as it can lead to conflicts and unexpected build behavior. ↓

fix Ensure `parcel-plugin-typescript` is uninstalled from your project's `devDependencies` if `parcel-plugin-angular` is present. `parcel-plugin-angular` handles TypeScript internally for Angular projects.

Install

npm install parcel-plugin-angular

yarn add parcel-plugin-angular

pnpm add parcel-plugin-angular

Imports

platformBrowserDynamic
wrong
```
const platformBrowserDynamic = require('@angular/platform-browser-dynamic');
```
correct
```
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
```
Commonly used for JIT (Just-in-Time) bootstrapping of Angular applications, as demonstrated in the plugin's own examples. While Parcel 1 supports CommonJS, Angular applications typically use ES Modules.
enableProdMode
```
import { enableProdMode } from '@angular/core';
```
Used to enable Angular's production mode, which disables development checks and generally improves performance.
AppModule
```
import { AppModule } from './app/app.module';
```
Represents the root module of an Angular application, typically imported and bootstrapped in the main entry file.

Quickstart

This quickstart demonstrates setting up a basic Angular 5 application using parcel-plugin-angular with Parcel 1. It includes the necessary `package.json` for dependencies and scripts, `tsconfig.json` for Angular and Parcel plugin options, and minimal Angular component and module files. To run, save these files, then execute `npm install` and `npm start`.

{
  "name": "my-angular-parcel-app",
  "version": "1.0.0",
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html"
  },
  "devDependencies": {
    "parcel-bundler": "^1.1.0",
    "parcel-plugin-angular": "^0.5.0",
    "@angular/common": "^5.1.0",
    "@angular/compiler": "^5.1.0",
    "@angular/compiler-cli": "^5.1.0",
    "@angular/core": "^5.1.0",
    "@angular/platform-browser": "^5.1.0",
    "@angular/platform-browser-dynamic": "^5.1.0",
    "rxjs": "^5.5.0",
    "typescript": ">=2.4.2 <2.6",
    "zone.js": "^0.8.0"
  }
}
// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2017", "dom"],
    "skipLibCheck": true,
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictMetadataEmit": true
  },
  "parcelAngularOptions": {
    "watch": "jit",
    "build": "aot"
  }
}
// index.html
<!DOCTYPE html>
<html>
<head>
  <title>Parcel Angular App</title>
</head>
<body>
  <app-root></app-root>
  <script src="main.ts"></script>
</body>
</html>
// main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

if (process.env.NODE_ENV === 'production') {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
// app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }
// app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>Hello from Angular with Parcel!</h1>'
})
export class AppComponent { }