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

【问题标题】：@angular/material/index.d.ts' is not a module@angular/material/index.d.ts' 不是模块
【发布时间】：2020-02-23 22:03:14
【问题描述】：

使用 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.

【问题讨论】：

标签： angular angular-material

【解决方案1】：

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

我有一个 material.module.ts 文件，用于导入/导出所有材质组件（不是最有效的，但对快速开发很有用）。尽管 index.ts 桶可能会更好，但我浏览并更新了所有导入到各个材质文件夹的内容。同样，不确定他们为什么要进行此更改，但我猜这与 tree-shaking 效率有关。

包括下面我的 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]
        };
    }
}

【讨论】：

我在将 Angular 8 升级到 9 后遇到了同样的问题。您的解决方案对我有用。我认为这应该被接受，因为它实际上为升级版本提供了解决方案。由于这些错误而将版本 9 降级回 8 不应被视为该问题的公认解决方案。感谢分享！
以下全部来自材料/核心而不是角度/核心（我猜）： import { MAT_LABEL_GLOBAL_OPTIONS, MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
很好，我匆忙中将 MatNativeDateModule 放入了错误的导入中:)，在答案中修复了它
@MikeGledhill 喜欢开发中的很多东西，很多东西都是深奥的。他们应该实施一个解决方案，给出弃用警告或更具体的错误消息，以便您知道如何修复它。您知道如何解决此问题的唯一另一种方法是，如果您有使用 Typescript 和 Angular 的经验，并且您知道当您看到“.d.ts”文件类型的错误时可能出现的问题是什么。这种知识通常来自于数小时的挫折……需要有更好的方式与他人分享这种“领域知识”！
注意 Angular 10 您需要将 forRoot 行更改为 static forRoot(): ModuleWithProviders<MaterialModule> {

【解决方案2】：

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

好像this thread says 发布了一个重大更改：

无法再通过“@angular/material”导入组件。采用各个次要入口点，例如 @角/材质/按钮。

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

【讨论】：

降级后，执行ng update @angular/material，它将为您迁移和更新所有导入:)

【解决方案3】：

这可以通过写完整路径来解决，例如如果你想包含MatDialogModulefollow:

@angular/material 9.x.x 之前

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

根据@angular/material 9.x.x

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

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

【讨论】：

也为我工作。谢谢。

【解决方案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';

【讨论】：

