AG Grid - CSS Loader issue
Hi,
When I tried to install AG Grid (data grid - https://www.ag-grid.com/), 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 (1)
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.
