web-dev-qa-db-ja.com

エラー：@ angular / material / materialにはエクスポートされたメンバー 'MdButtonModule'がありません

@ 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（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は_getNgModuleMetadata（c：\ dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_impl.js：140：15）のNgModuleではありません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（ネイティブ）で_extractLazyRoutesFromStaticModule（c：\ dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_impl.js：128：10）at c：\ dev\my-proj\node_modules\@ angle\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）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）

angularangular-materialangular-material2
11
Frederik Struck-Schøning

MatButtonModuleの代わりにMdButtonModuleを含める必要があります。また、テンプレートのプレフィックスを更新する必要があります。つまり、md-buttonはmat-button。アプリ全体のプレフィックスを更新するには、このPrefix Updaterのガイドラインに従ってください。

2.0.0-beta.12Mdプレフィックスは削除されました。すべての場所でMatプレフィックスを使用する必要があります。 [〜＃〜] changelog [〜＃〜] of 2.0.0-beta.11：

Beta.11については、「md」プレフィックスを完全に廃止し、前進する「mat」を使用することを決定しました。これは、すべてのクラス名、プロパティ、入力、出力、セレクターに影響します（CSSクラスは2月に変更されました）。 「md」プレフィックスは、次のベータリリースで削除されます。

そして、 [〜＃〜] changelog [〜＃〜] of 2.0.0-beta.12：

Breaking Changesすべての「md」プレフィックスが削除されました。

この作業を参照してください StackBlitz demo 個々のマテリアルモジュールで、Matプレフィックスを使用します。

11
Faisal

Import-directiveで置き換えます

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

MdSomethingModule命名規則 beta.11では非推奨 、およびbeta.12では 完全に置き換えられました はMatSomethingModuleによって。

3
Frederik Struck-Schøning

Angular Material 2 Beta 3の前は、アプリケーションモジュールにインポートしてコンポーネントを使用可能にするグローバルMaterialModuleがありました。未使用のコードをすべて削除します。

そのため、必要なコンポーネントのみをインポートおよびエクスポートするプロジェクト固有のカスタムマテリアルモジュールを定義するため、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 { }

angular material here https://alligator.io/angular/angular-material-2/ の使用に関する詳細情報を見つけることができます。

2
Uche Azinge

Mdの代わりにMatプレフィックスを使用します。例えば

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

働いていたが、import { MdButtonModule, MdCheckboxModule } from '@angular/material'エラーを取得

2
Володимир Заплатинський
  • 2.0.0-beta.11のMat *をMd *に置き換えます
  • md *をMat *に置き換えます- deprecation for 2.0.0-beta.12を参照
0
mani R