после перехода на угловой 12 все компоненты материала являются «неизвестными элементами»

Question

После обновления до Angular 12, хотя у меня есть весь требуемый код в app.module.ts, все теги материалов не распознаются: например, для mat-checkbox у меня есть следующее в app.module.ts

      import { MatCheckboxModule } from '@angular/material/checkbox';

@NgModule({
    imports: [
    BrowserModule,  
    MatCheckboxModule,

и при исполнении:

mat-checkbox - неизвестный элемент:

1. Если mat-checkbox является компонентом Angular, убедитесь, что он является частью этого модуля.
2. Если mat-checkbox является веб-компонентом, добавьте CUSTOM_ELEMENTS_SCHEMA в @NgModule.schemas этого компонента.

И та же проблема для всех тегов материалов (mat-icon, mat-table, mat-label ...).

В предыдущей версии (Angular 9) все было нормально. Спасибо за помощь.

Answer 1

Примечание 1 (фатальная проблема)

Вы используете отложенную загрузку. где-то в вашем проекте у вас есть старый синтаксис ленивой загрузки

      {
  ...
  loadChildren: 'path/to/your.module#YourModule'
}

Замените их все в своем проекте на:

      {
  ...
  loadChildren: () => import('path/to/your.module').then(m => m.YourModule)
}

Даже если вы думаете, что это не связано с вашей текущей функцией. После этого проблема будет решена.

Заметка 2:

Также во время обновления до Angular12, если некоторые пакеты npm сломаны, вы можете использовать

npm i --save package-name --force

чтобы установить его сейчас.

Заметка 3:

Также, если вы видите некоторые ошибки в файлах ts, вы можете подавить (игнорировать) их, используя // @ts-ignore на данный момент поверх строки ошибки.

Примечание 4

Также, если вы видите ошибку типа «Класс использует функции Angular, но не оформлен. Добавьте явный декоратор Angular».

добавлять @Injectable() поверх объявления класса.

Примечание 5

По моему мнению, если вы обновляете старую версию angular до angular 12. Для этого сначала создайте проект с ng new APP_NAME --strict=falseкоторого у вас пока нет строгого режима. Когда все проблемы решены и у вас есть рабочий проект, вы можете создать новый проект со строгим режимом.

:)-|-<

Answer 2

Я предполагаю, что у вас есть ленивые загруженные модули.

Если да,

создать общий модуль,

импорт и экспорт всего модуля материалов в общий модуль,

импортировать общий модуль в корневой (приложение) модуль и функциональные (ленивые) модули.

Если нет, то, полагаю, вы поступили правильно.

Answer 3

Краткий ответ:

удалите каталог и переустановите их, используя, что в любом случае устанавливает ваши пакеты и предотвращает распространение ошибок на другие пакеты, которые на самом деле не имеют проблемы.

Длинный ответ:

Вы обновляете старую версию angular до angular 12. Для этого сначала создайте проект с ng new APP_NAME --strict=false которого у вас пока нет строгого режима.

После этого выполните свою работу по переносу кода в новый проект и установите дополнительные необходимые пакеты.

Затем в конце удалите node_modules каталог и package-lock.json и переустановите их, используя npm install --force который в любом случае устанавливает ваши пакеты и предотвращает распространение ошибок на другие пакеты, которые на самом деле не имеют проблемы.

После этого попробуйте решить существующие проблемы и, при необходимости, обновить некоторые дополнительные пакеты, которые у вас есть в вашем проекте, и так далее.

Когда все проблемы решены и у вас есть рабочий проект, вы можете создать новый проект со строгим режимом. затем прочтите некоторые ссылки о строгом режиме и после этого скопируйте файлы рабочего проекта в новый проект, который имеет строгий режим, и сделайте то, что необходимо для проекта в строгом режиме, пока все проблемы не будут решены.