web-dev-qa-db-fra.com

ERREUR: @ angular / material / material n'a pas de membre exporté 'MdButtonModule'

L'erreur ci-dessous est survenue après la mise à niveau de @ angular/material 2.0.0-beta.11 vers 2.0.0-beta.12:

Le module @ angular/material/material n'a pas de membre exporté 'MdButtonModule'.

Code TypeScript:

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

Qu'est-il arrivé?

ERREUR dans c: /dev/my-proj/src/app/app-material/app-material.module.ts (4,3): Module '"c:/dev/my-proj/node_modules/@ angular/material/material "'n'a pas de membre exporté' MdButtonModule '. ERREUR dans c: /dev/my-proj/src/app/app-material/app-material.module.ts (5,3): Module '"c:/dev/my-proj/node_modules/@ angular/material/material "'n'a pas de membre exporté' MdCardModule '. ERREUR dans c: /dev/my-proj/src/app/app-material/app-material.module.ts (6,3): Module '"c:/dev/my-proj/node_modules/@ angular/material/material "'n'a pas de membre exporté' MdCheckboxModule '. ERREUR dans c: /dev/my-proj/src/app/app-material/app-material.module.ts (7,3): Module '"c:/dev/my-proj/node_modules/@ angular/material/material "'n'a pas de membre exporté' MdIconModule '. ERREUR dans c: /dev/my-proj/src/app/app-material/app-material.module.ts (8,3): Module '"c:/dev/my-proj/node_modules/@ angular/material/material "'n'a pas de membre exporté' MdOptionModule '. ERREUR dans c: /dev/my-proj/src/app/app-material/app-material.module.ts (9,3): Module '"c:/dev/my-proj/node_modules/@ angular/material/material "'n'a pas de membre exporté' MdProgressSpinnerModule '. ERREUR dans c: /dev/my-proj/src/app/app-material/app-material.module.ts (10,3): Module '"c:/dev/my-proj/node_modules/@ angular/material/material "'n'a pas de membre exporté' MdSelectModule '. ERREUR dans c: /dev/my-proj/src/app/app-material/app-material.module.ts (11,3): Module '"c:/dev/my-proj/node_modules/@ angular/material/material "'n'a pas de membre exporté' MdSidenavModule '. ERREUR dans c: /dev/my-proj/src/app/app-material/app-material.module.ts (12,3): Module '"c:/dev/my-proj/node_modules/@ angular/material/material "'n'a pas de membre exporté' MdToolbarModule '. ERREUR en erreur: MdButtonModule n'est pas un NgModule sur _getNgModuleMetadata (c:\dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_impl.js: 140: 15) sur _extractLazyRoutesFromStaticModule-:\proj\node_modules\@angular\compiler-cli\src\ngtools_impl.js: 109: 26) sur c:\dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_impl.js: 129: 27 sur Array.reduce (native) sur _extractLazyRoutesFromStaticModule (c:\dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_impl.js: 128: 10) sur c:\dev\my-proj\node_modules\@ angular\compiler-cli\src\ngtools_impl.js: 129: 27 à Array.reduce (native) à _extractLazyRoutesFromStaticModule (c:\dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_impl.js: 128 : 10) sur Object.listLazyRoutesOfModule (c:\dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_impl.js: 53: 22) sur Function.NgTools_InternalApi_NG_2.listLazyRoutes (c:\dev\my- proj\node_modules\@angular\compiler-cli\src\ngtools_api.js: 91: 39) sur AotPlugin._getLazyRoutesFromNgtools (c:\dev\my-proj\node_modules\@ngtools\webpack\src\plugin.js: 207: 44) à _donePromise.Promise.resolve.then.then.then.then.then.then.then.then.then (alors c:\dev\my-proj\node_modules\@ngtools\webpack\src\plugin.js: 443: 24)

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

Vous devez inclure MatButtonModule au lieu de MdButtonModule. Vous devrez également mettre à jour le préfixe dans votre modèle, c'est-à-dire md-button devrait maintenant être mat-button. Pour mettre à jour le préfixe dans l'ensemble de votre application, suivez les instructions de ce Prefix Updater.

Puisque 2.0.0-beta.12 le préfixe Md a été supprimé et vous devez utiliser le préfixe Mat partout. À partir du [~ # ~] changelog [~ # ~] of 2.0.0-beta.11:

Pour la version bêta.11, nous avons décidé de supprimer complètement le préfixe "md" et d'utiliser "mat" à l'avenir. Cela affecte tous les noms de classe, propriétés, entrées, sorties et sélecteurs (les classes CSS ont été modifiées en février). Les préfixes "md" seront supprimés dans la prochaine version bêta.

Et à partir du [~ # ~] changelog [~ # ~] of 2.0.0-beta.12:

Changements de rupture Tous les préfixes "md" ont été supprimés.

Voir ce fonctionnement Démo StackBlitz avec des modules de matériaux individuels et en utilisant le préfixe Mat.

La

11
Faisal

Remplacez import-directive par

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

La convention de nommage MdSomethingModulea été déconseillée dans la version beta.11 , et dans la version beta.12 elle a été complètement remplacée par MatSomethingModule.

3
Frederik Struck-Schøning

Avant Angular Material 2 Beta 3, il y avait un MaterialModule global qui pouvait être importé dans le module d'application pour rendre les composants disponibles. L'inconvénient est que le tremblement d'arbre n'est pas assez efficace pour supprimez tout le code inutilisé.

MaterialModule a donc été déconseillé en faveur de la définition d'un module de matériau personnalisé spécifique au projet dans lequel vous importez et exportez uniquement les composants nécessaires. Voici à quoi peut ressembler votre module:

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 {}

Vous importerez ensuite ce module dans le module d'application racine.

Importez MaterialModule et ajoutez-le à vos importations. Vous devrez également importer les éléments nécessaires aux animations dans votre module. Votre module d'application (par exemple: app.module.ts) ressemblera un peu à ceci:

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 { }

Vous pouvez trouver plus d'informations sur l'utilisation de angular ici https://alligator.io/angular/angular-material-2/

2
Uche Azinge

Utilisez le préfixe Mat au lieu de Md. Par exemple

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

travaillait, mais import { MdButtonModule, MdCheckboxModule } from '@angular/material' obtenir une erreur

2
Володимир Заплатинський
  • remplacer Mat * par Md * pour 2.0.0-beta.11
  • remplacer Md * par Mat * voir obsolète pour 2.0.0-beta.12
0
mani R