Dependency injection with standalone components

I’m refactoring an NgModule-based app to use standalone components, and running into issues with my services. For functionality that works correctly when using NgModules, I’m getting NullInjectorErrors and TypeErrors (“this.searchService.RunSearch is not a function” for a public method of a service) from standalone components that require the services.

I’m building in Ionic 7 with Angular 15. My services are meant to be singletons, so they all have this decorator:

@Injectable({
  providedIn: 'root'
})

The components that need the services include them in their constructor signatures, like this:

@Component({
    standalone: true,
    imports: [ CommonModule, FormsModule, IonicModule ],
...
})
export class SearchModalComponent {
    constructor(private router: Router, private searchService: SearchService) {}

I added all of the services to the providers array in the bootstrapApplication call in main.ts:

bootstrapApplication(AppComponent, {
  providers: [
    BookService,
    ModalService,
    NavService,
    SearchService,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    importProvidersFrom(IonicModule.forRoot({})),
    provideRouter(routes)
  ],
});

Is there someone who has worked with standalone components who can tell me what step(s) I’m missing? Thanks!

If you have providedIn: 'root', you dont need to declare them in main.ts. They are available as soon as your app starts.

1 Like

Thanks for confirming.

I had to make some changes to my angular.json to debug in VS Code, and determined that the problem was not my services, but an HttpClient dependency in a service.

I resolved the bug by adding this to the call to bootstrapApplication in main.ts:

importProvidersFrom(HttpClientModule),

1 Like