NullInjectorError: No Provider for ResizeService in microfrontend application

[nani554]

Start of NullInjectorError: R3InjectorError(CustomerModule)ResizeService -> ResizeService => ResizeService -> ResizeService]: NullInjectorError: No provider for ResizeService!

Im using "@angular-architects/module-federation" thus making a monolithic application to microfrontend app. I've host repository and remote repository and in both repositories CarousalModule is imported in module file, and in run time as soon as i navigate to remote repository with initialized component which is using **<owl-carousel-o *>.... as soon as this element is rendered, application is crashing and printing above message in console.

node: v16.15.1 angular: 14.0.0 "@angular-architects/module-federation": "14.3.0",
"@angular-architects/module-federation-tools": "14.3.0", "ngx-owl-carousel-o": "14.0.0",

Need your support in resolving this issue, please feel free to ask any questions. Thank you

[BEST-Thanawat]

Hi,

Just add "importProvidersFrom([CarouselModule])" into providers in app.config.ts.

[nani554]

We dont have app.config.ts in angular application, so i dont know exactly where to add it for time being adding it in routes.ts { path: 'customers', providers: [ importProvidersFrom([CarouselModule]) ], loadChildren: () => loadRemoteModule({ type: 'module', remoteEntry: ${ENVIRONMENT.ccContextPath}/remoteEntry.js, exposedModule: "./CCWebComponents", }).then((m) => m.CustomerModule) },

note: please let me know where exactly i've to provide it
. CustomerModule is seperate repository, in that repository only im using carousal, so basically when im navigating to customer repository from host repository and when carousal is about to render im facing this issue.

Thank you @BEST-Thanawat

[BEST-Thanawat]

We dont have app.config.ts in angular application, so i dont know exactly where to add it for time being adding it in routes.ts { path: 'customers', providers: [ importProvidersFrom([CarouselModule]) ], loadChildren: () => loadRemoteModule({ type: 'module', remoteEntry: ${ENVIRONMENT.ccContextPath}/remoteEntry.js, exposedModule: "./CCWebComponents", }).then((m) => m.CustomerModule) },

note: please let me know where exactly i've to provide it
. CustomerModule is seperate repository, in that repository only im using carousal, so basically when im navigating to customer repository from host repository and when carousal is rendering im facing this issue.

Thank you @BEST-Thanawat

Did you solve the issue?

I just migrated my old app in to Angular 17 (app.config.ts is in Angular 17) so which Angular version are you using?

[nani554]

No, couldnt resolve this issue, Im using Angular 14 @BEST-Thanawat

[nani554]

We have resolved it by moving carousel related functionality to shared module which is present in seperate repository, which we are using as a angular package(npm package) in remote and host repositories. so in that package repo. we have created one component which contains carousel and exporting that component from sharedmodule. Thank you for assisting @BEST-Thanawat