[MGNLFE-685] Update dynamic component creation for Angular 14+ compatibility Created: 25/Oct/23  Updated: 17/Nov/23  Resolved: 15/Nov/23

Status: Closed
Project: Magnolia Frontend Helpers
Component/s: None
Affects Version/s: None
Fix Version/s: 1.5-angular

Type: Improvement Priority: Neutral
Reporter: Martina Michlova Assignee: Robert Šiška
Resolution: Done Votes: 0
Labels: None
Σ Remaining Estimate: Not Specified Remaining Estimate: Not Specified
Σ Time Spent: Not Specified Time Spent: Not Specified
Σ Original Estimate: Not Specified Original Estimate: Not Specified

Issue Links:
Relates
relates to MGNLFE-708 SPA: Update minimal-headless-spa-demo... Closed
dependency
is depended upon by MGNLFE-682 Release angular-editor 1.5 to npm bas... Closed
documentation
to be documented by MGNLFE-701 DOC: Update dynamic component creatio... Closed
Sub-Tasks:
Key
Summary
Type
Status
Assignee
MGNLFE-692 Implementation Sub-task Completed Robert Šiška  
MGNLFE-693 Review Sub-task Completed Rishab Dhar  
MGNLFE-694 PiQA Sub-task Closed  
MGNLFE-695 QA Sub-task Completed Canh Nguyen  
Template:
Acceptance criteria:
Empty
Task DoD:
[X]* Doc/release notes changes? Comment present?
[X]* Downstream builds green?
[X]* Solution information and context easily available?
[X]* Tests
[X]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Documentation update required:
Yes
Date of First Response:
Epic Link: Support
Sprint: DevX 50
Story Points: 1
Team: DeveloperX
Work Started:
Approved:
Yes

 Description   

Update the current dynamic component creation code to be compatible with Angular 14+.

 

Context:

In the current implementation we face these challenges:

1. Deprecated factory: We are using the deprecated `ComponentFactoryResolver`.

2. Property vs Input:

Currently, all properties of a Magnolia node are set directly as properties on the corresponding Angular component.

This bypasses the distinction between properties and inputs in Angular, resulting in an inability to use inputs as they were intended. This has implications on component lifecycle and binding capabilities.

Current workaround forces us to interface with Angular’s internal API, as we can’t determine if a property of a magnolia node is supposed to be handled as an input or a property.

 

Proposed solution:
PR #226

1. Replace the deprecated factory

2. Distinguish Properties vs Inputs:

Before assigning properties from Magnolia nodes, verify if they should be set as inputs on the Angular component. This will enable the proper use of lifecycle hooks, directives, and other features that rely on inputs.



 Comments   
Comment by Christopher Zimmermann [ 31/Oct/23 ]

After discussing with rsiska we intend to:

  • Not include the part of the PR that uses private Angular APIs.
  • Change angular-editor such that developers must use Input() annotation in their components.
  • Document that developers must use the Input() annotation in their components.
  • As this would be a breaking change, and we don't want to release a new Major version just for this - we will put the new behaviour behind a configuration option. The default will be to behave as it currently does.

In Slack: https://magnolia-cms.slack.com/archives/C0469GY5X2L/p1698322618858999

Generated at Mon Feb 12 05:49:48 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.