Angular Material with Angular 7 - angular-material

Question

I'm new to angular, but we are implementing Angular material for the popup functionality.
In the app.module.ts I'm importing the MatButtonModule and MatDialog module with the following import statements.
import {MatButtonModule} from "#angular/material/button/typings/button-module";
import {MatDialogModule} from "#angular/material/dialog/typings/dialog-module";
For some reason when I compile, using ng build, I get the error message below.
ng build
Date: 2020-05-04T18:47:12.434Z
Hash: 9bec1eb21effd8a26717
Time: 10607ms
chunk {main} main.js, main.js.map (main) 426 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 425 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 200 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 5.56 MB [initial] [rendered]
ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '#angular/material/button/typings/button-module' in
'C:\Code\AFI\bugs\68550\Hpfc.Afi.Web\src\app'
ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '#angular/material/dialog/typings/dialog-module' in
'C:\Code\AFI\bugs\68550\Hpfc.Afi.Web\src\app'
Here are my versions
Angular CLI: 7.3.9
Node: 12.16.2
OS: win32 x64
Angular: 7.2.15
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
---------------------------------------------------------
#angular-devkit/architect 0.13.9
#angular-devkit/build-angular 0.13.9
#angular-devkit/build-webpack 0.13.9
#angular-devkit/core 0.7.5
#angular-devkit/schematics 0.7.5
#angular/animations 7.2.16
#angular/cdk 7.3.7
#angular/cli 7.3.9
#angular/material 7.3.7
#ngtools/json-schema 1.1.0
#ngtools/webpack 7.3.9
#schematics/angular 7.3.9
#schematics/package-update 0.7.5
#schematics/update 0.13.9
rxjs 6.5.4
typescript 3.2.4
webpack 4.29.0
What am I missing or not doing correctly to get those error message?

Answer 1

In order to import these modules you also need to add them to the module where you want to use them, E.g: app.module.ts
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule, MatButtonModule, MatDialogModule],
providers: [],
bootstrap: [AppComponent]
})
Then you should be able to use both of them in all the components that belong to that module