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:25524second 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:7Replies (6)
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:
<body>
<app-root></app-root>
<!-- Move the script tags here -->
<script src="assets/plugins/global/plugins.bundle.js"></script>
<script src="assets/js/scripts.bundle.js"></script>
<script src="assets/js/datatables.bundle.js"></script>
<script src="assets/js/vis-timeline.bundle.js"></script>
</body>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
Hi Faizal,
same error's
thank's for your responding Faizal , i solved it .
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!
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.
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.
