AG Grid - CSS Loader issue

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.

   <pre> npm install ag-grid-community ag-grid-angular --save </pre>

2. 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:

   <pre> "styles": [ "src/styles.scss", "node_modules/ag-grid-community/styles/ag-grid.css", "node_modules/ag-grid-community/styles/ag-theme-alpine.css" ] </pre>

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:

   <pre> @import "~ag-grid-community/styles/ag-grid.css"; @import "~ag-grid-community/styles/ag-theme-alpine.css"; </pre>

4. Add AG Grid to Your Component Now, in your Angular component, you can add the AG Grid table like this:

   <pre> <ag-grid-angular class="ag-theme-alpine" [rowData]="rowData" [columnDefs]="columnDefs"> </ag-grid-angular> </pre>

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:

   <pre> ng serve </pre>

   This should now correctly load AG Grid and its associated styles without any issues.

Let me know if this works.