Angular组件库含routerLink组件在外部项目报错：无Router提供者？

我之前踩过几乎一模一样的坑，核心问题在于Angular依赖注入的层级和RouterModule的正确使用方式上。咱们一步步拆解：

为什么会出现这个报错？ #

routerLink指令依赖Router服务才能工作，但你的组件库组件在渲染时，它的依赖查找链里找不到Router服务的提供者。虽然你说项目里直接用routerLink没问题，但那是因为那个组件所在的模块（大概率是根模块）已经正确注册了Router服务，而组件库的组件走的注入路径没跟上。

这里得明确RouterModule的两种核心用法：

• RouterModule.forRoot(...)：必须在应用根模块（AppModule）中调用，它的作用是注册Router的单例服务，同时配置应用的主路由。没有这一步，整个应用里的Router服务都找不到。
• RouterModule.forChild(...)：在特性模块或组件库模块中调用，用来配置子路由（如果有的话），但它不会创建新的Router服务，而是复用根模块提供的单例。

你的组件库模块MyComponentModule只是导入了RouterModule（没调用forRoot/forChild），这确实能让routerLink指令在编译时可用，但组件库本身不能也不应该提供Router服务——这个服务必须由你的应用根模块来提供。

具体解决步骤 #

1. 确保应用根模块正确导入RouterModule.forRoot() #

不管你的特性模块（比如MyProjectModule）有没有导入RouterModule，根模块必须调用RouterModule.forRoot()来注册Router单例。修改你的AppModule：

// app.module.ts
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MyProjectModule } from './myproject.module';

@NgModule({
  imports: [
    BrowserModule,
    // 这里必须调用forRoot，哪怕是空路由配置
    RouterModule.forRoot([
      // 你的应用路由配置，比如 { path: '', component: HomeComponent }
    ]),
    MyProjectModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. 优化组件库模块的配置 #

你的组件库模块只需要让routerLink指令可用就行，不需要配置路由，建议用RouterModule.forChild([])来明确这个意图（和直接导入RouterModule效果一致，但语义更清晰）：

// mycomponent.module.ts
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponentComponent} from './mycomponent.component';

@NgModule({
  declarations: [MyComponentComponent],
  imports: [ 
    CommonModule, 
    RouterModule.forChild([]) // 明确表示这是一个不提供Router服务的模块
  ],
  exports: [MyComponentComponent]
})
export class MyComponentModule{ }

3. 检查组件库的依赖配置 #

确保你的组件库package.json里，@angular/router是作为peerDependencies存在的，而不是dependencies。这样能避免组件库打包时自带一份@angular/router，确保复用应用项目中的版本：

// 组件库的package.json
"peerDependencies": {
  "@angular/core": "^你的Angular版本",
  "@angular/router": "^你的Angular版本",
  // 其他必要的peer依赖，比如@angular/common
}

4. 修正组件HTML的语法错误 #

顺便提一句，你组件的HTML里<a routerLink="/">没有闭合，改成<a routerLink="/">Home</a>或者<a routerLink="/"></a>，避免后续可能的渲染问题。

为什么项目里直接用routerLink没问题？ #

因为你直接写的那个组件所在的模块（比如根模块）已经通过RouterModule.forRoot()提供了Router服务，而组件库的组件之前因为根模块没做这一步，导致注入链断了，找不到服务。

内容的提问来源于stack exchange，提问作者ojathelonius