AG Grid - CSS Loader issue
Hi,
When I tried to install AG Grid (data grid - the installation went smooth, however when i tried to follow up their simple grid tutorial getting loader error
I tried importing the ag grid style css in "styles.scss" file - getting the same error, even when i tried to importing the style css in component scss file getting the same error.
can you guide me through, how to fix this issue or provide me the steps to set it up AG grid properly in metronic angular theme 8.2.7 - demo 1
Replies (2)
Looks like the issue comes from how Metronic handles global styles together with Angular CLI configuration. AG Grid needs its CSS loaded before component styles or Angular will throw a loader error. Try placing all AG Grid styles in the main styles.scss and make sure the file is actually registered in angular.json under the styles array. If Metronic rewrites or compiles assets differently you may need to clear cache and rebuild to ensure the CSS pipeline picks it up. I once ran into something similar and while looking for fixes I stumbled on starcasino it where someone mentioned that cleaning the build cache helped Angular stop blocking external loaders. Might be worth trying before you dig deeper into config tweaks.
Hi Subramanian Sankaran,
Sorry for the delay. Here's how you can properly set it up and avoid CSS loader errors:
Steps to Integrate AG Grid in Metronic Angular (Demo 1):
1. Install AG Grid and Styles
First, make sure you've installed both `ag-grid-community` and `ag-grid-angular` packages.
npm install ag-grid-community ag-grid-angular --save2. Import AG Grid Styles in `angular.json`
Instead of importing AG Grid styles in your `styles.scss`, add the styles directly to your `angular.json` file.
In your `angular.json`, under the `styles` array, add the AG Grid CSS files:
"styles": [
"src/styles.scss",
"node_modules/ag-grid-community/styles/ag-grid.css",
"node_modules/ag-grid-community/styles/ag-theme-alpine.css"
]3. Configure SCSS Files
If you prefer adding specific styles for each component, you can also import the AG Grid styles in your component's SCSS file like this:
@import "~ag-grid-community/styles/ag-grid.css";
@import "~ag-grid-community/styles/ag-theme-alpine.css";4. Add AG Grid to Your Component
Now, in your Angular component, you can add the AG Grid table like this:
<ag-grid-angular
class="ag-theme-alpine"
[rowData]="rowData"
[columnDefs]="columnDefs">
</ag-grid-angular>5. Check for CSS Loader Conflicts
Metronic Angular already has some CSS loaders configured. If you are getting CSS loader errors, you might want to check if there are no conflicts in your Webpack or Angular configuration that override the `node_modules` CSS.
6. Rebuild Your Project
After making these changes, try running:
ng serveThis should now correctly load AG Grid and its associated styles without any issues.
Let me know if this works.
