Angular error: no provider for ActivatedRoute

For being able to provide ActivatedRoute into your angular elements, you need to import the result of calling RouterModule.forRoot into your root module (AppModule). This is because the module returned by RouterModule.forRoot includes the provider for instances of ActivatedRoute, among others.

So basically you need to add the following to your imports in the root module:

@NgModule({
  ...
  imports: [
    ...
    // Remark: because you havent defined any routes, I have to pass an empty
    // route collection to forRoot, as the first parameter is mandatory.
    RouterModule.forRoot([]),
    ...
  ],
  ...
})
export class AppModule { }

But to be honest, its kinda odd that you use ActivatedRoute, despite the fact that you haven’t defined any routes for your root module.

For further details see:

ActivatedRoute provider source

RouterModule.forRoot() source