Solución:
ACTUALIZAR para Angular 9.0.1
Desde esta versión no existe un archivo de barril para exportaciones masivas en la raíz index.d.ts. Las importaciones de activos deben ser:
import { NgModule } from '@angular/core';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule} from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
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 {}
fuente: @ angular / material / index.d.ts ‘no es un módulo
MaterialModule se depreció en la versión 2.0.0-beta.3 y se eliminó por completo en la versión 2.0.0-beta.11. Vea este CAMBIO para más detalles. Por favor revise los cambios más importantes.
Rompiendo cambios
- Angular Material ahora requiere Angular 4.4.3 o superior
- MaterialModule ha sido removido.
- Para beta.11, hemos tomado la decisión de desaprobar el “md” prefijo completamente y usar “tapete” avanzando.
Por favor, revise CHANGELOG, ¡obtendremos más respuestas!
Ejemplo que se muestra a continuación cmd
npm install --save @angular/material @angular/animations @angular/cdk
npm install --save angular/material2-builds angular/cdk-builds
Cree el archivo (material.module.ts) dentro de la carpeta ‘aplicación’
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 {}
importar en app.module.ts
import { MaterialModule } from './material.module';
El archivo html de su componente
<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>
Agregar CSS global ‘style.css’
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
@import '[email protected]/material/prebuilt-themes/indigo-pink.css';
Su componente 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 alguien no obtuvo la salida, use las siguientes instrucciones
en lugar de la interfaz anterior (material.module.ts), puede usar directamente el código siguiente también en app.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';
Entonces, en este caso no quieres importar
import { MaterialModule } from './material.module';
en el app.module.ts
Si quieres importar todos Módulos de material, cree su propio módulo, es decir material.module.ts
y haz algo como lo siguiente:
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 { }
Luego importe el módulo a su app.module.ts
Importe todos los módulos de Angular Material en Angular 9.
Cree el archivo material.module.ts en el directorio your_project / src / app / y pegue este código.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatBadgeModule } from '@angular/material/badge';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatStepperModule } from '@angular/material/stepper';
import { MatTabsModule } from '@angular/material/tabs';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
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 { MatDialogModule } from '@angular/material/dialog';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';
@NgModule( {
imports: [
CommonModule,
BrowserAnimationsModule,
MatCheckboxModule,
MatCheckboxModule,
MatButtonModule,
MatInputModule,
MatAutocompleteModule,
MatDatepickerModule,
MatFormFieldModule,
MatRadioModule,
MatSelectModule,
MatSliderModule,
MatSlideToggleModule,
MatMenuModule,
MatSidenavModule,
MatBadgeModule,
MatToolbarModule,
MatListModule,
MatGridListModule,
MatCardModule,
MatStepperModule,
MatTabsModule,
MatExpansionModule,
MatButtonToggleModule,
MatChipsModule,
MatIconModule,
MatProgressSpinnerModule,
MatProgressBarModule,
MatDialogModule,
MatTooltipModule,
MatSnackBarModule,
MatTableModule,
MatSortModule,
MatPaginatorModule
],
exports: [
MatButtonModule,
MatToolbarModule,
MatIconModule,
MatSidenavModule,
MatBadgeModule,
MatListModule,
MatGridListModule,
MatInputModule,
MatFormFieldModule,
MatSelectModule,
MatRadioModule,
MatDatepickerModule,
MatChipsModule,
MatTooltipModule,
MatTableModule,
MatPaginatorModule
],
providers: [
MatDatepickerModule,
]
} )
export class AngularMaterialModule { }