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

Question

我有一个已发布的库，其中包含一个在其模板中使用 [routerLink] 的组件。在我的应用程序中安装库后，我收到错误 NullInjectorError:R3InjectorError(AppModule)[路由器->路由器->路由器]:
NullInjectorError:没有路由器的提供者!
在库中的模块中，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您发布的组件使用了不同的 InjectionToken比RouterModule您使用 RouterModule.forRoot() 提供的应用程序.已发布组件的 RouterModule指node_modules/LIBRARY_NAME/node_modules/@angular/router ，而主应用程序提供了 node_modules/@angular/router 中的一个.
所以总而言之:解决方法是不明确地有任何 @angular在您的库中列为 dependency 的软件包，但正确地将它们标记为 peerDependency .这里是 an interesting read关于管理来自 ng-packagr 的依赖关系文档。
供引用:我不确定这是否与 Ivy 完全相关，但在我的场景中，我运行的是启用了 Ivy 的 Angular 11。
在这种情况下，错误消息肯定非常令人困惑，因为注入(inject)的服务被命名为 Router两次，即使它们引用了不同的实例。
希望这也能解决您的问题，我花了很多时间来解决这个问题!