angularnrwl-nx

Angular NX 17 Upgrade - nx/angular no longer exports 'NxModule'


I have completed running migrations to Angular 17, and my in my app.module.ts file I have an import for NxModule:

import { NxModule } from '@nx/angular';

and I have NxModule.forRoot() added in my imports:

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ShellModule,
    NxModule.forRoot(),
    StoreModule.forRoot(reducer, {
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true,
      },
    }),
    StoreDevtoolsModule.instrument({
      maxAge: 30,
      logOnly: environment.production,
    connectInZone: true}),
    EffectsModule.forRoot([AppEffects]),
    AuthModule.forRoot({
      loader: {
        provide: StsConfigLoader,
        useFactory: httpLoaderFactory,
        deps: [HttpClient],
      },
    }),
    CommonServicesModule.forRoot(),
    CommonUiModule.forRoot(),
  ],
  ....

The previous version of Nx included the following 2 exports in node_modules@nrwl\angular\index.d.ts:

export { DataPersistence, fetch, navigation, optimisticUpdate, pessimisticUpdate, } from './src/runtime/nx/data-persistence';
export { NxModule } from './src/runtime/nx/nx.module';

However, NxModule was deprecated since v14 and it was removed in v15.

This is what the Angular intelligence shows when I hover over the import:

Module '"@nx/angular"' has no exported member 'NxModule'

The documentation on the Nx site just provides the following information:

I am not understanding what "Please switch to using --parent instead" actually means, and all other searches for NxModule deprecation have not provided any direction for how to resolve this.

How do I go about or what changes do I need to resolve this error?


Solution

  • The NxModule was deprecated in version 14 and removed in version 15 of Nx. To address the error you're facing after upgrading to Angular 17, you should remove the NxModule import and its usage from your app.module.ts. Instead, if you were using NxModule for data persistence operations, you can directly use data persistence operators from @ngrx/router-store/data-persistence.

    To resolve the error due to the deprecation of NxModule in your Angular application, follow these steps:

    1. Remove NxModule Import and Usage:

      • Remove the NxModule import and its invocation from your app.module.ts. Since NxModule is deprecated and no longer exists in Nx version 15 and beyond, it should not be used.
      • For example, delete the lines:
        import { NxModule } from '@nx/angular';
        // And in your @NgModule imports array
        NxModule.forRoot(),
        
    2. Use Data Persistence Operators from NgRx:

      • If you were using NxModule for data persistence features, you should replace it with the equivalent operators from @ngrx/router-store/data-persistence.
      • As suggested in a GitHub issue discussion, you can import these operators directly. For example:
        import { fetch, navigation, optimisticUpdate, pessimisticUpdate } from '@ngrx/router-store/data-persistence';
        
    3. Refer to Nx Documentation:

    4. Update Other Usages of Nx:

      • If you are using other features from Nx, ensure they are updated according to the latest version. Nx has changed its package naming from @nrwl to @nx, and it is essential to use the correct package names.
      • The Nx documentation provides comprehensive guidance on using the latest features and best practices in Nx.