Question

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

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

打字稿代码：

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

发生了什么事？

错误在c：/dev/my-proj/src/app/app-material/app-material.module.ts （4,3）：模块 '“c：/ dev / my-proj / node_modules / @ angular / material / material”'没有导出成员'MdButtonModule'。错误 c：/dev/my-proj/src/app/app-material/app-material.module.ts(5,3）：模块'“c：/ dev / my-proj / node_modules / @ angular / material / material”'有没有导出的成员'MdCardModule'。错误 c：/dev/my-proj/src/app/app-material/app-material.module.ts(6,3）：模块'“c：/ dev / my-proj / node_modules / @ angular / material / material”'有没有导出的成员'MdCheckboxModule'。错误 c：/dev/my-proj/src/app/app-material/app-material.module.ts(7,3）：模块'“c：/ dev / my-proj / node_modules / @ angular / material / material”'有没有导出的成员'MdIconModule'。错误 c：/dev/my-proj/src/app/app-material/app-material.module.ts(8,3）：模块'“c：/ dev / my-proj / node_modules / @ angular / material / material”'有没有导出的成员'MdOptionModule'。错误 c：/dev/my-proj/src/app/app-material/app-material.module.ts(9,3）：模块'“c：/ dev / my-proj / node_modules / @ angular / material / material”'有没有导出的成员'MdProgressSpinnerModule'。错误 c：/dev/my-proj/src/app/app-material/app-material.module.ts(10,3）：模块'“c：/ dev / my-proj / node_modules / @ angular / material / material”'有没有导出的成员'MdSelectModule'。错误 c：/dev/my-proj/src/app/app-material/app-material.module.ts(11,3）：模块'“c：/ dev / my-proj / node_modules / @ angular / material / material”'有没有导出的成员'MdSidenavModule'。错误 c：/dev/my-proj/src/app/app-material/app-material.module.ts(12,3）：模块'“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）在c：\ dev \ my-proj \ node_modules \ @angular \ compiler-cli \ src \ ngtools_impl.js：129：27 在Array.reduce（本机） at _extractLazyRoutesFromStaticModule（c：\ dev \ my-proj \ node_modules \ @angular \ compiler-cli \ src \ ngtools_impl.js：128：10）在c：\ dev \ my-proj \ node_modules \ @angular \ compiler-cli \ src \ ngtools_impl.js：129：27 在Array.reduce（本机） 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）在Function.NgTools_InternalApi_NG_2.listLazyRoutes（c：\ dev \ my-proj \ node_modules \ @angular \ compiler-cli \ src \ ngtools_api.js：91：39）在AotPlugin._getLazyRoutesFromNgtools（c：\ dev \ my-proj \ node_modules \ @ngtools \ webpack \ src \ plugin.js：207：44）在_donePromise.Promise.resolve.then.then.then.then.then（c：\ dev \ my-proj \ node_modules \ @ngtools \ webpack \ src \ plugin.js：443：24）

Answer 1

您必须包含MatButtonModule而不是MdButtonModule。您还必须更新模板中的前缀，即md-button现在应为mat-button。要更新整个应用中的前缀，请按照 Prefix Updater 中的指南进行操作。

由于2.0.0-beta.12 Md前缀已被删除，因此您应该在任何地方使用Mat前缀。来自2.0.0-beta.11的{{3}}：

对于beta.11，我们已决定弃用＆＃34; md＆＃34;字首完全使用＆＃34; mat＆＃34;向前进。这会影响所有类名，属性，输入，输出和选择器（CSS类已更改回到二月）。＆＃34; md＆＃34;前缀将在下一个测试版中删除释放。

来自2.0.0-beta.12的{{3}}：

重大变化 所有＆＃34; md＆＃34;前缀已被删除。

使用个别材料模块并使用Mat前缀

查看此工作CHANGELOG

Answer 2

将import-directive替换为

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

MdSomethingModule命名惯例was deprecated in beta.11，以及MatSomethingModule的beta.12 it was completely replaced。

Answer 3

在Angular Material 2 Beta 3之前，有一个全局MaterialModule可以在app模块中导入，以使组件可用。这样做的缺点是树抖动不足以删除所有未使用的代码。

因此，不推荐使用MaterialModule，而是支持定义特定于项目的自定义材料模块，您只需导入和导出所需的组件。这是你的模块的样子：

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并将其添加到导入中。您还需要在模块中导入动画所需的内容。您的应用模块（例如：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 { }

您可以在此处找到有关使用角度材料的更多信息https://alligator.io/angular/angular-material-2/

Answer 4

使用 Mat 前缀代替 Md 。例如

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

正在运行，但import { MdButtonModule, MdCheckboxModule } from '@angular/material'收到错误

Answer 5

用Md *替换Mat * for 2.0.0-beta.11
用Mat替换Md * *请参阅deprecation获取2.0.0-beta.12

Answer 6

给出的解决方案针对错误的前缀，但由于版本不匹配，它也可能发生。

示例

"@angular/core": "^7.1.0"
"@angular/cdk": "^9.0.0",
"@angular/material": "^9.0.0",

Answer 7

对我有用，我写了下一行，也许对您有用。

参考链接@angular/material/index.d.ts' is not a module

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

Answer 8

替换
从 '@angular/material' 导入 { MatButtonModule };
与
从 '@angular/material/button' 导入 { MatButtonModule };

您需要在最新的（V7+）角度材料中给出直到组件的路径

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

8 个答案: