Errors in app.module after migrating from Angular 15 to 16

Issue

I recently attempted to upgrade my Angular application from version 15 to 16. However, after the upgrade, I encountered numerous errors in my app.module. I have already tried various troubleshooting steps, including checking for module imports and using ng update, but the errors persist. The errors seem to be related to module imports and package versions. Has anyone else experienced similar issues during their Angular 15 to 16 migration? What are the recommended steps to resolve these errors in the app.module? Any insights or guidance on resolving these migration errors would be greatly appreciated. This question provides a clear and specific overview of the issue, making it easier for the community to understand and provide relevant assistance.

The error:

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

 49   imports: [
               ~
 50     BrowserModule,
    ~~~~~~~~~~~~~~~~~~
...
 71     NgIdleKeepaliveModule.forRoot()
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 72   ],
    ~~~


Error: src/app/core/rebarauth/rebar.auth.module.ts:118:13 - error NG6002: 'MsalModule' does not appear to be an NgModule class.

118   imports: [MsalModule],
                ~~~~~~~~~~

  node_modules/@azure/msal-angular/msal.module.d.ts:5:22
    5 export declare class MsalModule {
                           ~~~~~~~~~~
    This likely means that the library (@azure/msal-angular) which declares MsalModule 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.


Error: src/app/pages/admin/admin.module.ts:85:5 - error NG6002: 'NgxDropzoneModule' does not appear to be an NgModule class.

85     NgxDropzoneModule,
       ~~~~~~~~~~~~~~~~~

  node_modules/ngx-dropzone/lib/ngx-dropzone.module.d.ts:1:22
    1 export declare class NgxDropzoneModule {
                           ~~~~~~~~~~~~~~~~~
    This likely means that the library (ngx-dropzone) which declares NgxDropzoneModule 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.


Error: src/app/pages/admin/admin.module.ts:88:5 - error NG6002: 'LMarkdownEditorModule' does not appear to be an NgModule class.

88     LMarkdownEditorModule,
       ~~~~~~~~~~~~~~~~~~~~~

  node_modules/ngx-markdown-editor/public_api.d.ts:4:22
    4 export declare class LMarkdownEditorModule {
                           ~~~~~~~~~~~~~~~~~~~~~
    This likely means that the library (ngx-markdown-editor) which declares LMarkdownEditorModule 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.

1. Updated all dependencies: When I run ng update, I don't get any pending updates. 2.Cleared Cache: Deleted the node_modules folder and package_lock.json file, and did a clean npm install.

Solution

The reason is stated in the error messages you are getting. Angular 16 dropped support for the Angular Compatibility Compiler (ngcc). This breaks compatibility with some older libraries like ngx-dropzone. This library has been deprecated.

If you want to upgrade to Angular 16, you will have to first replace this with another library, like @ngx-dropzone/cdk.

Answered By - Ali Nauman