@ angular / material / index.d.ts 'não é um módulo

40

Com o Angular 8, ao criar o aplicativo, encontramos o seguinte erro:

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
fonte

Respostas:

87

Depois de atualizar para o Angular 9 (lançado hoje), também deparei-me com esse problema e descobri que eles fizeram a alteração mencionada na resposta . Não consigo encontrar uma razão pela qual eles fizeram essa alteração.

Eu tenho um arquivo material.module.ts que importo / exporto todos os componentes do material (não o mais eficiente, mas útil para o desenvolvimento rápido). Examinei e atualizei todas as minhas importações para as pastas de materiais individuais, embora um barril de index.ts possa ser melhor. Novamente, não sei por que eles fizeram essa alteração, mas acho que isso tem a ver com a eficiência de abalar árvores.

Incluindo meu material.module.ts abaixo, caso ajude alguém, é inspirado em outros módulos de materiais que encontrei:

NOTA : Como outras postagens do blog mencionaram e de minha experiência pessoal, tenha cuidado ao usar um módulo compartilhado como abaixo. Eu tenho 5 ~ módulos de recursos diferentes (preguiçosos carregados) no meu aplicativo para os quais importei meu módulo de material. Por curiosidade, parei de usar o módulo compartilhado e, em vez disso, apenas importei os componentes individuais do material que cada módulo de recurso precisava. Isso reduziu bastante o tamanho do meu pacote, quase uma redução de 200kb. Eu assumi que o processo de otimização da compilação eliminaria adequadamente qualquer componente não usado pelos meus módulos, mas não parece ser o caso ...

// 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
fonte
11
Mesmo aqui, obrigado pela atualização
Jimmy Kane
2
Eu tive o mesmo problema depois de atualizar o angular 8 para o 9. Sua solução funcionou para mim. Esta resposta deve ser aceita na minha opinião, porque na verdade fornece uma solução para a versão atualizada. Fazer o downgrade da versão 9 para 8 devido a esses erros não deve ser visto como a solução aceita para o problema. Obrigado por compartilhar!
omostan 11/02
11
todos os seguintes são provenientes de material / núcleo não angular / núcleo (eu acho): import {MAT_LABEL_GLOBAL_OPTIONS, MatNativeDateModule, MAT_DATE_LOCALE} de '@ angular / material / core';
SwissCoder
11
Boa captura, na minha pressa, coloquei o MatNativeDateModule na importação errada :), corrigi-o na resposta
Jeff Gilliland
11
@ MikeGledhill, como muitas coisas em desenvolvimento, muitas coisas são esotéricas. Eles devem implementar uma solução que dê um aviso de descontinuação ou uma mensagem de erro mais específica para que você saiba como corrigi-lo. A única outra maneira de saber como corrigir isso é se você tiver experiência em trabalhar com Typescript e Angular e souber qual é o problema provável ao ver um erro no tipo de arquivo ".d.ts". Esse conhecimento geralmente vem de horas de frustração ... é preciso haver uma maneira melhor de compartilhar esse "conhecimento de domínio" com outras pessoas!
Jeff Gilliland 23/03
37

Parece que, como esta thread diz, foi emitida uma alteração de quebra:

Os componentes não podem mais ser importados através de "@ angular / material". Use os pontos de entrada secundários individuais, como @ angular / material / botão.

Atualização : pode confirmar, esse foi o problema. Depois de fazer o downgrade @angular/[email protected]...para @angular/[email protected]que pudéssemos resolver este temporariamente. Acho que precisamos atualizar o projeto para uma solução de longo prazo.

ForestG
fonte
11
depois de fazer o downgrade, faça o ng update @angular/material, ele migrará e atualizará todas as importações para você :)
Nicolas
24

Isso pode ser resolvido escrevendo o caminho completo, por exemplo, se você deseja incluir o MatDialogModuleseguinte:

Antes de @ angular / material 9.xx

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

Conforme @ angular / material 9.xx

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

Referência oficial de alteração de quebra de log de alterações: https://github.com/angular/components/blob/master/CHANGELOG.md#material-9

Khushi Raval
fonte
Este funcionou para mim.
Shinoy Shaji
Trabalhou para mim também .. Obrigado.
Sidhartha Shankar 31/03
8

Os componentes não podem mais ser importados (do Angular 9) através do diretório geral

você deve adicionar um caminho de componente especificado como

import {} from '@angular/material'; 

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

Ali Ashraf
fonte
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';
Владимир
fonte
Bem-vindo @ Владимир no StackOverflow, Seria realmente útil para ler se você adicionar código de idioma com `` `(Sem espaço, por exemplo,` `` javascript) e fechá-lo. para obter mais ajuda, visite stackoverflow.com/help/how-to-answer Obrigado. Continue contribuindo
Rajan
Olá! Embora esse código possa resolver a questão, incluir uma explicação de como e por que isso resolve o problema realmente ajudaria a melhorar a qualidade da sua postagem e provavelmente resultaria em mais votos positivos. Lembre-se de que você está respondendo à pergunta dos leitores no futuro, não apenas à pessoa que está perguntando agora. Por favor edite sua resposta para adicionar explicações e dar uma indicação do que limitações e premissas se aplicam.
Brian
Este código é muito bom, mas seria melhor se você o explicasse. Otdelna, Ya ne smog paniat.
Dr. MAF
2

E também ng update @angular/materialatualizará seu código e corrigirá todas as importações

Sivuyile TG Magutywa
fonte
Isso atualizará apenas o package.json e o package-lock.json. Não vai mudar nada no nosso código
Joel K Thomas
11
Apenas atualizei de 7 para 9, na verdade corrigi minhas importações.
Tobias Stangl
Você salvou meu dia, obrigado !!!
Nicolas
0

A resposta aceita está correta, mas não funcionou totalmente para mim. Eu tive que excluir o arquivo package.lock, executar novamente "npm install" e, em seguida, fechar e reabrir o meu visual studio. Espero que isso ajude alguém

Feargal Kavanagh
fonte
0

Basta atualizar @ angular / material de 7 a 9 ,

npm uninstall @ angular / material --save

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

ng update @ angular / material

Espere e veja Angular fazendo a migração sozinho,

Espero que ajude alguém :)

Nicolas
fonte
-5

Faça npm i -g @angular/material --savepara resolver o problema

Narendra Sagadevan
fonte
Considere adicionar mais detalhes e o uso de códigos formatados
MehrdadEP