@ angular / liệu / index.d.ts 'không phải là một mô-đun

Với Angular 8, trong khi xây dựng ứng dụng, chúng tôi gặp phải lỗi sau:

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.

Sau khi nâng cấp lên Angular 9 (phát hành ngày hôm nay), tôi cũng gặp phải vấn đề này và thấy rằng họ đã thực hiện thay đổi đột phá được đề cập trong câu trả lời . Tôi không thể tìm thấy lý do tại sao họ thực hiện thay đổi này.

Tôi có tệp tin.module.ts mà tôi nhập / xuất tất cả các thành phần vật liệu (không hiệu quả nhất, nhưng hữu ích để phát triển nhanh). Tôi đã duyệt và cập nhật tất cả các bản nhập của tôi vào các thư mục vật liệu riêng lẻ, mặc dù một thùng index.ts có thể tốt hơn. Một lần nữa, không chắc tại sao họ lại thực hiện thay đổi này, nhưng tôi đoán nó có liên quan đến hiệu quả rung chuyển của cây.

Bao gồm tài liệu của tôi.module.ts bên dưới trong trường hợp nó giúp được bất kỳ ai, nó lấy cảm hứng từ các mô-đun vật liệu khác mà tôi đã tìm thấy:

LƯU Ý : Như các bài đăng trên blog khác đã đề cập và từ kinh nghiệm cá nhân của tôi, hãy cẩn thận khi sử dụng mô-đun được chia sẻ như bên dưới. Tôi có 5 ~ mô-đun tính năng khác nhau (tải chậm) trong ứng dụng của mình mà tôi đã nhập mô-đun vật liệu của mình vào. Vì tò mò, tôi đã ngừng sử dụng mô-đun chia sẻ và thay vào đó chỉ nhập các thành phần vật liệu riêng lẻ mà mỗi mô-đun tính năng cần thiết. Điều này làm giảm kích thước bó của tôi khá nhiều, giảm gần 200kb. Tôi đã giả định rằng quy trình tối ưu hóa bản dựng sẽ loại bỏ đúng bất kỳ thành phần nào không được sử dụng bởi các mô-đun của tôi, nhưng dường như nó không phải là trường hợp ...

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

Có vẻ như chủ đề này nói rằng một sự thay đổi đột phá đã được ban hành:

Các thành phần không còn có thể được nhập thông qua "@ angular / liệu". Sử dụng các điểm nhập cảnh thứ cấp riêng lẻ, chẳng hạn như nút @ góc / vật liệu /.

Cập nhật : có thể xác nhận, đây là vấn đề. Sau khi hạ cấp @angular/material@9.0...để @angular/material@7.3.2chúng tôi có thể giải quyết điều này tạm thời. Đoán chúng tôi cần cập nhật dự án cho một giải pháp lâu dài.

Điều này có thể được giải quyết bằng cách viết đường dẫn đầy đủ, ví dụ nếu bạn muốn bao gồm MatDialogModuletheo:

Trước @ góc / vật liệu 9.xx

import { MatDialogModule } from "@angular/material";
//leading to error mentioned

Theo @ góc / vật liệu 9.xx

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

Tham chiếu thay đổi bản ghi thay đổi chính thức: https://github.com/angular/components/blob/master/CHANGELOG.md#m vật-9

Các thành phần không thể được thêm (Từ Angular 9) được nhập qua thư mục chung

bạn nên thêm một đường dẫn thành phần được chỉ định như

import {} from '@angular/material'; 

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

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';

Và cũng ng update @angular/materialsẽ cập nhật mã của bạn và sửa tất cả nhập khẩu

Câu trả lời được chấp nhận là đúng, nhưng nó không hoàn toàn phù hợp với tôi. Tôi đã phải xóa tệp pack.lock, chạy lại "npm install", sau đó đóng và mở lại studio hình ảnh của tôi. Hy vọng điều này sẽ giúp ai đó

Chỉ cần cập nhật @ angular / liệu từ 7 đến 9 ,

npm gỡ cài đặt @ angular / liệu - lưu

npm cài đặt @ angular / liệu @ ^ 7.1.0 - lưu

ng cập nhật @ góc / vật liệu

Chỉ cần chờ đợi và xem Angular thực hiện Di chuyển một mình,

Hy vọng nó sẽ giúp được ai đó :)

Làm npm i -g @angular/material --saveđể giải quyết vấn đề