Обновление Angular 14 до 16: Angular 15 обновлен, но не Angular 16

Я обновляю свое приложение с Angular 14 до Angular 16. Я могу обновить его до Angular 15 (добавив еще пару библиотек, таких как "ajv": "^8.12.0",fingerprintjs.), когда я обновляю его с Angular. С 15 по 16 версию я столкнулся с множеством проблем. Я пробовал использовать версии Angular ^16.2.13,^16.1.6, но мне кажется, что в основном проблемы связаны с такими библиотеками, как показано ниже:

"@ng-bootstrap/ng-bootstrap": "6.1.0",
"bootstrap": "^4.6.0",
"devextreme": "20.1.3",
"devextreme-angular": "20.1.3",

В терминале vscode отображается множество проблем (как я могу просмотреть все ошибки?), я не могу просмотреть все проблемы, но вижу несколько, в основном связанных с «dxi-столбцом», dx-popup, ngb-tab и т. д. все это связано с вышеупомянутыми библиотеками начальной загрузки и devextreme. Я попытался обновить devextreme lib до 23.2.5, но безуспешно (я заметил, что Angular 16 поддерживает эту версию). Ошибки, отображаемые в модулях, как показано ниже,

Error: src/app/sample.component.html:6:5 - error NG8001: 'ngb-tab' is not a known element:
1. If 'ngb-tab' is an Angular component, then verify that it is part of this module.
2. If 'ngb-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Error: src/app/test.component.html:315:31 - error NG8002: Can't bind to 'allowSorting' since it isn't a known property of 'dxi-column'.
1. If 'dxi-column' is an Angular component and it has 'allowSorting' input, then verify that it is part of this module.
2. If 'dxi-column' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

315                               [allowSorting] = "false"
                                  ~~~~~~~~~~~~~~~~~~~~~~

  src/app/test.component.ts:13:16
    13   templateUrl: './test.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component TestComponent.

в Наконец показ компиляции не удался, показывая, например,

Error: src/app/shared.module.ts:90:5 - error NG6002: This import contains errors, which may affect components that depend on this NgModule.

90     CoreModule,
       ~~~~~~~~~~

Error: src/app/shared.module.ts:91:5 - error NG6002: 'TranslateModule' does not appear to be an NgModule class.

91     TranslateModule
       ~~~~~~~~~~~~~~~

  node_modules/@ngx-translate/core/public_api.d.ts:20:22
    20 export declare class TranslateModule {
                            ~~~~~~~~~~~~~~~
    This likely means that the library (@ngx-translate/core) which declares TranslateModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

Может ли кто-нибудь помочь мне, как решить подобные проблемы, буду признателен за предоставленные рекомендации. Заранее спасибо.

Вы проверяли страницу npm на наличие этих библиотек? Обычно у них есть таблица поддерживаемых версий angular и информация о том, какую версию библиотеки вам следует использовать.

Jivopis 01.04.2024 17:27

Можете ли вы предоставить мне ссылку? Спасибо @jivopis.

Praveen Bomminani 01.04.2024 19:13

Посмотрите здесь: stackoverflow.com/questions/65457597/…

coolguy 15.04.2024 14:44
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
1 064
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как вы можете видеть в документации angular:

Компилятор совместимости Angular (ngcc) — это инструмент сборки, который облегчал совместимость между предыдущим компилятором Angular и архитектурой рендеринга (View Engine) и его новой архитектурой (Ivy).
View Engine был удален в Angular v13, а в v16 окончательно удален ngcc. В результате библиотеки Angular, созданные с помощью View Engine, нельзя использовать в Angular v16+.

Это означает, что библиотеки, не совместимые с Angular Ivy, не будут работать при обновлении до Angular 16.
В вашем случае кажется, что ngx-translate вызывает проблему:

This likely means that the library (@ngx-translate/core) which declares TranslateModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

К счастью, эта библиотека также доступна для Angular 16, и обновление до версии 15.x+ может решить проблему: https://github.com/ngx-translate/core. Однако только обновления этой библиотеки может быть недостаточно. Возможно, между версиями библиотеки есть неправильные изменения, которые необходимо исправить. Кроме того, у вас могут быть другие библиотеки, которые необходимо обновить или удалить для работы с Angular 16 (Ivy).

Другие вопросы по теме