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

标签 angular angular-material

使用 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 9(今天发布)后,我也遇到了这个问题,发现他们做了提到的重大更改 in the answer .我找不到他们做出这种改变的原因。
我有一个 material.module.ts 文件,我导入/导出所有 Material 组件(不是最有效的,但对快速开发很有用)。尽管 index.ts 桶可能会更好,但我浏览并更新了所有导入到各个 Material 文件夹的内容。同样,不确定他们为什么要进行此更改,但我猜这与摇树效率有关。
包括我下面的 material.module.ts 以防它对任何人有帮助,它的灵感来自我发现的其他 Material 模块:
注意 :正如其他博客文章所提到的以及根据我的个人经验,使用如下共享模块时要小心。我的应用程序中有 5~ 个不同的功能模块(延迟加载),我将 Material 模块导入其中。出于好奇,我停止使用共享模块,而只导入每个功能模块所需的单个 Material 组件。这大大减少了我的包大小,几乎减少了 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 - @angular/material/index.d.ts' 不是模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58594311/

相关文章:

angular - http.get 似乎没有执行

javascript - Angular 2 : Calling other functions inside call back functions

angular - "dumb"应该是dumb组件?

Angular Material 表自定义过滤器添加和删除多个术语

javascript - Angular 2/4/5/6 - 在其组件类端转换自定义组件的 innerHTML

angular - 删除并再次添加到 dom 后自动对焦不起作用

node.js - Typescript 版本不更新

javascript - 如果过滤器在 Material 表 Angular 中没有结果,如何显示 "no records"

angularjs - 在 AngularJS 中如何为 Angular-Material 中的 md-tabs 启用滑动功能?

css - AngularJS orderBy 搞砸了物化 strip 类