错误：@angular/material/material没有导出成员'MdButtonModule'。

Question

从@angular/material 2.0.0-beta.11升级到2.0.0-beta.12后，出现了以下错误：

模块@angular/material/material没有导出'MdButtonModule'成员。

Typescript代码：

import { MdButtonModule } from '@angular/material';

发生了什么事情？

在 c:/dev/my-proj/src/app/app-material/app-material.module.ts 中发生错误： 模块 '"c:/dev/my-proj/node_modules/@angular/material/material"' 没有导出成员 'MdButtonModule'。在 c:/dev/my-proj/src/app/app-material/app-material.module.ts 中发生错误：模块 '"c:/dev/my-proj/node_modules/@angular/material/material"' 没有导出成员 'MdCardModule'。在 c:/dev/my-proj/src/app/app-material/app-material.module.ts 中发生错误：模块 '"c:/dev/my-proj/node_modules/@angular/material/material"' 没有导出成员 'MdCheckboxModule'。在 c:/dev/my-proj/src/app/app-material/app-material.module.ts 中发生错误：模块 '"c:/dev/my-proj/node_modules/@angular/material/material"' 没有导出成员 'MdIconModule'。在 c:/dev/my-proj/src/app/app-material/app-material.module.ts 中发生错误：模块 '"c:/dev/my-proj/node_modules/@angular/material/material"' 没有导出成员 'MdOptionModule'。在 c:/dev/my-proj/src/app/app-material/app-material.module.ts 中发生错误：模块 '"c:/dev/my-proj/node_modules/@angular/material/material"' 没有导出成员 'MdProgressSpinnerModule'。在 c:/dev/my-proj/src/app/app-material/app-material.module.ts 中发生错误：模块 '"c:/dev/my-proj/node_modules/@angular/material/material"' 没有导出成员 'MdSelectModule'。在 c:/dev/my-proj/src/app/app-material/app-material.module.ts 中发生错误：模块 '"c:/dev/my-proj/node_modules/@angular/material/material"' 没有导出成员 'MdSidenavModule'。在 c:/dev/my-proj/src/app/app-material/app-material.module.ts 中发生错误：模块 '"c:/dev/my-proj/node_modules/@angular/material/material"' 没有导出成员 'MdToolbarModule'。 在错误中： MdButtonModule 不是 NgModule at _getNgModuleMetadata (c:\dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_impl.js:140:15) at _extractLazyRoutesFromStaticModule (c:\dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_impl.js:109:26) at c:\dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_impl.js:129:27 at Array.reduce (native) at _extractLazyRoutesFromStaticModule (c:\dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_impl.js:128:10) at c:\dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_impl.js:129:27 at Array.reduce (native) at _extractLazyRoutesFromStaticModule (c:\dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_impl.js:128:10) at Object.listLazyRoutesOfModule (c:\dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_impl.js:53:22) at Function.NgTools_InternalApi_NG_2.listLazyRoutes (c:\dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_api.js:91:39) at AotPlugin._getLazyRoutesFromNgtools (c:\dev\my-proj\node_modules\@ngtools\webpack\src\plugin.js:207:44) at _donePromise.Promise.resolve.then.then.then.then.then (c:\dev\my-proj\node_modules\@ngtools\webpack\src\plugin.js:443:24)

- Frederik Struck-Schøning

Answer 1

您需要将MdButtonModule替换为MatButtonModule，并且您还需要更新模板中的前缀，即md-button现在应该改成mat-button。要在整个应用程序中更新前缀，请按照此前缀更新器的指南操作。

自从2.0.0-beta.12版本以来，已经删除了Md前缀，您应该在所有地方使用Mat前缀。根据2.0.0-beta.11版本的更改日志：

“对于beta.11版本，我们决定彻底弃用“md”前缀，并向前使用“mat”。这影响到所有类名、属性、输入、输出和选择器（CSS类在二月份已更改）。在下一个beta发布中，将删除“md”前缀。”

根据2.0.0-beta.12版本的更改日志：

“重大改变：已删除所有“md”前缀。”

请参见此工作的StackBlitz演示，其中包含单独的材料模块并使用Mat前缀。

- FAISAL

---

