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 --save
   

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:

   "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:

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 serve
   

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

Let me know if this works.