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!

1 post - 1 participant

Read full topic