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

Question

我有一个已发布的库，其中包含一个在其模板中使用 [routerLink] 的组件。 在我的应用程序中安装库后，我收到错误NullInjectorError: R3InjectorError(AppModule)[Router -> Router -> Router]: NullInjectorError: No provider for Router！

在库中的模块中，RouterModule 被导入，如下所示：

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

在我的应用程序中，RouterModule 配置如下：

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

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

app.module.ts看起来像这样：

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

但我以为RouterModule会被提供？ 我究竟做错了什么？

Answer 1

我正面临着您在我正在处理的大型应用程序中描述的完全相同的场景。 我的主应用程序导入了一个已发布的 npm 组件包，其中包含一个利用routerLink指令的组件。 运行应用程序时，我遇到了您提到的相同的R3InjectorError ，即使RouterModule绝对正确地导入了所有需要它的模块。

在我的情况下，问题的根本原因是这个 npm 包明确地将@angular/router列为dependencies项之一，而不是peerDependency （在库的情况下它应该是）。 这意味着@angular/router将安装在您的node_modules以及node_modules/LIBRARY/node_modules ！

发生的情况是，在运行时，您发布的组件使用的RouterModule具有与您的应用程序使用RouterModule.forRoot()提供的RouterModule不同的InjectionToken 。 已发布组件的RouterModule指的是node_modules/LIBRARY_NAME/node_modules/@angular/router ，而主应用程序在node_modules/@angular/router中提供了一个。

所以总而言之：解决方法是不要在你的库中明确地将任何@angular包列为dependency项，而是正确地将它们标记为peerDependency 。 这是ng-packagr文档中有关管理依赖项的有趣读物。

供参考：我不确定这是否与 Ivy 完全相关，但在我的场景中，我运行的是启用了 Ivy 的 Angular 11。

在这种情况下，错误消息肯定非常令人困惑，因为注入的服务被命名为Router两次，即使它们引用了不同的实例。

希望这也能解决您的问题，我花了很多时间来解决这个问题！

Answer 2

我在使用@angular/router的服务中遇到了同样的错误。 我能够通过更换来修复它

@Injectable()

和

@Injectable({
  providedIn: 'root'
})

在服务类里面。

Answer 3

将HttpClient导入您的.service.ts

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

将HttpClientModule导入app.module.ts并将HttpClientModule添加到导入数组

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

 imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],

Answer 4

对我来说，这个问题有点像@NilsTitjgat 解释的那样，但我必须将库保留为dependency项。

如果像我一样你必须这样做，那么问题出在你的应用程序导入了另一个版本的库，这个库导入了这个库。

意思是如果

主应用

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

@my/lib

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

然后你将面临同样的错误。 解决这个问题的方法是将@another/lib版本从1.0.0插入MainApp到1.1.0 。

是的，你不应该像这样导入它。 如果可以的话，把它放在peerDependencies下，就像@NilsTitjgat 提到的那样

Answer 5

我最近遇到了类似的错误，根本原因与 peerDependency 无关，所以我在这里分享。

报告的错误是

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

错误的根本原因如下：

我的角度应用程序正在使用自定义组件（从内部库导入）。 自定义组件的视图有一个带有 formControlName 绑定的复选框元素。 此复选框上还添加了一个自定义指令来控制启用/禁用行为。 该指令具有 NgControl 的依赖项（在构造函数中指定，如constructor(private ngControl: NgControl) ）。

在进行一些更改时，我删除了自定义组件中复选框上的 formControlName 绑定，但没有删除应用于它的自定义指令。 这导致NullInjectorError: R3InjectorError错误，当我删除自定义指令以及 formControlName 绑定删除时，该错误得到解决。