欢迎 @Владимир 在 StackOverflow 上，如果您添加带有 ` ` 的语言代码（没有空格，即 ` ` ` javascript）并关闭它，这对阅读非常有帮助。如需更多帮助，请访问stackoverflow.com/help/how-to-answer 谢谢。继续贡献
您好！虽然这段代码可以解决问题，including an explanation 解决问题的方式和原因确实有助于提高帖子的质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的答案添加解释并说明适用的限制和假设。
这段代码很不错，但如果你解释一下就更好了。 Otdelna, Ya ne smog paniat。
谢谢。对我来说效果很好！
来自other answer：“无法再通过“@angular/material”导入组件。请使用单独的辅助入口点，例如@angular/material/button。”

【解决方案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。

【讨论】：

这对我有用。我有 Angular 11.0.2 和 Material 11.0.1 谢谢！

【解决方案6】：

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

例如：

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

现在改为

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

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

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

只需导航到所需模块的 API 选项卡并找到正确的路径，如下所示

【讨论】：

为我工作:)
太棒了！从“@angular/material/toolbar”导入 { MatToolbarModule }；从“@angular/material/icon”导入 { MatIconModule }；从“@angular/material/card”导入 { MatCardModule }；从“@angular/material/button”导入 { MatButtonModule }；从 '@angular/material/progress-spinner' 导入 { MatProgressSpinnerModule };

【解决方案7】：

组件不能进一步（从 Angular 9）通过通用目录导入

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

import {} from '@angular/material';

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

【讨论】：

【解决方案8】：

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

npm 卸载 @angular/material --save

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

ng 更新@angular/material

等着看 Angular 独自完成迁移吧，

希望它可以帮助某人:)

【讨论】：

【解决方案9】：

ng update @angular/material 也会更新您的代码并修复所有导入

【讨论】：

这只会更新 package.json 和 package-lock.json。不会改变我们代码中的任何内容
刚刚从 7 升级到 9，它确实修复了我的导入问题。

【解决方案10】：

首先尝试降级您的角度版本使用“ng 添加@angular/material7.3..0” 之后检查错误是否消失就我而言，它已经消失了之后使用这个 ng更新@角/材料如果您使用角度 9 或 10 你必须写这样的代码从“角度/材料/输入”导入 {MatInputModule} 希望对你有用

【讨论】：

【解决方案11】：

接受的答案是正确的，但对我来说并不完全有效。我不得不删除 package.lock 文件，重新运行“npm install”，然后关闭并重新打开我的 Visual Studio。希望这可以帮助某人

【讨论】：

【解决方案12】：

Angular 11 仍然存在此问题添加命令

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatCardModule } from '@angular/material/card';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatButtonModule } from '@angular/material/button';

暂时解决了。但是 ng add @angular material 的快捷方式应该可以通过 Angular CLI 获得

【讨论】：

【解决方案13】：

我在 Angular 版本 11 中遇到了同样的问题。降级 Angular/Material 版本有效

【讨论】：

【解决方案14】：

最新版本的@angular/material 也遇到了同样的问题，即“^9.2.3” 所以我找到了一个解决方案。如果你去node_modules里面的@angular/material文件夹，你可以找到一个名为index.d.ts的文件，在那个文件中粘贴下面的代码。通过索引文件中的此更改，您将能够直接使用来自 @angular/material 的导入语句导入模块。（P.S. 如果您在以下任何陈述中遇到错误，请发表评论。）

export * from '@angular/material/core';
export * from '@angular/material/icon';
export * from '@angular/material/autocomplete';
export * from '@angular/material/badge';
export * from '@angular/material/bottom-sheet';
export * from '@angular/material/button';
export * from '@angular/material/button-toggle';
export * from '@angular/material/card';
export * from '@angular/material/checkbox';
export * from '@angular/material/chips';
export * from '@angular/material/stepper';
export * from '@angular/material/datepicker'
export * from '@angular/material/dialog';
export * from '@angular/material/divider';
export * from '@angular/material/esm2015';
export * from '@angular/material/form-field';
export * from '@angular/material/esm5';
export * from '@angular/material/expansion';
export * from '@angular/material/grid-list';
export * from '@angular/material/icon';
export * from '@angular/material/input';
export * from '@angular/material/list';
export * from '@angular/material/menu';
export * from '@angular/material/paginator';
export * from '@angular/material/progress-bar';
export * from '@angular/material/progress-spinner';
export * from '@angular/material/radio';
export * from '@angular/material/stepper';
export * from '@angular/material/select';
export * from '@angular/material/sidenav';
export * from '@angular/material/slider';
export * from '@angular/material/slide-toggle';
export * from '@angular/material/snack-bar';
export * from '@angular/material/sort';
export * from '@angular/material/table';
export * from '@angular/material/tabs';
export * from '@angular/material/toolbar';
export * from '@angular/material/tooltip';
export * from '@angular/material/tree';

【讨论】：

您永远不必修改 node_modules 中的任何内容。
如果您不想这样做，那么您将不得不特别提及您要导入的模块的完整路径，并且在不久的将来，如果我们得到更新，我们可以直接访问该模块然后在您提到过的地方更改导入语句将是一项乏味的任务。此外，如果您使用完整路径导入模块，您将拥有很长的代码，但如果您更改索引文件，您可以在单个语句中导入所有内容。替代选项是：- 您可以在 node_modules 文件夹之外的某个位置创建一个 .ts 文件并将此代码粘贴到那里并导入该文件。

【解决方案15】：

npm i -g @angular/material --save解决问题

【讨论】：

考虑添加更多细节和格式化代码的使用