How to add only necessary UI component in @angular/material

Question

I am designing an Angular app, I want to reduce the overall size of the app. My app has dependency on Angular Material, I have found inside node_modules it has some unused UI components like autocomplete, checkbox etc are not used at all in my app. I am matInput and some other UI components. I want to get rid of unused ones.

My overall goal is to reduce the size of the app.

What I tried is : Inside package.json, I tried

 "@angular/material/input": "^10.1.0",

instead of just

 "@angular/material": "^10.1.0",

I know this won't work, I am not a professional in angular. Any suggestion on how to remove unused node_modules to reduce the overall size of app would be really appreciated.

Answer 1

In angular 9 the default compiler has been changed with ivy. Ivy makes all the trick for you. Those modules which are not imported i to your app are not included in your final bundle.

In this case if you only use mat input module you still have to download the whole material component kit but the final bundle will only have reference to mat input.

The source of the problem is not the includes. Try to make use of angular router lazy loading feature which will still create big app size but splits the big module into two different modules and it will be downloaded from the server only when its needed.