web-dev-qa-db-ja.com

@ angular / material / 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.
angularangular-material
29
ForestG

このスレッドは言う のように見える重大な変更が発行されました：

コンポーネントは「@ angular/material」を通じてインポートできなくなりました。 @ angular/material/buttonなど、個々のセカンダリエントリポイントを使用します。

更新：確認できます。これが問題でした。ダウングレード後@angular/[email protected]...から@angular/[email protected]これを一時的に解決できます。長期的なソリューションのためにプロジェクトを更新する必要があると思います。

27
ForestG

Angular 9（本日リリース））にアップグレードした後、私もこの問題に遭遇し、言及された重大な変更を行ったことがわかりました 回答で 。私はできません彼らがこの変更を加えた理由を見つけてください。

すべてのマテリアルコンポーネントをインポート/エクスポートするmaterial.module.tsファイルがあります（最も効率的ではありませんが、迅速な開発に役立ちます）。 index.tsバレルの方が良いかもしれませんが、すべてのインポートを個別のマテリアルフォルダーに更新しました。繰り返しになりますが、なぜ彼らがこの変更を加えたのかはわかりませんが、ツリーを揺さぶる効率と関係があると思います。

誰かに役立つ場合に備えて、以下の私のmaterial.module.tsを含めます。これは、私が見つけた他のマテリアルモジュールから発想を得たものです。

// 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]
        };
    }
}
49
Jeff Gilliland

これは、フルパスを記述することで解決できます。たとえば、MatDialogModuleを含める場合は、次のようにします。

変更前：import { MatDialogModule } from "@angular/material"; //leading to error mentioned

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

10
Khushi Raval

これ以上コンポーネントを追加することはできません（Angular 9から））。一般ディレクトリからインポート

あなたはのような指定されたコンポーネントパスを追加する必要があります

import {} from '@angular/material';

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

1
Ali Ashraf

そしてng update @angular/materialコードを更新し、すべてのインポートを修正します

0
Sivuyile TG Magutywa