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

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.
angular  angular-material 
— 森林G
source

Answers:

87

升级到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 {
        return {
            ngModule: MaterialModule,
            providers: [MatIconRegistry]
        };
    }
}
— 杰夫·吉利兰德
source
1
同样感谢您的更新
— Jimmy Kane
2
将角度8升级到9后，我也遇到了同样的问题。您的解决方案对我有用。我认为这应该被接受，因为它实际上为升级版本提供了解决方案。由于这些错误，将版本9降级为8不应被视为问题的可接受解决方案。感谢分享！
— 波斯
1
以下全部来自材料/核心而不是角度/核心（我想）：从“ @ angular / material / core”导入{MAT_LABEL_GLOBAL_OPTIONS，MatNativeDateModule，MAT_DATE_LOCALE}；
— SwissCoder
1
好抓住，我匆忙将MatNativeDateModule放在错误的导入中：），在答案中修复了它
— Jeff Gilliland
1
@MikeGledhill就像正在开发的许多事物一样，许多事物都是深奥的。他们应该实施给出弃用警告或更具体的错误消息的解决方案，以便您知道如何解决它。您将知道如何解决此问题的唯一其他方法是，如果您有使用Typescript和Angular的经验，并且知道看到“ .d.ts”文件类型的错误时可能出现的问题。该知识通常来自无数小时的挫折……需要一种更好的方式与他人共享此“领域知识”！
— Jeff Gilliland
37

好像该线程说已发出重大更改：

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

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

— 森林G
source
1
降级后，请执行ng update @angular/material，它将为您迁移和更新所有导入：)
— Nicolas
23

这可以通过编写完整路径来解决，例如，如果要包括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

— 库什·拉瓦尔（Khushi Raval）
source
这个为我工作。
— Shinoy Shaji
也为我工作..谢谢。
— Sidhartha Shankar
8

无法通过常规目录进一步导入组件（从Angular 9中导入）

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

import {} from '@angular/material';

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

— 阿里·阿什拉夫（Ali Ashraf）
source
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';
— Владимир
source
欢迎使用StackOverflow上的@Владимир，如果您添加带有``的语言代码（没有空格，即```javascript）并关闭它，这对阅读真的很有帮助。如需更多帮助，请访问stackoverflow.com/help/how-to-answer谢谢。继续贡献
— Rajan
你好！尽管这段代码可以解决问题，但包括解释如何以及为什么解决该问题的说明，确实可以帮助提高您的帖子质量，并可能导致更多的投票。请记住，您将来会为读者回答问题，而不仅仅是现在问的人。请编辑您的答案以添加说明，并指出适用的限制和假设。
— 布赖恩
这段代码非常好，但是如果您对其进行解释，它将更好。奥特纳（Otdelna），雅妮烟雾弥漫。
— MAF博士
2

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

— Sivuyile TG Magutywa
source
这只会更新package.json和package-lock.json。不会更改我们的代码中的任何内容
— Joel K Thomas
1
刚从7升级到9，实际上确实解决了我的导入问题。
— Tobias Stangl
您保存了我的一天，谢谢！！！
— 尼古拉斯
0

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

— 菲加尔·卡瓦纳（Feargal Kavanagh）
source
0

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

npm卸载@ angular / material-保存

npm install @ angular / material @ ^ 7.1.0-保存

ng更新@ angular / material

只是等着看Angular单独进行迁移，

希望它可以帮助某人:)

— 尼古拉斯
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.