Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

From HTML to Angular Error scripts.bundle.js and main.ts

hello All, i bought html demo and now i'm trying to take component/page from HTML demo to my angular project but when i'm importing JS Files in my angular.Json get error, compiled successfully but browser won't to load project by this errors ,

the Js file in angular.json:

 "scripts": [
 "src/assets/plugins.bundle.js",
 "src/assets/scripts.bundle.js",
 "src/assets/datatables.bundle.js",
 "src/assets/vis-timeline.bundle.js"
 ]

and the errors: first one in src\assets\scripts.bundle.js:7

Uncaught TypeError: Cannot read properties of undefined (reading 'on') 
 at Object.init (src\assets\scripts.bundle.js:7:25342)
 at src\assets\scripts.bundle.js:7:25562
 at Object.onDOMContentLoaded (src\assets\scripts.bundle.js:7:18058)
 at src\assets\scripts.bundle.js:7:25524

second error in main.ts:7

Error: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.
Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)
 at Zone.assertZonePatched (zone.js:46:23)
 at new NgZone (core.mjs:26062:14)
 at getNgZone (core.mjs:27144:16)
 at PlatformRef.bootstrapModuleFactory (core.mjs:27007:24)
 at core.mjs:27068:41
 at f (src\assets\plugins.bundle.js:76:30833)
 at src\assets\plugins.bundle.js:76:30769
 at _ZoneDelegate.invoke (zone.js:368:26)
 at Zone.run (zone.js:129:43)
 at zone.js:1257:36
(anonymous) @ main.ts:7
A
Ahmed 3 years ago
Angular Bootstrap 5 HTML
6 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)

user
Waleed Shah 2 years ago

Faizal i am facing same issue. Your solutions works but on page load only. This is not working when routed to one page using angular routing and coming back to it the button wont work. so on page loads component A dropdown is working, but if i move to component B and then to A the dropdown dont work.


user
Faizal Author 3 years ago

You're welcome! I'm glad to hear that you were able to solve the issue. If you have any more questions or need further assistance in the future, feel free to ask. Happy coding!


user
Waleed Shah 2 years ago

Faizal i am facing same issue. Your solutions works but on page load only. This is not working when routed to one page using angular routing and coming back to it the button wont work. so on page loads component A dropdown is working, but if i move to component B and then to A the dropdown dont work.


user
Faizal Author 3 years ago

Hi,

To resolve the issue you are facing with loading the JavaScript files in your Angular project, I recommend moving the script tags directly into the index.html file. By doing so, the JavaScript files will be included and executed when the page is loaded.

Here is an example of how you can update your index.html file:

By placing the script tags directly in the body section of the index.html file, the JavaScript files will be loaded and executed when the page is rendered. This should help resolve the issue you are experiencing with loading the JavaScript files in your Angular project.

Please give this a try and let me know if it resolves the issue. If you have any further questions or concerns, feel free to ask.

Thanks

A
Ahmed 3 years ago

Hi Faizal,
same error's


A
Ahmed 3 years ago

thank's for your responding Faizal , i solved it .


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(