Angular: ограничения и совместимость

Экосистема Angular изначально построена вокруг строго определённой цепочки сборки, в которой центральную роль играет Angular CLI и его внутренняя конфигурация на базе Webpack (в современных версиях — с переходом к более абстрактным сборочным слоям, но с сохранением Angular-specific пайплайна). Parcel, напротив, реализует модель «zero-configuration bundler», где анализ зависимостей и трансформация кода происходят автоматически без явного описания пайплайна.

Эта разница приводит к ключевому ограничению: Angular ожидает наличие специализированной сборочной инфраструктуры, тогда как Parcel ориентирован на универсальные JavaScript-проекты без framework-specific этапов компиляции.


Компиляция Angular: AOT, Ivy и метаданные

Angular-компиляция включает несколько обязательных стадий:

  • анализ декораторов (@Component, @NgModule, @Injectable)
  • извлечение и интерпретация метаданных
  • компиляция шаблонов (HTML + bindings)
  • AOT (Ahead-of-Time compilation)
  • оптимизация DI-графа

В Parcel отсутствует встроенный механизм понимания Angular-метаданных. Он работает на уровне файлов и модулей ECMAScript, но не интерпретирует семантику Angular-декораторов.

Особенно критичны следующие аспекты:

Ivy compilation (Angular 9+) Ivy генерирует фабрики и инструкции на этапе сборки. Angular CLI выполняет эту трансформацию через ngtsc, тогда как Parcel не имеет интеграции с Angular compiler pipeline.

AOT (Ahead-of-Time) AOT требует предварительной компиляции шаблонов до запуска приложения. Parcel не управляет этим процессом, поскольку не реализует специализированный TypeScript transformer pipeline.


TypeScript и декораторы в Angular-проекте

Angular активно использует TypeScript с включёнными экспериментальными декораторами и строгими настройками компилятора:

  • emitDecoratorMetadata: true
  • experimentalDecorators: true
  • строгая проверка типов шаблонов (Angular Template Type Checker)

Parcel использует esbuild или SWC (в зависимости от версии), но их поддержка Angular-специфичных настроек ограничена.

Ключевая проблема заключается в следующем:

  • TypeScript в Angular — это не просто транспиляция
  • он участвует в построении DI-графа и компиляции шаблонов
  • Parcel обрабатывает TypeScript как изолированную стадию трансформации

Это разрывает цепочку Angular compiler.


Система модулей и lazy loading

Angular использует собственную систему маршрутизации и lazy loading модулей:

  • loadChildren с динамическими импортами
  • разделение бандлов по маршрутам
  • preloading strategies

Parcel поддерживает code splitting на уровне динамических import(), однако Angular lazy loading требует:

  • согласованной работы Router
  • корректной обработки NgModules или standalone components
  • синхронизации с Angular compiler

Parcel не учитывает Angular Router как часть сборочного графа, поэтому структура чанков может расходиться с ожидаемой моделью Angular-приложения.


Assets pipeline и шаблоны

Angular CLI управляет сложной системой ассетов:

  • angular.json описывает assets, styles, scripts
  • постобработка HTML шаблонов компонентов
  • инлайн ресурсов (SVG, CSS)
  • оптимизация шрифтов и изображений

Parcel использует иной подход:

  • ресурсы привязываются к импортам в коде
  • отсутствует центральный конфигурационный файл уровня angular.json
  • нет Angular-aware обработки компонентов

Это создаёт расхождение в обработке:

  • глобальных стилей
  • component-scoped styles
  • external template URLs (templateUrl, styleUrls)

DI (Dependency Injection) и tree-shaking

Angular DI система требует сохранения метаданных классов. Parcel активно применяет tree-shaking через статический анализ ES-модулей.

Конфликт возникает в следующих сценариях:

  • удаление классов с декораторами как «неиспользуемых»
  • потеря provider metadata
  • некорректная обработка providedIn: 'root'

Angular CLI защищает DI-граф от агрессивного tree-shaking, тогда как Parcel не обладает знанием Angular DI semantics.


HMR и состояние приложения

Hot Module Replacement в Angular реализуется через Angular CLI Dev Server и интеграцию с zone.js.

Parcel предоставляет собственный HMR-механизм, основанный на замене модулей ES.

Различие проявляется в том, что Angular приложение:

  • зависит от zone.js для change detection
  • имеет сложную иерархию компонентов
  • требует пересоздания DI-контейнеров при обновлениях

Parcel HMR работает на уровне модулей и не управляет Angular change detection cycle, что приводит к потере состояния компонентов или неконсистентному обновлению дерева компонентов.


Интернационализация и Angular compiler features

Angular поддерживает встроенные механизмы i18n:

  • извлечение сообщений на этапе сборки
  • компиляция переводов
  • оптимизация шаблонов под локали

Parcel не имеет интеграции с Angular i18n pipeline. Любые трансформации шаблонов выполняются без учёта Angular compiler extraction step.


Постобработка CSS и ViewEncapsulation

Angular применяет ViewEncapsulation:

  • Emulated
  • Shadow DOM
  • None

Parcel обрабатывает CSS как независимые модули, не учитывая Angular view encapsulation semantics. Это приводит к различиям:

  • генерация scoped attributes (_ngcontent-*)
  • порядок подключения стилей
  • изоляция компонентов

Angular CLI синхронизирует эти процессы через компилятор шаблонов, Parcel — нет.


Standalone components и современный Angular

Переход к standalone components (Angular 14+) частично снижает зависимость от NgModules, но не устраняет необходимость Angular compiler pipeline.

Даже при использовании standalone архитектуры остаются критичными:

  • template compilation
  • DI metadata generation
  • router-level lazy loading
  • signals integration (Angular 16+)

Parcel по-прежнему остаётся вне этого пайплайна, так как не реализует Angular-specific трансформации AST.


Общая модель ограничений

Совокупность ограничений можно свести к нескольким фундаментальным несоответствиям:

  • отсутствие Angular compiler integration
  • несовместимость с AOT/Ivy пайплайном
  • неполная поддержка DI metadata
  • различие в модели модульности
  • отсутствие понимания Angular Router graph
  • независимая система обработки CSS и шаблонов

Эти ограничения формируют архитектурный разрыв между универсальным bundler-подходом Parcel и специализированной компиляционной системой Angular.