Angular error: no provider for ActivatedRoute

Question

i m using angular 5 latest and i am hitting below exception

ERROR Error: StaticInjectorError(AppModule)[AppComponent -> ActivatedRoute]: 
  StaticInjectorError(Platform: core)[AppComponent -> ActivatedRoute]: 
    NullInjectorError: No provider for ActivatedRoute!
    at _NullInjector.get (core.js:1002)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1242)
    at StaticInjector.get (core.js:1110)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1242)
    at StaticInjector.get (core.js:1110)
    at resolveNgModuleDep (core.js:10854)
    at NgModuleRef_.get (core.js:12087)
    at resolveDep (core.js:12577)

the app.module.ts looks like below import { Routes, RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    AppComponent,
    OptyDetailsComponent,
    GlobalNavbarComponent
  ],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    HttpModule,
    HttpClientModule,
    FlexLayoutModule,
    FormsModule,
    MatButtonModule,
    MatInputModule
    RouterModule
  ],
  entryComponents: [
  ], 
  providers: [
    DataStoreService,
    DataObjectsOscService,
    AdobeSignService,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

How does your router configuration has written? Can you add some code? — Saiyaff Farouk, Feb 28 '18 at 23:14

Jota.Toledo · Answer 1 · 2018-10-04T16:25:35.990

53

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

edited Oct 04 '18 at 16:25

answered Feb 28 '18 at 23:08

Jota.Toledo

27,293
11
59
73

I am already using RouterModule.forRoot like so `RouterModule.forRoot(routes, { enableTracing: false, onSameUrlNavigation: 'reload'})`. How do i add activatedRoute to this list? – Maurice Oct 04 '18 at 14:49
1

To which list? what do you mean? – Jota.Toledo Oct 04 '18 at 15:18
according to you i should add `RouterModule.forRoot([])` to make it work. But i'm already using RouterModule.forRoot in another way. So what do i need to change in my own RouterModule.forRoot implementation so that activatedRoute is included to the `routes, { enableTracing: false, onSameUrlNavigation: 'reload'}` argument list? – Maurice Oct 04 '18 at 16:10
3

Added a small clarification to my answer. You dont need to do any changs to your code. – Jota.Toledo Oct 04 '18 at 16:26
In doing so, if there is a route resolver, the initial (root)-route will never be triggered. Any suggestions for this purpose? – dmorlock Apr 23 '19 at 08:57
1

@dmorlock you better create a new question – Jota.Toledo Apr 24 '19 at 18:34
I tried to set (useHash: true) and works as expected, but my url will look like: http://localhost:4200/#/product/14 and I don;t want "/#" char into my URL – Alin Popa Nov 22 '21 at 14:29

Angular error: no provider for ActivatedRoute

1 Answers1

Linked