hello,
i want to take the page from html demo to angular demo i took the html file and put it in html angular component and took the css and js files also and put it in angular.json
"styles": [
"src/styles.scss",
"src/assets/datatables.bundle.css",
"src/assets/vis-timeline.bundle.css",
"src/assets/plugins.bundle.css",
"src/assets/style.bundle.css"
],
"scripts": [
"src/assets/plugins.bundle.js",
"src/assets/scripts.bundle.js",
"src/assets/datatables.bundle.js",
"src/assets/vis-timeline.bundle.js"
]
put when i'm trying to serve angular project get many of errors :
"./src/assets/plugins.bundle.css - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):"
and another errors in browser console :
"Uncaught TypeError: Cannot read properties of undefined (reading 'on')
at Object.init (src\assets\scripts.bundle.js:7:25342)"
and
"rror: 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:58:23)"
Hi,
You can try importing the CSS files directly into your `src/styles.scss` file instead of including them in the `angular.json` file. Here's how you can do it:
1. Open the `src/styles.scss` file in your Angular project.
2. Locate the existing content in the file.
3. Add the following `@import` statements at the top of the file, one for each CSS file:
@import "src/assets/datatables.bundle.css";
@import "src/assets/vis-timeline.bundle.css";
@import "src/assets/plugins.bundle.css";
@import "src/assets/style.bundle.css";
hello,
first thanks for responding ,but still there is problem when i added styles files of css , not all of style is applied then i added JS files like i explained in question still there's two errors
"
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
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.)
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:
<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/widgets.bundle.js"></script>