Angular报错：Can't bind to 'routerLink'，已排查常见方案仍无效

核心问题分析 #

错误根源在于HeaderModule未正确导入RouterModule以提供routerLink指令，同时子模块未导出组件导致无法在根模块中使用，另外子模块误用RouterModule.forRoot()（该方法仅应在根模块/根路由模块中调用）。

具体修改步骤 #

1. 修正HeaderModule #

将RouterModule.forRoot([])替换为RouterModule，并添加exports数组导出HeaderComponent（确保AppModule能使用该组件）：

import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {RouterModule} from "@angular/router";

import {HeaderComponent} from "./header.component";

@NgModule({
  imports: [
    CommonModule,
    RouterModule // 仅导入RouterModule，无需forRoot
  ],
  declarations: [HeaderComponent],
  exports: [HeaderComponent] // 导出组件供外部模块使用
})

export class HeaderModule {}

2. 简化AppModule导入 #

AppModule已导入AppRoutingModule（该模块已包含RouterModule.forRoot()的配置），因此可以移除多余的RouterModule导入：

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {HeaderModule} from "./dashboard/header/header.module";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HeaderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 解决组件重复声明提示 #

IDE提示的重复声明大概率是缓存问题，执行以下操作即可：

• 重启你的IDE（如VS Code、WebStorm）
• 清理Angular缓存：运行命令 ng clean 后重新启动项目

验证修改 #

完成上述修改后，重新启动项目：

ng serve

此时routerLink绑定错误应已解决，同时highup-header组件可正常在AppComponent模板中使用。

内容的提问来源于stack exchange，提问作者Domjan Carol-Zsolt