NullInjectorError: R3InjectorError(AppModule)[Router -> Router -> Router]: NullInjectorError: No provider for Router

Question

I've got a published library containing a component that uses [routerLink] in it's template. After installing the library in my application, I get the error NullInjectorError: R3InjectorError(AppModule)[Router -> Router -> Router]: NullInjectorError: No provider for Router!

Within the module in the library the RouterModule is imported and looks like this:

@NgModule({
  declarations: [
    Component
  ],
  exports: [
    Component
  ],
  imports: [
    CommonModule,
    RouterModule,
    TranslateModule
  ]
})
export class LibWithComponentModule {
}

Within my application, the RouterModule is configured as follows:

const routes: Routes = [{
  path: '',
  component: RootComponent
}];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

The app.module.ts looks like this:

  declarations: [
    AppComponent,
    RootComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LibWithComponentModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

But I thought the RouterModule is going to be provided? What am I doing wrong?

Answer 1

I got the same error with a service that used @angular/router. I was able to fix it by replacing

@Injectable()

with

@Injectable({
  providedIn: 'root'
})

inside the service class.

Answer 2

Import HttpClient into your .service.ts

import { HttpClient } from '@angular/common/http';

Import HttpClientModule into app.module.ts and add HttpClientModule to imports array

import { HttpClientModule } from '@angular/common/http';

 imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],

Answer 3

For me, the problem was a bit like @NilsTitjgat explained, but I had to keep the library as dependency.

If like me you have to do it, then the problem is coming from your application importing another version of the library that the one imported into this library.

Meaning if

MainApp

"dependencies": { 
  "@my/lib": "1.0.0",
  "@another/lib": "1.0.0" 
}

@my/lib

"dependencies": { 
  "@another/lib": "1.2.0"  // <-- The version is higher
}

Then you will face the same error. The way to fix this would be to bump the @another/lib version into MainApp from 1.0.0 to 1.1.0.

Yes, you shouldn't import it like this. If you can, put it under peerDependencies as @NilsTitjgat mentioned

Answer 4

I faced a similar error very recently and the root cause is not related to peerDependency so I am sharing it here.

The error reported was

NullInjectorError: R3InjectorError(AppModule)[NgControl -> NgControl -> NgControl -> NgControl]: NullInjectorError: No provider for NgControl!

The root cause of the error was below:

My angular app is using a custom component(imported from an internal library). The custom component's view had a checkbox element with a formControlName binding. A custom directive was also added on this checkbox to control the enable/disable behavior. This directive had a dependency of NgControl (specified in constructor like constructor(private ngControl: NgControl) ).

While making some changes, I removed the formControlName binding on the checkbox in custom component but did't removed the custom directive applied on it. This lead to NullInjectorError: R3InjectorError error which got resolved when I removed the custom directive along with the formControlName binding removal.

Answer 5

The reason is probably, that TSP is not easily partitioned into independent sub-problems. This is a prerequisite to apply a divide and conquer strategy.

The paper Multilevel Graph Partitioning Scheme to Solve Traveling Salesman Problem describes how to use multilevel graph partitioning. To reduce the overall complexity, a K-Means clustering/partitioning algorithm is used to divide the TSP into multiple parts. In a second stage, each partition is solved separately. As a final step, the combined solution is improved by applying the Lin Kernighan heuristic.