Внешний компонент, требующий RouterModule - PullRequest
Новая
       3

Внешний компонент, требующий RouterModule

0 голосов
/ 09 января 2020

Скажем, у меня есть базовый c компонент, который является частью 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{ }

Теперь я публикую sh эту библиотеку и использую этот компонент в другой проект путем включения 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 находится внутри дочернего компонента из внешней библиотеки . Навигация работает в любом месте приложения. Что здесь происходит?

1 Ответ

0 голосов
/ 10 января 2020

Я нашел решение через некоторое время.

Не импортируйте внешнюю библиотеку с paths в tsconfig.json, если для этого требуется внедрение службы (например, маршрутизация).

Внешняя библиотека, содержащая MyComponentModule, была искусственно импортирована с использованием объекта paths в tsconfig.json, например: 

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

Хотя это облегчило разработку благодаря горячей перезагрузке моего приложение при изменении библиотеки предотвращает корректную вставку модулей .

...