@angular/material/index.d.ts‘不是模块
@angular/material/index.d.ts‘不是模块
提问于 2019-10-29 00:01:39
使用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.回答 14
Stack Overflow用户
回答已采纳
发布于 2019-10-29 00:02:19
更新:请检查下面Jeff Gilliland的答案以获得更新的解决方案
看起来像是
这个帖子说
发布了一个突破性的更改：
不能再通过"@angular/material“导入组件。使用单独的辅助入口点，例如@angular/material/button。
更新
：可以确认，这就是问题所在。降级后
至
我们可以暂时解决这个问题。我想我们需要更新项目的长期解决方案。
Stack Overflow用户
发布于 2020-02-07 17:58:26
在升级到Angular 9(今天发布)后，我也遇到了这个问题，并发现他们做出了上面提到的破坏性更改
在答案中
..。我找不到他们为什么要做这个改变的原因。
我有一个导入/导出所有材料组件的material.module.ts文件(效率不是最高的，但对于快速开发很有用)。我检查并更新了所有导入到各个material文件夹中的内容，不过index.ts barrel可能更好。再说一次，我不确定他们为什么要做出这样的改变，但我猜这与摇动树木的效率有关。
下面包括我的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 {
return {
ngModule: MaterialModule,
providers: [MatIconRegistry]
};
}
}Stack Overflow用户
发布于 2020-03-05 14:43:03
这可以通过写入完整路径来解决，例如，如果您想要包含
如下所示：
在@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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58594311
复制相关文章
相似问题
腾讯云开发者
