需要 RouterModule 的外部组件

Question

假设我有一个非常基本的组件，它是 Angular 组件库 的一部分，如下所示：

mycomponent.module.html

<div>
    <a routerLink="/">
</div>

mycomponent.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './mycomponent.component.html'
})
export class MyComponentComponent implements OnInit {

  @Input() title: string;

  constructor() { }

  ngOnInit() {
  }

}

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
  ],
  exports: [MyComponentComponent]
})
export class MyComponentModule{ }

我现在发布这个库，并在另一个项目中使用这个组件通过包含 MyComponentModule :

myproject.module.ts

@NgModule({
  imports: [CommonModule, RouterModule, MyComponentModule],
  declarations: []
})
export class MyProjectModule{}

然后我得到以下堆栈跟踪：

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[RouterLinkWithHref -> Router]: 
  StaticInjectorError(Platform: core)[RouterLinkWithHref -> Router]: 
    NullInjectorError: No provider for Router!
NullInjectorError: StaticInjectorError(AppModule)[RouterLinkWithHref -> Router]: 
  StaticInjectorError(Platform: core)[RouterLinkWithHref -> Router]: 
    NullInjectorError: No provider for Router!
    at NullInjector.get (vendor.js:131635)
    at resolveToken (vendor.js:146553)
    at tryResolveToken (vendor.js:146479)
    at StaticInjector.get (vendor.js:146329)

虽然 MyProjectModule 使用 RouterModule，并且如果我添加 <a routerLink="/"></a> 可以正常工作，但如果 routerLink 在 的子组件中，它就无法工作外部图书馆。导航在应用程序的其他任何地方都能正常工作。这是怎么回事？

Answer 1

经过一段时间我找到了解决方法。

如果需要服务注入（例如路由），请不要在tsconfig.json中导入带有paths的外部库。

包含 MyComponentModule 的外部库是使用 tsconfig.json 中的 paths 对象 人工导入的 ，例如：

"paths": {
  "my-library": ["../my-library/lib/src/"]
}

虽然这通过在修改库时热重载我的应用程序使开发更容易，它阻止模块被正确注入。

需要 RouterModule 的外部组件

External component requiring RouterModule

typescript

angular-routing

angular

angular8

mycomponent.module.html

mycomponent.component.ts

mycomponent.module.ts

myproject.module.ts