@ angular / material / index.d.ts 'nie jest modułem

39

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.
ForestG
źródło

Odpowiedzi:

87

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]
        };
    }
}

Jeff Gilliland
źródło
1
To samo dziękuję za aktualizację
Jimmy Kane
2
Miałem ten sam problem po aktualizacji kątownika 8 do 9. Twoje rozwiązanie zadziałało dla mnie. Moim zdaniem należy zaakceptować odpowiedź, ponieważ faktycznie stanowi rozwiązanie dla zaktualizowanej wersji. Obniżenie wersji 9 z powrotem do 8 z powodu tych błędów nie powinno być postrzegane jako przyjęte rozwiązanie problemu. Dzięki za udostępnienie!
omostan
1
wszystkie następujące pochodzą z materiału / rdzenia nie kątowego / rdzenia (tak sądzę): import {MAT_LABEL_GLOBAL_OPTIONS, MatNativeDateModule, MAT_DATE_LOCALE} z '@ angular / material / core';
SwissCoder
1
Dobry haczyk, w pośpiechu wstawiłem MatNativeDateModule w niewłaściwy import :), naprawiłem to w odpowiedzi
Jeff Gilliland
1
@MikeGledhill jak wiele rzeczy w fazie rozwoju, wiele rzeczy jest ezoterycznych. Powinni wdrożyć rozwiązanie, które wyświetla ostrzeżenie o wycofaniu lub bardziej szczegółowy komunikat o błędzie, abyś wiedział, jak to naprawić. Jedynym innym sposobem, w jaki możesz to naprawić, jest posiadanie doświadczenia w pracy z Typescript & Angular i wiesz, jaki jest prawdopodobny problem, gdy zobaczysz błąd z typem pliku „.d.ts”. Ta wiedza zwykle pochodzi z godzin frustracji ... musi istnieć lepszy sposób dzielenia się tą „wiedzą domenową” z innymi!
Jeff Gilliland
37

Wygląda na to, że ten wątek mówi, że wydano przełomową zmianę:

Komponentów nie można już importować przez „@ kątowy / materiał”. Użyj poszczególnych pomocniczych punktów wejścia, takich jak @ kątowy / materiał / przycisk.

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.

ForestG
źródło
1
po wykonaniu obniżenia wersji wykonaj ng update @angular/materialmigrację i zaktualizuj wszystkie importowane pliki :)
Nicolas
23

Można to rozwiązać, pisząc pełną ścieżkę, na przykład jeśli chcesz dołączyć MatDialogModulenastępujące:

Przed @ kątowe / materiał 9.xx

import { MatDialogModule } from "@angular/material";
//leading to error mentioned

Zgodnie z @ kątowe / materiał 9.xx

import { MatDialogModule } from "@angular/material/dialog";
//works fine 

Oficjalny dziennik zmian w podziale zmian: https://github.com/angular/components/blob/master/CHANGELOG.md#material-9

Khushi Raval
źródło
Ten działał dla mnie.
Shinoy Shaji
Pracowałem również dla mnie .. Dzięki.
Sidhartha Shankar
8

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'; 

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

Ali Ashraf
źródło
5
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';
Владимир
źródło
Witamy @ Владимир na StackOverflow, byłoby bardzo pomocne w czytaniu, jeśli dodasz kod języka za pomocą `` (Bez spacji, tj. `` Javascript) i go zamkniesz. Aby uzyskać więcej pomocy, odwiedź stronę stackoverflow.com/help/how-to-answer Dziękujemy. Zachować przyczyniając
Rajan
Dzień dobry! Chociaż ten kod może rozwiązać pytanie, w tym wyjaśnienie, w jaki sposób i dlaczego to rozwiązuje problem, naprawdę pomógłby poprawić jakość twojego postu i prawdopodobnie doprowadziłby do większej liczby głosów. Pamiętaj, że odpowiadasz na pytanie dla czytelników w przyszłości, nie tylko dla osoby zadającej teraz pytanie. Proszę edytować swoje odpowiedzi, aby dodać wyjaśnień i dać wskazówkę co zastosować ograniczenia i założenia.
Brian
Ten kod jest bardzo ładny, ale byłoby miło, gdybyś go wyjaśnił. Otdelna, Ya ne smog paniat.
Dr MAF
2

A także ng update @angular/materialzaktualizuje kod i naprawi wszystkie importowane

Sivuyile TG Magutywa
źródło
Spowoduje to jedynie aktualizację package.json i package-lock.json. Nic nie zmieni w naszym kodzie
Joel K Thomas
1
Właśnie zaktualizowałem z 7 do 9, w rzeczywistości naprawiłem mój import.
Tobias Stangl
Uratowałeś mi dzień, dzięki !!!
Nicolas
0

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

Feargal Kavanagh
źródło
0

Po prostu zaktualizuj @ kątowy / materiał z 7 do 9 ,

npm uninstall @ angular / material --save

npm install @ angular / material @ ^ 7.1.0 --save

aktualizacja @ kątowa / materiał

Poczekaj i zobacz, jak Angular sam dokonuje migracji,

Mam nadzieję, że to komuś pomoże :)

Nicolas
źródło
-5

Czy npm i -g @angular/material --saverozwiązać problem

Narendra Sagadevan
źródło
Zastanów się nad dodaniem dodatkowych szczegółów i wykorzystaniem sformatowanych kodów
MehrdadEP