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

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.

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

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/material@9.0...para @angular/material@7.3.2que pudéssemos resolver este temporariamente. Acho que precisamos atualizar o projeto para uma solução de longo prazo.

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

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

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

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

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

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 :)

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