我从来不理解前端世界。你能否解释一下，对于一个次要的维护版本号（0-beta.11 -> 0-beta.12），这样进行如此巨大的命名转换是否合理（针对前端开发人员）？ - Andrew Tobilko

Answer 2

对于Angular Material v9及以上版本

他们将从@angular/material的表示方式更改为类似于@angular/material/button的表示方式。

不要从@angular/material导入，而是应该从具体的组件深入导入。例如：@angular/material/button。ng update会自动为您完成此操作。

之前：

import { MatButtonModule } from '@angular/material';

之后：

import { MatButtonModule } from '@angular/material/button';

您可以通过此链接查看升级指南： https://update.angular.io/?v=8.0-9.0

- eko

Answer 3

将 import-directive 替换为

import { MatButtonModule } from '@angular/material';

MdSomethingModule 命名规则 在 beta.11 版本中已经被弃用, 并且在 beta.12 版本 被完全替换为 MatSomethingModule。

- Frederik Struck-Schøning

Answer 4

在 Angular Material 2 Beta 3 之前，可以在应用程序模块中导入全局的 MaterialModule 以使组件可用。然而，这种方法的缺点是摇树优化无法有效地删除所有未使用的代码。

因此，MaterialModule 已被弃用，建议定义一个项目特定的自定义 Material 模块，在该模块中只导入和导出所需的组件。以下是您的模块可能看起来的样子：

import { NgModule } from '@angular/core';

import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ]
})
export class MaterialModule {}

然后在根应用程序模块中导入此模块。

导入MaterialModule并将其添加到您的imports中。您还需要在模块中导入必要的动画。您的应用程序模块（例如：app.module.ts）将看起来有点像这样：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from './material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

您可以在此处找到有关使用Angular Material的更多信息：https://alligator.io/angular/angular-material-2/

- Uche Azinge

Answer 5

使用Mat前缀代替Md。例如：

import { MatButtonModule, MatCheckboxModule } from '@angular/material'

之前代码可以运行，但是在使用import { MdButtonModule, MdCheckboxModule } from '@angular/material'时出现了错误。

- Володимир Заплатинський

Answer 6

这对我有用，我加入了以下代码行，或许对你也有帮助。

参考链接：@angular/material/index.d.ts 不是一个模块。

import { MatButtonModule } from '@angular/material/button';

- Murilo Eduardo

Answer 7

如果您使用@angular/material，将会有一些重大的破坏性变化。不再有MaterialModule了。这个想法是，只导入您需要的东西，如果我需要的只是一个按钮，那么只需要导入按钮即可。关于第一个问题，一个简单的解决方法是从相应的模块中导入组件，如下所示。

import { MatCommonModule, MatRippleModule } from '@angular/material/core';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatRadioButton } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSliderModule } from '@angular/material/slider';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatInputModule } from '@angular/material/input';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTabsModule } from '@angular/material';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatMenuModule } from '@angular/material/menu';
import { MatDialogModule } from '@angular/material/dialog';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatExpansionPanel } from '@angular/material';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatStepperModule } from '@angular/material/stepper';

如果你想让你的应用程序再次快速运行，这是一个不错的解决方案。然后，你的个别应用程序可以选择作为上述导入的子集来导入它们所需的内容。

- Sandeep Patel

Answer 8

替换
import { MatButtonModule } from '@angular/material';
为
import { MatButtonModule } from '@angular/material/button';

在最新的(V7+) Angular Material中，您需要提供到组件的路径。

- Raj Kumar

Answer 9

• 在2.0.0-beta.11中，将Mat*替换为Md*
• 在2.0.0-beta.12中，将Md*替换为Mat*，请参见deprecation

- mani R

Answer 10

以下展示了如何声明您的导入语句：

import { MatButtonModule } from "@angular/material/button"
import { MatIconModule }   from "@angular/material/icon"
import { MatInputModule }  from "@angular/material/input"

从上述语句中，您可以看到声明了哪个模块到哪个文件夹的模式。此外，您只需在模块文件夹中搜索模块即可找到这一点：

 /node-modules/@angular/material/button
 /node-modules/@angular/material/icon
 /node-modules/@angular/material/input 

- allan-g