Registry / web-framework / parcel-plugin-angular

parcel-plugin-angular

library0.5.0jsnpmunverified

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.

web-framework testing

npm install parcel-plugin-angular

github ↗package ↗

INSTALL

IMPORT

SIG · PARCEL-PLUGIN-ANGU

parcel-plugin-angular

web-frameworkjavascriptv0.5.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

platformBrowserDynamic

✓ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

✗ const platformBrowserDynamic = require('@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.

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 { }

Debug

Known issues

breakingThis 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.

affects: >=0.5.0

breakingThe 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.

affects: >=0.5.0

gotchaThe `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.

affects: >=0.5.0

gotchaThe 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.

affects: >=0.5.0

Errors

Common errors & fixes

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

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: Cannot find module '@angular/compiler'

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.

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

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.

Upgrade

Version history

0.5.0latest on npm

Audit

Dependencies

@angular/compilerrequiredRequired for Angular's compilation process, especially for AOT.

@angular/compiler-clirequiredProvides command-line tools for Angular compilation, integrated by the plugin.

parcel-bundlerrequiredThe core bundler this plugin extends. Only compatible with Parcel 1.x.

typescriptrequiredAngular projects are written in TypeScript; needed for compilation.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/fathyb/parcel-plugin-angular ↗

packagehttps://www.npmjs.com/package/parcel-plugin-angular ↗