[ui5-page | angular]: Uncaught DOMException: Failed to construct 'CustomElement': The result must not have attributes

rabbal commented 1 month ago

Bug Description

After upgrading to v2.3.0 with angular 18.2.7, we faced an error that says the ui5-page has attributes before attaching to DOM. After further investigation, I realized that the problem is related to changes in the https://github.com/SAP/ui5-webcomponents/pull/9885 merge request in which you added the style attribute to ui5-page in its constructor.

Affected Component

ui5-page

Expected Behaviour

Render as the previous version in angular

Isolated Example

No response

Steps to Reproduce

npm install -g @angular/cli
ng new ui5-web-components-application
cd ui5-web-components-application
npm install @ui5/webcomponents-fiori
clear the content of app.component.html
import '@ui5/webcomponents-fiori/dist/Page.js' inside main.ts
utilize ui5-page inside app.component.html
ng s -o
you'll face the mentioned error and Angular won't create the respective element and render it

Log Output, Stack Trace, or Screenshots

No response

Priority

Very High

UI5 Web Components Version

2.3.0

Browser

Chrome

Operating System

Ubuntu

Additional Context

If you comment on the mentioned line in the constructor, the issue will disappear. Also, it is recommended that such things be moved into connectedCallback.

No response

Organization

No response

Declaration

[X] I’m not disclosing any internal or sensitive information.

hinzzx commented 1 month ago

Hello,

@SAP/ui5-webcomponents-topic-rl ,

It seems that after setting an attribute to the ui5-page web component in the constructor, an Error is thrown in an Angular application.

The issue is easily reproducible by the given steps.

Note: Don't forget to add CUSTOM_ELEMENTS_SCHEMA, in the app.component.ts file

+ import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import '@ui5/webcomponents-fiori/dist/Page.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
+ schemas: [CUSTOM_ELEMENTS_SCHEMA]  // Allow custom elements in the application
})
export class AppComponent {
  title = 'ui5-web-components-application';
}

A possible solution would be to move the line ,

// Page.ts
    constructor() {
        this.style.setProperty(getScopedVarName("--_ui5-page-animation-duration"), getAnimationMode() === AnimationMode.None ? "0s" : "0.35s");
    }

To the onEnterDOM() hook.

Best Regards, Stoyan

stephen-schmith commented 1 month ago

@nikoletavnv Has this fix been released yet? I'm still seeing this error in 2.3.0.

nikoletavnv commented 1 month ago

Hello @stephen-schmith, The fix will be included in the next sub version - 2.4.0 of the web components.

Kind regards, Nikoleta

SAP / ui5-webcomponents