[MGNLFE-284] Angular sometimes does not show green bars Created: 19/Jul/22  Updated: 23/Oct/23  Resolved: 28/Jul/22

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

Type: Bug Priority: Major
Reporter: Phong Le Quoc Assignee: Phong Le Quoc
Resolution: Fixed Votes: 0
Labels: None
Σ Remaining Estimate: Not Specified Remaining Estimate: Not Specified
Σ Time Spent: 2d 4.5h Time Spent: 2d 4.5h
Σ Original Estimate: Not Specified Original Estimate: Not Specified

Attachments: GIF File angular-sample-no-green-bars.gif    
Issue Links:
dependency
is depended upon by MGNLFE-233 Release and Publish Frontend Helpers ... Closed
relation
is related to MGNLFE-272 vue-editor 1.2.3-beta don't render gr... Closed
is related to MGNLFE-301 Remove templateAnnotationsUpdated Accepted
is related to MGNLFE-300 Remove redundant variable "declaration" Closed
Sub-Tasks:
Key
Summary
Type
Status
Assignee
MGNLFE-296 Implement Sub-task Completed Phong Le Quoc  
MGNLFE-297 Review Sub-task Closed Dai Ha  
MGNLFE-298 PiQA Sub-task Closed Rishab Dhar  
MGNLFE-299 QA Sub-task Completed  
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
[X]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Date of First Response:
Epic Link: Headless Phase 2
Sprint: DevX 15
Story Points: 3
Team: DeveloperX

 Description   

With test data from MGNLFE-272, Angular code sometime does not show green bars with pages have areas only.

On version 1.2.2 of angular editor: error messages in the browser console

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading '@path')
TypeError: Cannot read properties of undefined (reading '@path')
    at magnolia-angular-editor.js:243:109
    at _ZoneDelegate.invoke (zone.js:409:30) 

in editable-area.component.ts

updateComment(content: object): void {
  this.editorContext.inEditorAsync().then((inEditor) => {
    if (inEditor) {
      if (this.editorContext.templateAnnotations && this.editorContext.templateAnnotations[content['@path']]) { 

On the latest code of angular editor: nothing is shown https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/pull-requests/150/overview?commentId=99169

 

The issue also happens with a new page from Angular: Standard page.

 

The steps to reproduce:

  1. Create a new page from Angular: Standard page
  2. Edit the page few times (normally, second or third time) => no green bars 

 

We also can replace by the code bellow to reproduce the issue always

const contentObservable = this.http
            .get(`${ENVIRONMENT.restUrlBase}${spaRootNodePath}${magnoliaContext.search}`).subscribe(content=>{
                console.log('content');
                console.log(content);
              this.content = content;
              const templateAnnotationObservable = this.http
                     .get(`${ENVIRONMENT.templateAnnotationsBase}${spaRootNodePath}`).subscribe(templateAnnotations=>{
                         console.log('templateAnnotation');
                         console.log(templateAnnotations);
                    this.editorContext.setTemplateAnnotations(templateAnnotations);
                  });
            }); 


 Comments   
Comment by Christopher Zimmermann [ 19/Jul/22 ]

plequoc  Can you please add a bit more detail to the description about under which conditions, Angular does not render green bars?

Comment by Phong Le Quoc [ 25/Jul/22 ]

Root cause:

Currently, Angular loads "content" and "template-annotations" async. On the page with areas only:

If "content" is loaded first and then "template-annotations" second, areas are not built because there are no "template-annotations" at the time that content is loaded. => no green bars.

Otherwise, the green bars are shown.

 

We don't have this problem with the pages with areas and components because areas are loaded but not built.

Comment by Phong Le Quoc [ 25/Jul/22 ]

Solution:

  1. Loaded "template-annotations" first and then "content". Or
  2. Loaded "template-annotations", "content" and then continue. We use this in our Angular sample.
Comment by Phong Le Quoc [ 26/Jul/22 ]

Another way to fix the issue by reloadComponent when templateAnnotations is changed. We can do by calling supper.ngOnInit in editable-page.component.ts

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