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!