@ 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.
ForestG
источник

Ответы:

87

После обновления до Angular 9 (выпущенного сегодня) я тоже столкнулся с этой проблемой и обнаружил, что они внесли критические изменения, упомянутые в ответе . Я не могу найти причину, почему они сделали это изменение.

У меня есть файл material.module.ts, в который я импортирую / экспортирую все компоненты материала (не самый эффективный, но полезный для быстрой разработки). Я просмотрел и обновил весь свой импорт в отдельные папки материалов, хотя ствол index.ts мог бы быть лучше. Опять же, не уверен, почему они сделали это изменение, но я предполагаю, что это связано с эффективностью потрясающего дерева.

Включая мой материал material.module.ts ниже, на случай, если он кому-нибудь поможет, он вдохновлен другими модулями материалов, которые я нашел:

ПРИМЕЧАНИЕ . Как уже упоминалось в других сообщениях блога, и, исходя из моего личного опыта, будьте осторожны при использовании общего модуля, как показано ниже. В моем приложении 5 ~ различных функциональных модулей (загружены лениво), в которые я импортировал свой модуль материала. Из любопытства я перестал использовать общий модуль и вместо этого импортировал только отдельные компоненты материала, необходимые для каждого функционального модуля. Это немного уменьшило размер моего пакета, почти на 200 КБ. Я предполагал, что процесс оптимизации сборки должным образом отбросит любой компонент, не используемый моими модулями, но это не так ...

// 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
У меня возникла та же проблема после обновления угла 8 до 9. Ваше решение сработало для меня. Это должен быть принят ответ, по моему мнению, потому что это фактически обеспечивает решение для обновленной версии. Понижение версии 9 до 8 из-за этих ошибок не должно рассматриваться как принятое решение проблемы. Спасибо, что поделился!
Омостан
1
Следующее все происходит из материала / ядра, а не из угла / ядра (я думаю): import {MAT_LABEL_GLOBAL_OPTIONS, MatNativeDateModule, MAT_DATE_LOCALE} из '@ angular / material / core';
SwissCoder
1
Хороший улов, в спешке я поместил MatNativeDateModule в неправильный импорт :), исправил это в ответе
Джефф Гиллилэнд
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:

До @ угловой / материал 9.xx

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

Согласно @ angular / материал 9.xx

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

Официальная ссылка на изменение журнала изменений: https://github.com/angular/components/blob/master/CHANGELOG.md#material-9

Хуши Равал
источник
Этот работал для меня.
Шиной Шаджи
У меня тоже сработало .. Спасибо.
Сидхартха Шанкар
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 Спасибо. Продолжайте вносить свой вклад
Раджан
Здравствуйте! Хотя этот код может решить вопрос, в том числе объяснение того, как и почему это решает проблему, действительно поможет улучшить качество вашего сообщения и, вероятно, получит больше голосов "за". Помните, что вы отвечаете на вопрос для читателей в будущем, а не только для того, кто спрашивает сейчас. Пожалуйста, измените свой ответ, чтобы добавить объяснения и указать, какие ограничения и предположения применяются.
Брайан
Этот код очень хорош, но было бы лучше, если бы вы его объяснили. Отделна, Я не смог паниать.
Доктор Маф
2

А также ng update @angular/materialобновит ваш код и исправит весь импорт

Сивуиле Т.Г. Магутыва
источник
Это обновит только package.json и package-lock.json. Ничего не изменится в нашем коде
Joel K Thomas
1
Только что обновленный с 7 до 9, он действительно исправил мой импорт.
Тобиас Штангл
Вы спасли мой день, спасибо !!!
Николас
0

Принятый ответ правильный, но у меня он не сработал. Мне пришлось удалить файл package.lock, повторно запустить «npm install», а затем закрыть и снова открыть мою Visual Studio. Надеюсь, это поможет кому-то

Фиргал Кавана
источник
0

Просто обновите @ angular / материал с 7 до 9 ,

npm uninstall @ angular / material --save

npm install @ angular / material @ ^ 7.1.0 - сохранить

нг обновление @ угловой / материал

Просто подожди и увидишь, что Ангуляр делает Миграцию один,

Надеюсь, это поможет кому-то :)

никола
источник
-5

Сделать, npm i -g @angular/material --saveчтобы решить проблему

Нарендра Сагадеван
источник
Рассмотрите возможность добавления более подробной информации и использования отформатированных кодов
MehrdadEP