Angular 意外值'；Matsnakbar&x27；由模块导入'；AppModule'；。请添加@NgModule注释

我想利用Matsnakbar在事件完成时显示通知。我在我的应用程序模块中导入了Matsnakbar，下面是我的app.module.ts

...
import { MatSnackBar,
    MatSnackBarConfig, ...
} from '@angular/material';
...

@NgModule({
    declarations: [...],
    imports: [MatSnackBar, MatSnackBarConfig, ...],
    providers: [...],
    bootstrap: [...],
    entryComponents: [...]
})
export class AppModule {
}

下面是my package.json：

{
    "@angular/animations": "^5.1.0",
    "@angular/cdk": "^5.0.0",
    "@angular/cli": "^1.6.1",
    "@angular/common": "^5.1.0",
    "@angular/compiler": "^5.1.0",
    "@angular/compiler-cli": "^5.1.0",
    "@angular/core": "^5.1.0",
    "@angular/forms": "^5.1.0",
    "@angular/http": "^5.1.0",
    "@angular/language-service": "^5.1.0",
    "@angular/material": "^5.0.0",
    "@angular/platform-browser": "^5.1.0",
    "@angular/platform-browser-dynamic": "^5.1.0",
    "@angular/router": "^5.1.0",
    "@swimlane/ngx-charts": "^7.0.1",
    "@types/jasmine": "^2.8.2",
    "@types/jasminewd2": "^2.0.3",
    "@types/node": "^8.0.56",
    "angular2-datatable": "^0.6.0",
    "core-js": "^2.5.1",
    "d3": "^4.10.0",
    "ng-http-loader": "^0.2.0",
    "ng2-charts": "^1.6.0",
    "ng2-handsontable": "^1.0.3",
    "rxjs": "^5.5.5",
    "zone.js": "^0.8.18"
}

下面是我得到的错误：

compiler.js:485 Uncaught Error: Unexpected value 'MatSnackBar' imported by the module 'AppModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.js:485)
    at eval (compiler.js:15206)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15189)
    at JitCompiler._loadModules (compiler.js:34226)
    at JitCompiler._compileModuleAndComponents (compiler.js:34187)
    at JitCompiler.compileModuleAsync (compiler.js:34081)
    at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:230)
    at PlatformRef.bootstrapModule (core.js:5573)
    at eval (main.ts:11)

compiler.js:485未捕获错误：模块“AppModule”导入了意外值“matsnakbar”。请添加@NgModule注释。
在syntaxError（compiler.js:485）
评估时（compiler.js:15206）
在Array.forEach（）处
位于CompileMetadataResolver.getNgModuleMetadata（compiler.js:15189）
在JitCompiler.\u loadModules（compiler.js:34226）
在JitCompiler.\u compileemoduleandcomponents（compiler.js:34187）
在JitCompiler.compileModuleAsync（compiler.js:34081）
在CompilerImpl.compileModuleAsync（平台浏览器dynamic.js:230）
在PlatformRef.bootstrapModule（core.js:5573）
评估时（主要技术规范：11）

我正在使用angular material 5.0.0，是否需要使用其他版本来使用Matsnakbar

您需要导入

import { MatSnackBarModule } from "@angular/material";

并将其添加到进口项下

@NgModule({
    imports: [
        MatSnackBarModule,
    ],
    providers: [

    ],
})

---

参考

这里是对我有效的方法：
（之前我有导入错误，如

文件'angular/app/node_modules/@angular/material/index.d.ts'不是模块。

在

app.module.ts

中导入

matsnakbarmodule

：

import { NgModule } from '@angular/core';
import { MatSnackBarModule } from '@angular/material/snack-bar'; // <= import the module: MatSnackBarMODULE

@NgModule({
  declarations: [ 
 ],

 imports: [
     MatSnackBarModule,                                           // <= add it to import list
 ],

import { MatSnackBar } from '@angular/material/snack-bar'; // <= ⚠️ import the class with path 'material/SNACK-BAR'

// […] 

export class AppComponent {

  constructor( private _snackbar: MatSnackBar ) {     // <= add it to constructor
  }

  // Use it the way you like it
  fooBar() {

      const snack = this._snackbar.open('Hello', 'Action');
      snack
        .onAction()
        .subscribe(() => {
          // Action...
        });
   }        
}

演示打开

---

是的，我的不好。添加此导入后，工作正常，非常感谢！