how to properly setup a bare minimal angular project using parcel

[sombriks]

Hello all,

I am in love with the zero-config quick, incremental developer experience provided by parcel.

In a small experiment i got a vue and react hello world in the same index.html, showing potential for bigger and exotic scenarios.

But i found my wall when trying to add angular to the mixture. Ir simply doesn't work.

This is what i got so far. react had to be bootstraped before vue, but apart from that everything looks fine.

Is there any hope on add angular in the mixture or it can only survive plugged into its cli?

Thanks for any guidance.

[christianalberto]

Hi @sombriks!

Yes, it completely makes sense why you hit a wall here. React and Vue are lightweight view libraries that can easily drop into almost any setup with simple imports, but Angular is a full platform. It relies heavily on TypeScript decorator metadata, Ahead-Of-Time (AOT) compilation hooks, and zone.js for change detection.

The good news is that you don't have to be locked into @angular/cli for small experiments or multi-framework setups. You can run Angular with Parcel as long as TypeScript is configured properly to handle decorators and zone.js is loaded at the start.

Here is a minimal, working setup to get Angular running alongside your React and Vue components:

1. Install dependencies

Install the core Angular packages, zone.js, TypeScript, and Parcel:

npm install @angular/core @angular/common @angular/compiler @angular/platform-browser @angular/platform-browser-dynamic zone.js
npm install --save-dev typescript parcel

3. Configure TypeScript (tsconfig.json)

This is the most critical step. Angular requires decorator metadata to handle component metadata and dependency injection. Create a tsconfig.json in your project root:

{
  "compilerOptions": {
    "target": "es2022",
    "module": "esnext",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "useDefineForClassFields": false,
    "skipLibCheck": true
  }
}

4. Create a Standalone Component (src/app.component.ts)

Using Angular's Standalone Components avoids the overhead of defining NgModule files:

import { Component } from '@angular/core';

@Component({
  selector: 'angular-root',
  standalone: true,
  template: `<h2>Hello from Angular!</h2>`
})
export class AppComponent {}

5. Create the entry point (src/main.ts)

Make sure zone.js is imported at the very top before bootstrapping the app:

import 'zone.js';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent).catch((err) => console.error(err));

7. Update your HTML (src/index.html)

Add the custom element selector alongside your React and Vue root tags:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Multi-Framework Experiment</title>
</head>
<body>
  <!-- Your Vue/React containers -->
  <div id="react-root"></div>
  <div id="vue-root"></div>

  <!-- Angular Container -->
  <angular-root></angular-root>

  <script type="module" src="./main.ts"></script>
</body>
</html>

9. Run Parcel

Bash
npx parcel src/index.html

Why it was failing initially

• Missing zone.js: Angular's default change detection depends on patching async APIs via zone.js. Without importing it first, runtime initialization fails silently or throws zone-related errors.

• TypeScript Decorators: Without experimentalDecorators and emitDecoratorMetadata enabled in tsconfig.json, Parcel's TS transformer strips out the @component decorators during build time.

• Hope this helps get your multi-framework experiment running!

[sombriks]

This is amazing @christianalberto ! Thank you so much for the guidance!

With your guide, one can scale down any angular solution into existing MPA projects with much more ease!