TS2305: Module './@angular/material/material&#

Question

This question already has an answer here:

• How to import Angular Material in project? 5 answers

I believe this error has aroused due to an update of the material module from version 10 to 12, but I have found no solution to this issue. current material module version:

"@angular/material": "^2.0.0-beta.12"

in package-lock.json:

"@angular/material": {
  "version": "2.0.0-beta.12",
  "resolved": "https://registry.npmjs.org/@angular/material/-/material-2.0.0-beta.12.tgz",
  "integrity": "sha1-cbbQt7AhiR5dDjaIwdS9eMdFf1g=",
  "requires": {
    "tslib": "1.8.0"
  }
},

Answer 1

MaterialModule has been removed with angular material version 2.0.0-beta.11 for performance reasons (see their changelog). From beta 11 you'll have to import each material module you need separately. Of course you can also create a dedicated module where you'd put all your material modules in and import the module into your root module (or whatever module you will be using it).

For more details you might want to refer to their roadmap as well, quote:

We've found that, with the current state of tree-shaking in the world, that using an aggregate NgModule like MaterialModule leads to tools not being able to eliminate code for components that aren't used.

In order to ensure that users end up with the smallest code size possible, we're deprecating MaterialModule, to be removed in the a subsequent release.

To replace MaterialModule, users can create their own "Material" module within their application (e.g., GmailMaterialModule) that imports only the set of components actually used in the application.