I am upgrading my application from Angular 14 to Angular 16. I am able to upgraded to Angular 15 (by adding couple of more libraries like "ajv": "^8.12.0",fingerprintjs.), when I am upgrading it from Angular 15 to 16 version I am facing lot of issues. I tried using Angular versions ^16.2.13,^16.1.6, but I feel Mainly issues are from libraries like below,
"@ng-bootstrap/ng-bootstrap": "6.1.0",
"bootstrap": "^4.6.0",
"devextreme": "20.1.3",
"devextreme-angular": "20.1.3",
In vscode terminal its showing lot of issues(how can I view all errors ?), I am unable to view all issues but I can see few mostly related to 'dxi-column', dx-popup, ngb-tab, etc.. all these related to above bootstrap and devextreme libraries. I tried upgrading devextreme lib to 23.2.5 but no luck (I observe Angular 16 supports this version). Errors showing in Modules like below,
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.
in Finally showing compilation failed showing like,
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.
Can any one help me how to fix this kind of issues, I appreciate if any guidance provided. Thank you in advance.
As you can see in the angular documentation:
The Angular Compatibility Compiler (ngcc) was a build tool that facilitated compatibility between Angular's previous compiler and rendering architecture (View Engine) and its new architecture (Ivy).
View Engine was removed in Angular v13, and v16 finally removes ngcc. As a result, Angular libraries built with View Engine cannot be used in Angular v16+.
This means that libraries that doesn't have Angular Ivy compatibility won't work when updating to Angular 16.
In your case it seems that ngx-translate is causing the problem:
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.
Luckily this library is also available for Angular 16 and updating to version 15.x+ could solve the problem: https://github.com/ngx-translate/core. However, only updating this library might not be enough. Maybe there are broken changes between library versions that would need to be fixed. Additionally you might have other libraries that need to be either updated or removed in order to work with Angular 16 (Ivy).