UPDATE: The problem is only present in development mode, and vanishes when running ng build or ng serve with the --prod flag.
I've noticed a regression in a web app I'm working on after upgrading to Angular 8. In one of my components, I've started recieving this error:
ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[function () { return []:
StaticInjectorError(Platform: core)[function () { return []:
NullInjectorError: No provider for function () { return [!
Error: NullInjectorError: No provider for function () { return [!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:725) [angular]
at resolveToken (core.js:11812) [angular]
at tryResolveToken (core.js:11756) [angular]
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:11660) [angular]
at resolveToken (core.js:11812) [angular]
at tryResolveToken (core.js:11756) [angular]
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:11660) [angular]
at resolveNgModuleDep (core.js:20006) [angular]
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:20677) [angular]
at getToken (router.js:2844) [angular]
at getResolver (router.js:3492) [angular]
at resolveNode (router.js:3475) [angular]
at runResolve (router.js:3461) [angular]
at MergeMapSubscriber.project (router.js:3455) [angular]
at resolvePromise (zone.js:852) [angular]
at resolvePromise (zone.js:809) [angular]
at polyfills.js:3918:17 [angular]
at Object.onInvokeTask (core.js:25977) [angular]
at drainMicroTaskQueue (zone.js:601) [<root>]
I've narrowed the problem down to the resolver used in the route to the component. When I remove/comment out the injections from the constructor, the component loads fine. Any ideas what could be causing this? I'm stumped.
Here's the resolver:
IMPORTS REMOVED FOR BREVITY
@Injectable()
export class MemberListResolver implements Resolve<User[]> {
constructor(
private authService: AuthService,
private router: Router,
private alertify: AlertifyService,
private distributorService: DistributorService
) {
}
resolve(route: ActivatedRouteSnapshot): Observable<User[]> {
return this.authService.currentDistributor.pipe(
flatMap((d: Distributor) => {
return this.distributorService.getUsers(d.id).pipe(
catchError(error => {
this.alertify.message('Problem retrieving users');
this.router.navigate(['/home']);
return of(null);
})
);
})
);
}
}
I had the same problem. It was a syntax error in the Routes array
First I wrote
const routes: Routes = [
{
path: '',
component: GalleryComponent,
resolve: PhotoListResolver
}
];
But it should be
const routes: Routes = [
{
path: '',
component: GalleryComponent,
resolve: {
photos: PhotoListResolver
}
}
];
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With