Cannot use service that is provided in 'root' (from external library) in app.component.ts

Question

I am working on Micro frontend (Module federation). I have three projects, let's say shell, mfe, ui-ux-lib.

In ui-ux-lib, I created loading.service.ts (provided in root), I export this service at public-api.ts

loading.service.ts

@Injectable({
  providedIn: 'root',
})
export class LoadingService {
  private _loadingComponentRef: Nullable<ComponentRef<LoadingComponent>> = null;
  private _rootViewContainerRef!: ViewContainerRef;

  // The rest
}

In shell app, I use LoadingService from ui-ux-lib, they are totally fine if I use in components except AppComponent. When I try to inject LoadingService in AppComponent, I got this error: TypeError: Cannot read properties of undefined (reading 'injector')

are there any things wrong from my configuration?

I tried to put LoadingService in AppModule providers but it doesn't work