Comment faire pour importer Angulaire du Matériel dans le projet?

Question

J'ai installé Angulaire de la Conception des Matériaux. Maintenant, j'essaie de l'ajouter app.module.ts le fichier:

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

Ce que je devrais decify dans la section: imports: []? pour charger tout le matériel entités.

J'ai essayé: imports: ['MaterialModule'] , mais c'est déconseillé

Answer 1

MaterialModule a été déprécié dans la version 2.0.0-bêta.3 et il a été complètement supprimé dans la version 2.0.0-bêta.11. Voir ce CHANGELOG pour plus de détails. S'il vous plaît aller à travers les dernières modifications.

Dernières modifications

• Angulaire du Matériel exige maintenant Angulaire 4.4.3 ou plus
• MaterialModule a été supprimé.
• Pour la bêta.11, nous avons pris la décision de rendre caduque le "md"préfixe complètement et utiliser "mat" aller de l'avant.

S'il vous plaît aller à travers le CHANGELOG nous obtiendrons plus de réponse!

Exemple ci-dessous cmd

npm install --save @angular/material @angular/animations @angular/cdk
npm install --save angular/material2-builds angular/cdk-builds

Créer un fichier (matériau.le module.ts) à l'intérieur de l'application dossier

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

l'importation sur l'app.le module.ts

import { MaterialModule } from './material.module';

Votre composant fichier html

<div>
  <mat-toolbar color="primary">
    <span><mat-icon>mood</mat-icon></span>

    <span>Yay, Material in Angular 2!</span>

    <button mat-icon-button [mat-menu-trigger-for]="menu">
      <mat-icon>more_vert</mat-icon>
    </button>
  </mat-toolbar>
  <mat-menu x-position="before" #menu="matMenu">
    <button mat-menu-item>Option 1</button>
    <button mat-menu-item>Option 2</button>
  </mat-menu>

  <mat-card>
    <button mat-button>All</button>
    <button mat-raised-button>Of</button>
    <button mat-raised-button color="primary">The</button>
    <button mat-raised-button color="accent">Buttons</button>
  </mat-card>

  <span class="done">
    <button mat-fab>
      <mat-icon>check circle</mat-icon>
    </button>
  </span>
</div>

Ajouter le global css style.css'

@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
@import '~@angular/material/prebuilt-themes/indigo-pink.css'; 

Votre composant css

body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

mat-card {
  max-width: 80%;
  margin: 2em auto;
  text-align: center;
}

mat-toolbar-row {
  justify-content: space-between;
}

.done {
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: white;
}

Si quelqu'un n'a pas obtenir de sortie utiliser les instructions ci-dessous

au lieu de l'interface ci-dessus (matériel.le module.ts) u peut utiliser directement ci-dessous, le code de l'application.le module.ts.

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdButtonModule, MdCardModule, MdMenuModule, MdToolbarModule, MdIconModule, MatAutocompleteModule, MatInputModule,MatFormFieldModule } from '@angular/material';

Donc ce cas, u ne souhaitez pas importer

import { MaterialModule } from './material.module';

dans l'application.le module.ts

Answer 2

Si vous souhaitez importer toutes les Matières des modules, créer votre propre module, c'est à dire material.module.ts et de faire quelque chose comme ce qui suit:

import { NgModule } from '@angular/core';
import * as MATERIAL_MODULES from '@angular/material';

export function mapMaterialModules() {
  return Object.keys(MATERIAL_MODULES).filter((k) => {
    let asset = MATERIAL_MODULES[k];
    return typeof asset == 'function'
      && asset.name.startsWith('Mat')
      && asset.name.includes('Module');
  }).map((k) => MATERIAL_MODULES[k]);
}
const modules = mapMaterialModules();

@NgModule({
    imports: modules,
    exports: modules
})
export class MaterialModule { }

Puis importer le module dans votre app.module.ts

Answer 3

L' MaterialModule a été déprécié dans la beta3 version avec l'objectif que les développeurs ne devraient importer dans leur demandes ce qu'ils vont utiliser et donc d'améliorer le bundle de la taille.

Les développeurs ont maintenant 2 options:

• Créer une personnalisée MyMaterialModule , les importations/exportations, les composants de votre application exige et peut être importés par d'autres (fonction) modules dans votre application.
• Importer directement le matériel individuel modules un module nécessite en elle.

Prendre comme exemple (extrait de matériau de page)

Première approche:

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

@NgModule({
  imports: [MdButtonModule, MdCheckboxModule],
  exports: [MdButtonModule, MdCheckboxModule],
})
export class MyOwnCustomMaterialModule { }

Vous pouvez ensuite importer ce module dans l'une des vôtres.

Deuxième approche:

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

@NgModule({
  ...
  imports: [MdButtonModule, MdCheckboxModule],
  ...
})
export class PizzaPartyAppModule { }

Maintenant, vous pouvez utiliser la matière dans le cadre de toutes les composantes déclaré en PizzaPartyAppModule

Il convient de mentionner les suivantes:

• Avec la dernière version de matériel, vous devez l'importer BrowserAnimationsModule dans votre module principal si vous le souhaitez animations de travail
• Avec la dernière version, les développeurs doivent maintenant ajouter @angular/cdk leur package.json (matériel de dépendance)
• Importer le matériel des modules toujours après l' BrowserModule, comme indiqué par les docs:

Quelle que soit l'approche que vous utilisez, assurez-vous d'importer l'angle de Matériel les modules après Angulaire du BrowserModule, comme l'ordre d'importation des questions pour NgModules.

Answer 4

Étape 1

yarn add @angular/material @angular/cdk @angular/animations

Étape 2 - Créer un nouveau fichier( /myApp/src/app/matériel.le module.ts ) qui inclut tout le matériel de l'INTERFACE utilisateur des modules (il n'y a pas de raccourci, vous devez inclure les modules un par un)

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

Étape 3 - Importation et d'ajouter que le module nouvellement créé à votre app.le module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MaterialModule } from './material.module'; // material module imported

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MaterialModule // MAteria module added
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 5

Cliquez ici pour voir la capture d'écran du message d'Erreur

Si vous obtenez cette erreur "du compilateur.js:2430 Uncaught Error: Unexpected directive "MatIcon' importé par le module "AppModule'. S'il vous plaît ajouter un @NgModule annotation"

S'il vous plaît ne pas importer MatIcon de @angulaire/matériel.

Il suffit d'Importer ci-dessous: importer { MatIconModule } à partir de '@angulaire/matériel';

---

Comment faire pour importer Angulaire du Matériel?

Vous pouvez exécuter la commande ci-dessous. ng ajouter @angulaire/matériel