{"id":17863,"library":"parcel-plugin-angular","title":"Angular Support for Parcel 1","description":"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.","status":"abandoned","version":"0.5.0","language":"javascript","source_language":"en","source_url":"https://github.com/fathyb/parcel-plugin-angular","tags":["javascript","typescript"],"install":[{"cmd":"npm install parcel-plugin-angular","lang":"bash","label":"npm"},{"cmd":"yarn add parcel-plugin-angular","lang":"bash","label":"yarn"},{"cmd":"pnpm add parcel-plugin-angular","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Angular's compilation process, especially for AOT.","package":"@angular/compiler","optional":false},{"reason":"Provides command-line tools for Angular compilation, integrated by the plugin.","package":"@angular/compiler-cli","optional":false},{"reason":"The core bundler this plugin extends. Only compatible with Parcel 1.x.","package":"parcel-bundler","optional":false},{"reason":"Angular projects are written in TypeScript; needed for compilation.","package":"typescript","optional":false}],"imports":[{"note":"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.","wrong":"const platformBrowserDynamic = require('@angular/platform-browser-dynamic');","symbol":"platformBrowserDynamic","correct":"import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';"},{"note":"Used to enable Angular's production mode, which disables development checks and generally improves performance.","symbol":"enableProdMode","correct":"import { enableProdMode } from '@angular/core';"},{"note":"Represents the root module of an Angular application, typically imported and bootstrapped in the main entry file.","symbol":"AppModule","correct":"import { AppModule } from './app/app.module';"}],"quickstart":{"code":"{\n \"name\": \"my-angular-parcel-app\",\n \"version\": \"1.0.0\",\n \"scripts\": {\n \"start\": \"parcel index.html\",\n \"build\": \"parcel build index.html\"\n },\n \"devDependencies\": {\n \"parcel-bundler\": \"^1.1.0\",\n \"parcel-plugin-angular\": \"^0.5.0\",\n \"@angular/common\": \"^5.1.0\",\n \"@angular/compiler\": \"^5.1.0\",\n \"@angular/compiler-cli\": \"^5.1.0\",\n \"@angular/core\": \"^5.1.0\",\n \"@angular/platform-browser\": \"^5.1.0\",\n \"@angular/platform-browser-dynamic\": \"^5.1.0\",\n \"rxjs\": \"^5.5.0\",\n \"typescript\": \">=2.4.2 <2.6\",\n \"zone.js\": \"^0.8.0\"\n }\n}\n// tsconfig.json\n{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"module\": \"es2015\",\n \"moduleResolution\": \"node\",\n \"emitDecoratorMetadata\": true,\n \"experimentalDecorators\": true,\n \"lib\": [\"es2017\", \"dom\"],\n \"skipLibCheck\": true,\n \"typeRoots\": [\n \"node_modules/@types\"\n ]\n },\n \"angularCompilerOptions\": {\n \"fullTemplateTypeCheck\": true,\n \"strictMetadataEmit\": true\n },\n \"parcelAngularOptions\": {\n \"watch\": \"jit\",\n \"build\": \"aot\"\n }\n}\n// index.html\n\n\n\n Parcel Angular App\n\n\n \n \n\n\n// main.ts\nimport { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { AppModule } from './app/app.module';\n\nif (process.env.NODE_ENV === 'production') {\n enableProdMode();\n}\n\nplatformBrowserDynamic().bootstrapModule(AppModule)\n .catch(err => console.error(err));\n// app/app.module.ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n imports: [BrowserModule],\n declarations: [AppComponent],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n// app/app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n template: 'Hello from Angular with Parcel!
'\n})\nexport class AppComponent { }\n","lang":"typescript","description":"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`."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=0.5.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=0.5.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.5.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.5.0"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"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.","cause":"Attempting to use parcel-plugin-angular with Parcel 2 or higher.","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\"."},{"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.","cause":"The required peer dependency '@angular/compiler' is missing or its version does not satisfy the plugin's requirement.","error":"Error: Cannot find module '@angular/compiler'"},{"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.","cause":"Often caused by mismatched TypeScript, Angular, or Babel configurations, or older Angular versions being bootstrapped incorrectly in a JIT context with incompatible transpilation.","error":"TypeError: Class constructor 'X' cannot be invoked without 'new'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}