Type 'ModuleWithProviders<NbThemeModule>' must have a '[Symbol.iterator]()' method that returns an iterator.ts(2488)

Question

I try to use the Ngx-admin and set the themes but I've got the error: Type 'ModuleWithProviders' must have a 'Symbol.iterator' method that returns an iterator.ts(2488) how can I fix this error? plaese help me

export class ThemeModule {
    static forRoot(): ModuleWithProviders<ThemeModule> {
        return {
            ngModule: ThemeModule,
            providers: [
                ...NbThemeModule.forRoot(
                    {
                        name: 'default',
                    },
                    [DEFAULT_THEME, COSMIC_THEME, DARK_THEME],
                    null,
                    NbLayoutDirection.RTL
                    
                ),
            ],
        };
    }
}

Answer 1

The problem is with what comes to post the spread operator.

Do this way instead.

const nbThemeModule: any = NbThemeModule.forRoot(
                {
                    name: 'default',
                },
                [DEFAULT_THEME, COSMIC_THEME, DARK_THEME],
                null,
                NbLayoutDirection.RTL
                
            )

Then in the @ngModule,

export class ThemeModule {
  static forRoot(): ModuleWithProviders<ThemeModule> {
    return {
      ngModule: ThemeModule,
      providers: [
        ...nbThemeModule,
      ],
    };
  }
}

this will fix the issue which is a temporary hack.

Answer 2

I think it's due to strict compiler options flags in tsconfig.json.

In my case a simple fix it's:

export class ThemeModule {
  static forRoot(): ModuleWithProviders<ThemeModule> {
    return {
      ngModule: ThemeModule,
      providers: [
        ...NbThemeModule.forRoot(
          {
            name: 'default',
          },
          [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME ],
        ).providers || [],
      ],
    };
  }
}

Try just add || [] in the end.

I hope this will help you.