@ angle/Materials/index.d.ts’不是一个模块

使用 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.
154265 次浏览
小开
最佳答案

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

作为 这个帖子说似乎发布了一个突破性的改变:

不能再通过“@棱角/材料”导入组件。使用 个别辅助入口点，例如 @ 棱角/材质/按钮。

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

小开

在升级到 Angular 9(今天发布)之后，我也遇到了这个问题，发现他们做了一个突破性的改变，提到了 在答案里。我找不到他们为什么做这个改变的原因。

我有一个 ateral.module.ts 文件，可以导入/导出所有的材料组件(不是最有效的，但对快速开发很有用)。我检查并更新了所有导入到各个材料文件夹中的内容，尽管 index.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]
};
}
}
小开

做 npm i -g @angular/material --save来解决这个问题

小开

这可以通过编写完整路径来解决，例如，如果你想包含 MatDialogModule，请按下面的步骤:

在@顺角/材质9.x. x 之前

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

按照@角/材料9.x. x

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

正式变更日志破坏变更参考: https://github.com/angular/components/blob/master/CHANGELOG.md#material-9

小开

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

小开

组件不能通过一般目录进一步导入(从角9导入)

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

import {} from '@angular/material';

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

小开

接受的答案是正确的，但它不完全为我工作。我必须删除 package.lock 文件，重新运行“ npm install”，然后关闭并重新打开我的 Visual Studio。希望这对谁有帮助

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

从 7到 9,

Npm 卸载@angle/Materials ——保存

Npm install@顺角/材料@^ 7.1.0——保存

更新@棱角/材料

等着看安格拉独自完成迁移吧,

希望对某人有所帮助:)

小开

我也面临着同样的问题与最新版本的@棱角/材料，即“ ^ 9.2.3” 所以我找到了解决办法。如果您进入 node _ module 中的@angle/Materials 文件夹，您可以找到一个名为 index.d.ts 的文件，在该文件中粘贴下面的代码。通过索引文件中的这个更改，您将能够使用 import 语句直接从@angle/Materials 导入模块。附言。如果您在以下任何一个陈述中遇到错误，请评论。)

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

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

例如:

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

现在变成了

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

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

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

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

小开

首先尝试降低你的角度版本 使用“ ng add@顺角/材质7.3. . 0” 检查错误是否消失之后 对我来说，它不见了 之后用这个 更新@棱角/材料 以防你使用角9或10 你必须编写这样的代码 从“角度/材料/输入”导入{ MatInputModule } 希望对你有用

小开

Something 不要:

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

Something 应该做的:

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

因为:

元件不能再通过“@棱角/材料”进口。使用单独的辅助入口点，例如@棱角/材料/按钮。

小开

这个问题仍然存在的角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 加@角度材料的快捷方式

小开

我遇到了同样的问题，角版本11。降级角/材料版本的工作


提交答案