@angular/material/index.d.ts' 不是模块

Question

使用 Angular 8，在构建应用程序时，我们遇到以下错误：

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.

Answer 1

升级到 Angular 9（今天发布）后，我也遇到了这个问题，发现他们做了答案中提到的重大更改。我找不到他们做出此更改的原因。

我有一个material.module.ts 文件，可以导入/导出所有材质组件（不是最有效的，但对于快速开发很有用）。我检查了所有导入并将其更新到各个材质文件夹，尽管 index.ts 桶可能会更好。再次，不确定他们为什么做出这个改变，但我猜这与摇树效率有关。

包括下面我的material.module.ts，以防它对任何人有帮助，它的灵感来自我发现的其他材料模块：

注意：正如其他博客文章所提到的以及根据我的个人经验，在使用如下所示的共享模块时要小心。我的应用程序中有 5 个不同的功能模块（延迟加载），我将材质模块导入其中。出于好奇，我停止使用共享模块，而是仅导入每个功能模块所需的单独材质组件。这大大减少了我的包大小，几乎减少了 200kb。我假设构建优化过程会正确删除我的模块未使用的任何组件，但情况似乎并非如此......

// 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<MaterialModule> {
        return {
            ngModule: MaterialModule,
            providers: [MatIconRegistry]
        };
    }
}

Answer 2

更新：请查看下面 Jeff Gilliland 的答案以获取更新的解决方案

好像这个线程说发布了一个重大更改：

无法再通过“@angular/material”导入组件。使用单独的辅助入口点，例如@angular/material/button。

更新：可以确认，这就是问题所在。降级@angular/material@9.0...后 @angular/material@7.3.2我们可以暂时解决这个问题。猜猜我们需要更新项目以获得长期解决方案。

Answer 3

这可以通过编写完整路径来解决，例如，如果您想包含MatDialogModule以下内容：

在@angular/material 9.xx 之前

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

根据@angular/material 9.xx

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

官方更改日志破坏更改参考：https : //github.com/angular/components/blob/master/CHANGELOG.md#material-9

Answer 4

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

Answer 5

? 不要：

// old code that breaks
import { MatDialogModule,
  MatInputModule,
  MatButtonModule} from '@angular/material';

? 做：

// new code that works
import { MatDialogModule } from '@angular/material/dialog';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';

? 因为：

无法再通过“@angular/material”导入组件。使用单独的辅助入口点，例如@angular/material/button。

Answer 6

@angular/material已更改其文件夹结构。现在您需要使用各自文件夹中的所有模块，而不仅仅是material文件夹

例如：

import { MatDialogModule } from "@angular/material";

现在已更改为

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

您可以检查以下内容以找到模块的正确路径

https://material.angular.io/components/categories

只需导航到所需模块的 API 选项卡并找到这样的正确路径

Answer 7

无法通过通用目录进一步导入组件（来自 Angular 9）

您应该添加一个指定的组件路径，如

import {} from '@angular/material'; 

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

Answer 8

只需将@angular/material 从7更新到9，

npm uninstall @angular/material --save

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

ng更新@angular/material

等着看 Angular 单独做迁移，

希望它可以帮助某人:)