Блог

Главная - Вопросы по программированию - Интеграция пользовательского интерфейса Material в Angular 11

Интеграция пользовательского интерфейса Material в Angular 11

#angular #angular-material #integration

#angular #angular-материал #интеграция

Вопрос:

Некоторое время назад я работал с Angular 8 и Material UI (до выпуска 10 или 11), где у меня был файл, который импортировал все компоненты Material UI, однако, когда я попытался сделать то же самое в Angular 11, я получаю ошибки. Если я импортирую по отдельности, он компилируется, но если я импортирую как файл (который импортирует все компоненты), я получаю сообщение об ошибке, как показано ниже —

 Error: ./src/app/material.module.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: D:Angular appformsrcappmaterial.module.ts is missing from the TypeScript compilation. 
Please make sure it is 
in your tsconfig via the 'files' or 'include' property.
at AngularCompilerPlugin.getCompiledFile (D:Angular 
appformnode_modules@ngtoolswebpacksrcangular_compiler_plugin.js:951:23)
at D:Angular appformnode_modules@ngtoolswebpacksrcloader.js:43:31
at processTicksAndRejections (internal/process/task_queues.js:89:5)

                               ~~~~~~~~~~~~~~~~~~~

Включено как импорт {MaterialModule} из ‘./material.module’ в app.module.ts .

Комментарии:

1. Итак … импортируйте их по отдельности, как и следовало бы. Импортируйте только то, что вам нужно.

2. Я сделал, и это работает, но просто для чистоты я хотел импортировать в виде файла.

3. Я думаю, что проблема может заключаться в том, import { MatIconModule} from "@angular/material" что ее следует изменить import { MatIconModule} from "@angular/material/icon" и следовать аналогичному пути для всех других модулей

Ответ №1:

Мне удалось это исправить, компоненты необходимо вызывать по отдельности в файле material.module.ts, в отличие от предыдущих версий.

Метки: