Réponses:
Après la mise à niveau vers Angular 9 (publié aujourd'hui), j'ai également rencontré ce problème et j'ai constaté qu'ils avaient apporté le changement de rupture mentionné dans la réponse . Je ne trouve pas de raison pour laquelle ils ont fait ce changement.
J'ai un fichier material.module.ts que j'importe / exporte tous les composants matériels (pas le plus efficace, mais utile pour un développement rapide). J'ai parcouru et mis à jour toutes mes importations dans les dossiers de matériaux individuels, bien qu'un baril index.ts puisse être mieux. Encore une fois, je ne sais pas pourquoi ils ont fait ce changement, mais je suppose que cela a à voir avec l'efficacité de l'agitation des arbres.
Y compris mon material.module.ts ci-dessous au cas où cela aiderait quelqu'un, il est inspiré d'autres modules matériels que j'ai trouvés:
REMARQUE : Comme d'autres articles de blog l'ont mentionné et d'après mon expérience personnelle, soyez prudent lorsque vous utilisez un module partagé comme ci-dessous. J'ai 5 ~ modules de fonctionnalités différents (chargés paresseusement) dans mon application dans lesquels j'ai importé mon module de matériau. Par curiosité, j'ai cessé d'utiliser le module partagé et à la place, j'ai seulement importé les composants matériels individuels dont chaque module de fonction avait besoin. Cela a réduit ma taille de bundle un peu, presque une réduction de 200 Ko. J'ai supposé que le processus d'optimisation de construction supprimerait correctement tout composant non utilisé par mes modules, mais cela ne semble pas être le cas ...
// material.module.ts
import { ModuleWithProviders, NgModule} from "@angular/core";
import { MAT_LABEL_GLOBAL_OPTIONS, MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
import { MatIconRegistry } from '@angular/material/icon';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatRippleModule } from '@angular/material/core';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
@NgModule({
imports: [
MatAutocompleteModule,
MatBadgeModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatTreeModule,
MatNativeDateModule
],
exports: [
MatAutocompleteModule,
MatBadgeModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatTreeModule,
MatNativeDateModule
],
providers: [
]
})
export class MaterialModule {
constructor(public matIconRegistry: MatIconRegistry) {
// matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
}
static forRoot(): ModuleWithProviders {
return {
ngModule: MaterialModule,
providers: [MatIconRegistry]
};
}
}
On dirait que ce fil dit qu'un changement de rupture a été émis:
Les composants ne peuvent plus être importés via "@ angular / material". Utilisez les points d'entrée secondaires individuels, tels que @ angulaire / matériau / bouton.
Mise à jour : peut confirmer, c'était le problème. Après avoir rétrogradé @angular/material@9.0...à, @angular/material@7.3.2nous pourrions résoudre ce problème temporairement. Je suppose que nous devons mettre à jour le projet pour une solution à long terme.
ng update @angular/material, il va migrer et mettre à jour toutes les importations pour vous :)
Cela peut être résolu en écrivant le chemin complet, par exemple si vous souhaitez inclure le MatDialogModulesuivi:
Avant @ angulaire / matériau 9.xx
import { MatDialogModule } from "@angular/material";
//leading to error mentionedSelon @ angulaire / matériau 9.xx
import { MatDialogModule } from "@angular/material/dialog";
//works fine Référence officielle des modifications apportées au journal des modifications: https://github.com/angular/components/blob/master/CHANGELOG.md#material-9
Les composants ne peuvent plus être importés (depuis Angular 9) via le répertoire général
vous devez ajouter un chemin de composant spécifié comme
import {} from '@angular/material';
import {} from '@angular/material/input';
import { MatDialogModule } from '@angular/material/dialog';
import { MatTableModule } from '@angular/material/table';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';Et ng update @angular/materialmettra également à jour votre code et corrigera toutes les importations
La réponse acceptée est correcte, mais cela n'a pas entièrement fonctionné pour moi. J'ai dû supprimer le fichier package.lock, relancer «npm install», puis fermer et rouvrir mon studio visuel. J'espère que cela aide quelqu'un
Faire npm i -g @angular/material --savepour résoudre le problème