@ angular / material / index.d.ts 'はモジュールではありません

40

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 
— ForestG
ソース

回答:

87

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

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

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

注：他のブログ投稿でも触れましたが、私の個人的な経験から、以下のような共有モジュールを使用するときは注意してください。マテリアルモジュールをインポートしたアプリに5〜種類の機能モジュール（遅延読み込み）があります。好奇心から、共有モジュールの使用をやめ、代わりに各機能モジュールに必要な個々のマテリアルコンポーネントのみをインポートしました。これにより、バンドルサイズがかなり小さくなり、ほぼ200 kb削減されました。ビルド最適化プロセスでは、モジュールで使用されていないコンポーネントは適切に削除されると思いましたが、そうではありません...

// 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]
        };
    }
}
— ジェフ・ギリランド
ソース
1
同じようにここで更新をありがとう
— ジミー・ケイン
2
Angular 8から9にアップグレードした後も同じ問題が発生しました。これは実際にはアップグレードされたバージョンのソリューションを提供するため、私の意見ではこれは受け入れられるべき回答です。これらのエラーのためにバージョン9を8にダウングレードすることは、問題の受け入れられた解決策と見なされるべきではありません。共有してくれてありがとう！
— オモスタン
1
次のすべては、angular / coreではなく、material / coreから取得されます（私は推測します）。
— SwissCoder
1
良いキャッチ、私の急いで、私はMatNativeDateModuleを間違ったインポートに入れました:)、それを答えで修正しました
— Jeff Gilliland
1
@MikeGledhillは開発中の多くのものと同じように、多くのものは難解です。彼らは、非推奨の警告またはより具体的なエラーメッセージを提供するソリューションを実装して、修正方法を知る必要があります。TypescriptとAngularを使用した経験があり、「。d.ts」ファイルタイプのエラーが表示された場合に発生する可能性のある問題がわかっている場合は、これを修正する唯一の方法です。その知識は通常、何時間もの欲求不満から生じます...この「ドメインの知識」を他の人と共有するより良い方法が必要です！
— ジェフギリランド
37

このスレッドは重大な変更が行われたと言っているようです：

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

更新：確認できました。これが問題でした。にダウングレード@angular/material@9.0...した 後、@angular/material@7.3.2これを一時的に解決できます。長期的な解決策のためにプロジェクトを更新する必要があると思います。

— ForestG
ソース
1
ダウングレードを実行した後、を実行ng update @angular/materialします。すべてのインポートが移行および更新されます:)
— ニコラス
24

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

@ 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

— クシラヴァル
ソース
これは私のために働いた。
— Shinoy Shaji
私のためにも働いた。ありがとう。
— Sidhartha Shankar
8

コンポーネントをさらに（Angular 9から）一般ディレクトリからインポートすることはできません

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

import {} from '@angular/material';

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

— アリ・アシュラフ
ソース
5 
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';
— Владимир
ソース
StackOverflowの@Владимирを歓迎します。` ``（スペースなしで `` `javascript）を使用して言語コードを追加し、それを閉じると、読むのに非常に役立ちます。さらにヘルプが必要な場合は、stackoverflow.com / help / how-to-answerにアクセスしてください。ありがとうございます。貢献し続ける
— Rajan
こんにちは！このコードは問題を解決する可能性がありますが、これが問題を解決する方法と理由の説明を含めると、投稿の品質が向上し、おそらく投票数が増えることになります。あなたが今尋ねている人だけでなく、あなたが将来の読者のための質問に答えていることを忘れないでください。回答を編集して説明を追加し、適用される制限と前提を示してください。
— ブライアン
このコードはとてもいいですが、説明すればもっといいでしょう。Otdelna、Ya ne smog paniat。
— MAF博士
2

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

— Sivuyile TG Magutywa
ソース
これにより、package.jsonとpackage-lock.jsonのみが更新されます。コードには何も変更されません
— Joel K Thomas
1
7から9にアップグレードしただけで、実際にインポートが修正されました。
— Tobias Stangl
あなたは私の日を救った、ありがとう!!!
— ニコラ
0

受け入れられた答えは正しいですが、それは私にとって完全に機能しませんでした。package.lockファイルを削除し、「npm install」を再実行してから、ビジュアルスタジオを閉じて再度開く必要がありました。これが誰かを助けることを願っています

— フィアガル・カヴァナ
ソース
0

@ angular / materialを7から9に更新するだけです。

npm uninstall @ angular / material --save

npm install @ angular / material @ ^ 7.1.0 --save

ng update @ angular / material

Angularが単独で移行を実行するのを待って、

それが誰かを助けることを願っています:)

— ニコラ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.