W Angular 8 podczas tworzenia aplikacji napotykamy następujący błąd:
app/modules/admin-module/pages/editor/editor.component.ts:6:27 - error TS2306:
File ...node_modules/@angular/material/index.d.ts' is not a module.
źródło
W Angular 8 podczas tworzenia aplikacji napotykamy następujący błąd:
app/modules/admin-module/pages/editor/editor.component.ts:6:27 - error TS2306:
File ...node_modules/@angular/material/index.d.ts' is not a module.
Po aktualizacji do Angulara 9 (wydanego dzisiaj) również natknąłem się na ten problem i stwierdziłem, że dokonali przełomowej zmiany wspomnianej w odpowiedzi . Nie mogę znaleźć powodu, dla którego dokonali tej zmiany.
Mam plik material.module.ts, który importuję / eksportuję wszystkie komponenty materiału (nie jest to najbardziej wydajny, ale przydatny do szybkiego programowania). Przejrzałem i zaktualizowałem cały mój import do poszczególnych folderów materiałowych, chociaż baryłka index.ts może być lepsza. Ponownie, nie jestem pewien, dlaczego wprowadzili tę zmianę, ale domyślam się, że ma to związek z wydajnością wstrząsania drzewem.
W tym mój material.module.ts poniżej, na wypadek, gdyby komukolwiek to pomogło, zainspirowany innymi modułami materiałów, które znalazłem:
UWAGA : Jak wspomniano w innych postach na blogu i z własnego doświadczenia, zachowaj ostrożność, korzystając z udostępnionego modułu, takiego jak poniżej. Mam w swojej aplikacji 5 ~ różnych modułów funkcji (leniwie załadowanych), do których zaimportowałem moduł materiałów. Z ciekawości przestałem używać modułu współdzielonego i zamiast tego zaimportowałem tylko poszczególne komponenty materiałowe, których każdy moduł funkcji potrzebował. To nieco zmniejszyło mój pakiet, prawie 200 KB. Zakładałem, że proces optymalizacji kompilacji poprawnie upuści każdy komponent nieużywany przez moje moduły, ale wydaje się, że tak nie jest ...
// 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]
};
}
}
Wygląda na to, że ten wątek mówi, że wydano przełomową zmianę:
Aktualizacja : może potwierdzić, to był problem. Po obniżamy
@angular/[email protected]...
do@angular/[email protected]
moglibyśmy rozwiązać ten tymczasowo. Chyba musimy zaktualizować projekt, aby uzyskać długoterminowe rozwiązanie.źródło
ng update @angular/material
migrację i zaktualizuj wszystkie importowane pliki :)Można to rozwiązać, pisząc pełną ścieżkę, na przykład jeśli chcesz dołączyć
MatDialogModule
następujące:Przed @ kątowe / materiał 9.xx
Zgodnie z @ kątowe / materiał 9.xx
źródło
Komponentów nie można dalej importować (z Angular 9) poprzez katalog ogólny
powinieneś dodać określoną ścieżkę komponentu jak
import {} from '@angular/material/input';
źródło
źródło
A także
ng update @angular/material
zaktualizuje kod i naprawi wszystkie importowaneźródło
Zaakceptowana odpowiedź jest poprawna, ale nie działała w pełni dla mnie. Musiałem usunąć plik package.lock, ponownie uruchomić „npm install”, a następnie zamknąć i ponownie otworzyć moje studio wizualne. Mam nadzieję, że to komuś pomoże
źródło
Po prostu zaktualizuj @ kątowy / materiał z 7 do 9 ,
Poczekaj i zobacz, jak Angular sam dokonuje migracji,
Mam nadzieję, że to komuś pomoże :)
źródło
Czy
npm i -g @angular/material --save
rozwiązać problemźródło