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:
Mise à jour : peut confirmer, c'était le problème. Après avoir rétrogradé
@angular/[email protected]...à,@angular/[email protected]nous pourrions résoudre ce problème temporairement. Je suppose que nous devons mettre à jour le projet pour une solution à long terme.la source
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
Selon @ angulaire / matériau 9.xx
la source
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/input';la source
la source
Et
ng update @angular/materialmettra également à jour votre code et corrigera toutes les importationsla source
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
la source
Il suffit de mettre à jour @ angular / material de 7 à 9 ,
Attendez et voyez Angular faire la migration seul,
J'espère que cela aide quelqu'un :)
la source
Faire
npm i -g @angular/material --savepour résoudre le problèmela source