Bugfix: Why did pe-gantt fail to register as a Custom Element while ...

Documentation for Sessions

🐛 Bugfix: Why did pe-gantt fail to register as a Custom Element while ...

Date: 2026-03-26
Time: 16:19:54 UTC
Session: gspace1-271.11
Agent: angular
Confidence: 99%
Status: ✅ Documented

📋 Decision Context

Question:

Why did pe-gantt fail to register as a Custom Element while all other Angular Element widgets succeeded?

Task: Fix pe-gantt registration failure in Angular Elements

🎯 Decision Made

Chosen:

Move object spread expressions out of Angular JIT template bindings into TypeScript class methods. Changed (click)="newTask.set({ ...newTask(), color: c })" to (click)="setNewTaskColor(c)" where the method body contains the spread.

Options Considered:

  1. Move spread to a TypeScript method (chosen — cleanest)
  2. Use Object.assign instead of spread in template (still unsupported syntax)
  3. Use individual property bindings instead of spread
  4. Downgrade to static initial value (loses reactivity)

💭 Reasoning

Angular's JIT template compiler uses a restricted expression parser that is a subset of JavaScript. It does NOT support the ES2018 object spread operator (...) inside template event bindings or any template expression. The parser threw: "Parser Error: Unexpected token ., expected identifier, keyword, or string" at the ... in { ...newTask(), color: c }. This caused createCustomElement() to throw during template compilation, which prevented pe-gantt from being registered as a Custom Element at all — leaving the <platform-loading> placeholder permanently visible. The error silently prevented only the specific failing widget while all previously registered widgets continued working, because Angular Elements registers each component independently via customElements.define(). Spreads ARE fully supported inside TypeScript class methods; the restriction is specific to Angular template expressions.

📁 Files Involved

🔗 Related

Auto-generated by MCP Smart Consolidation