[MGNLFE-54]  No Add Component action with Angular 9 Created: 04/Jun/20  Updated: 29/Jun/20  Resolved: 19/Jun/20

Status: Closed
Project: Magnolia Frontend Helpers
Component/s: None
Affects Version/s: 1.0.2
Fix Version/s: 1.0.4

Type: Bug Priority: Blocker
Reporter: Mercedes Iruela Assignee: Canh Nguyen
Resolution: Fixed Votes: 2
Labels: None
Remaining Estimate: 0d
Time Spent: 1d
Original Estimate: Not Specified

Attachments: PNG File Screenshot 2020-06-12 at 12.47.37.png    
Issue Links:
Relates
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Release notes required:
Yes
Date of First Response:
Epic Link: SPA Editor
Sprint: HL & LD 5
Story Points: 1

 Description   

Description was: parentTemplateId no guaranteed to be set before content editable-area.component.ts

Description/Cause
In this line (https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/browse/packages/angular-editor/projects/angular-editor/src/lib/area/editable-area.component.ts#33 ), the content(input) is being tried to be set with a setter. The setter uses another property called parentTemplateId which also is a Input.

The problem here is, that Angular can't guarantee that the setters of the Inputs are everytime called in the same order (or at least since Ivy). Here is an issue from GitHub describing the problem: https://github.com/angular/angular/issues/34322

Steps to reproduce

  • it should be possible to reproduce the problem with the hello-spa Angular App. Just upgrade it to Angular 9 (or maybe Angular 8 also works) and make sure to enable Ivy in Angular.
  • When you’ve the Angular Universal application up and running, create a new page in Magnolia and try to add a new component. You’ll see, that there isn’t a way to add a new component (Buttons disabled). This is due to parentTemplateId being null, thus no availableComponents found in "content" parameter in setter. Due to the reason that there are no availableComponents, Magnolia disables/hides all buttons to add a new component.

Possible fix:
A possibility to fix this issue is using the ngOnChanges lifecycle hook. Another option may be to also set the content when setting parentTemplateId, however I’m not sure if this is going to cover all cases. And of course some others



 Comments   
Comment by Bartosz Staryga [ 12/Jun/20 ]

Reproducible with minimal-headless-spa-demos when updated to Angular 9

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