[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: |
|
|||||||||||||||||||||||||
| Issue Links: |
|
|||||||||||||||||||||||||
| Sub-Tasks: |
|
|||||||||||||||||||||||||
| 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: | ||||||||||||||||||||||||||
| Description |
|
With test data from 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:
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:
|
| 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 |