metronic 8 angular version and html version errors
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)"
Replies (3)
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";4. Save the file.
By importing the CSS files directly in `styles.scss`, Angular's build system will include them in the final bundled CSS output. This way, you won't encounter the PostCSS error related to the `plugins.bundle.css` file.
Remember to remove the corresponding entries from the `styles` array in the `angular.json` file since you no longer need to include them there.
After making these changes, try running your Angular project again using `ng serve` or `npm start` to see if the errors have been resolved.
Let me know if you need any further assistance!
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:25524and
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.)and the browser didn't load the project
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>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
React Dev Vacancy
