NullInjectorError:R3InjectorError(AppModule)[Router->路由器->路由器]:NullInjectorError:路由器无提供程序 [英] NullInjectorError: R3InjectorError(AppModule)[Router -> Router -> Router]: NullInjectorError: No provider for Router

问题描述

我有一个已发布的库，其中包含在模板中使用[routerLink]的组件.在应用程序中安装库之后，出现错误 NullInjectorError:R3InjectorError(AppModule)[Router->路由器->路由器]:NullInjectorError:没有路由器的提供程序！

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!

在库中的模块内，RouterModule会被导入，如下所示:

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 {
}

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

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 { }

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

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

但是我认为将要提供RouterModule?我在做什么错了?

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

推荐答案

我正面临着与您正在研究的大型应用程序中描述的完全相同的场景.我的主应用程序导入了一个已发布的npm组件包，其中包含一个利用 routerLink 指令的组件.在运行该应用程序时，即使遇到任何需要的模块中都正确导入了 RouterModule ，我也会遇到与您提到的相同的 R3InjectorError .

I was facing this exact same scenario you described in a large application I'm working on. My main application imports a published npm component package that contains a component that leverages the routerLink directive. When running the application, I run into the same R3InjectorError you mention, even though RouterModule is definitely correctly imported in all modules that need it.

在我的案例中，问题的根本原因是，此npm软件包将 @ angular/router 明确列出为 dependencies 之一而不是> peerDependency (对于库来说应该是).这意味着 @ angular/router 将同时安装在 node_modules 和 node_modules/LIBRARY/node_modules 中！

The root cause of the problem in my case, was the fact that this npm package explicitly listed @angular/router as one of the dependencies instead of a peerDependency (which in the case of a library it should have been). This means @angular/router will be installed both in your node_modules, as well as in node_modules/LIBRARY/node_modules!

发生的事情是，在运行时，您发布的组件使用的 RouterModule 与您的应用程序使用 RouterModule.forRoot().已发布组件的 RouterModule 引用了 node_modules/LIBRARY_NAME/node_modules/@ angular/router ，而主应用程序已在 node_modules/@ angular/router .

What happens is that at runtime, the RouterModule your published component uses has a different InjectionToken than the RouterModule your application provided using a RouterModule.forRoot(). The published component's RouterModule refers to node_modules/LIBRARY_NAME/node_modules/@angular/router, whereas the main application has provided the one in node_modules/@angular/router.

因此，结论是:解决方法是在库中没有明确列出任何 @angular 软件包作为 dependency ，而是将其正确标记为 peerDependency.这是关于管理依赖项的有趣的读物 ng-packagr 文档.

So in conclusion: the fix is to not explicitly have any @angular packages listed in your library as a dependency, but correctly mark them as a peerDependency. Here's an interesting read on managing dependencies from the ng-packagr documentation.

作为参考:我不确定这是否完全与Ivy有关，但是在我的场景中，我正在启用Ivy的情况下运行Angular 11.

For reference: I'm not sure if this exclusively Ivy related, but in my scenario I was running Angular 11 with Ivy enabled.

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

The error message is definitely very confusing in this case, as the injected service is named Router twice, even though they're referencing different instances.

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

Hope this solves your problem too, I spent quite some time to figure this out!

这篇关于NullInjectorError:R3InjectorError(AppModule)[Router->路由器->路由器]:NullInjectorError:路由器无提供程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！