Giving error in chrome like cannot read properties of undefined in Angular

Question

Created two web components: web-comp-1, web-comp-2

When I tried to add in HTML page, I am getting console error like below

Uncaught TypeError: Cannot read properties of undefined (reading 'create')
at new m.<computed> (web-comp-1.js:3:2706)
at new t (web-comp-1.js:3:12616)

When I checked the line, the code is,

(o = (u = F && 1 === a.create.length) ? Reflect.construct

Generated web component using below versions and angular elements: "@angular/animations": "14.2.7", "@angular/cdk": "14.2.5", "@angular/common": "14.2.7", "@angular/compiler": "14.2.7", "@angular/core": "14.2.7", "@angular/elements": "14.2.7",

Stackblitz link: https://stackblitz.com/edit/web-platform-bkqbag?file=index.html

If you run in stack blitz, you wont see any error, you need to download the project and open in only "Chrome". This issue happening only in chrome, not in mozilla

Please put the same in an web IDE like stackblitz so that can test it. also try to put the errors in text format ^^ read here . — Abolfazl Almas
– Abolfazl Almas, Commented Jan 24, 2023 at 8:15
This error indicates that the property before create is undefind. — Abolfazl Almas
– Abolfazl Almas, Commented Jan 24, 2023 at 8:19
I couldn't find where the problem is. look here Maybe the reason for your project's error is the use of deprecated package. — Abolfazl Almas
– Abolfazl Almas, Commented Jan 25, 2023 at 5:57
@AbolfazlAlmas We have document register element at below locations in angular.json: "projects.myWidgetBuilder.architect.build.options.scripts" and "projects.elements.architect.build.options.scripts" "scripts": [ { "input": "node_modules/document-register-element/build/document-register-element.js" } Do I need to remove these above lines from myWidgetBuilder and elements in angular.json? — Tony
– Tony, Commented Jan 25, 2023 at 8:54

Tony · Accepted Answer · 2023-01-26 20:26:54Z

0

Two solutions:

a) Upgraded document-register-element package from 1.7.2 to 1.14.10 in package json, the error gone away. Thank you @Abolfazl Almas, your link triggered me an idea

OR

b) Remove document-register-element package (deprecated) and add "@ungap/custom-elements" and change in angular.json file like below, wherever you see document-register-element file path:

"scripts": [{
            "input": "node_modules/@ungap/custom-elements/index.js"
 ]}

edited Jan 26, 2023 at 20:26

answered Jan 26, 2023 at 8:38

Tony

1595 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Giving error in chrome like cannot read properties of undefined in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related