I encountered a strange error in my Angular project that seems to be related to the App Module. The error message does not provide a specific location in the code where it occurred. The exact error is as follows:
ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[[object Object] -> [object Object]]:
NullInjectorError: No provider for [object Object]!
NullInjectorError: R3InjectorError(AppModule)[[object Object] -> [object Object]]:
NullInjectorError: No provider for [object Object]!
at NullInjector.get (core.mjs:8771:27)
at R3Injector.get (core.mjs:9200:33)
at R3Injector.get (core.mjs:9200:33)
at getTokenOrFunctionIdentity (router.mjs:3086:29)
at getResolver (router.mjs:4026:22)
at router.mjs:4016:44
at doInnerSub (mergeInternals.js:19:19)
at outerNext (mergeInternals.js:14:57)
at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
at OperatorSubscriber.next (Subscriber.js:31:18)
at resolvePromise (zone.js:1193:31)
at resolvePromise (zone.js:1147:17)
at zone.js:1260:17
at _ZoneDelegate.invokeTask (zone.js:402:31)
at core.mjs:25990:55
at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:25990:36)
at _ZoneDelegate.invokeTask (zone.js:401:60)
at Object.onInvokeTask (core.mjs:26300:33)
at _ZoneDelegate.invokeTask (zone.js:401:60)
at Zone.runTask (zone.js:173:47)
In my research, I found that this issue is likely related to services, but I am still uncertain.
All services in my application are provided in the root component with the following decorator:
@Injectable({
providedIn: 'root'
})
Below are my App Modules:
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
RecipesComponent,
RecipeListComponent,
RecipeDetailComponent,
RecipeItemComponent,
ShoppingListComponent,
ShoppingEditComponent,
DropdownDirective,
RecipiesEditComponent,
ToggleActiveClassDirective,
DeleteDirective,
AuthComponent,
],
imports: [
BrowserModule,
FormsModule,
AppRouteModule,
ReactiveFormsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Here's the code snippet from the App Route Module:
const appRoutes: Routes = [
{
path: 'recipes',
component: RecipesComponent,
resolve: [{data: () => inject(HttpService).fetchRecipes()}],
children: [
{path: 'new', component: RecipiesEditComponent},
{
path: ':id',
component: RecipeDetailComponent,
resolve: {detail:
(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
let a = inject(RecipeService)
let b = inject(HttpService)
b.fetchRecipes()
return a.getRecipes()[route.params['id']]
}
}},
{path: ':id/edit', component: RecipiesEditComponent, resolve: {data: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
let a = inject(RecipeService)
a.getRecipes()[route.params['id']]
let b = inject(HttpService)
return b.fetchRecipes()
} }}
]
},
{
path: 'shoppinglist',
component: ShoppingListComponent
},
{
path: 'auth',
component: AuthComponent
}
]
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [RouterModule]
})
export class AppRouteModule {
}
If you have any suggestions on how to resolve this type of error, I would greatly appreciate it.
P.S: I came across a similar error message that stated
No Provider for AngularFireDatabase
In my case, the error mentions [Object object]
Thank you in advance :)