Angular StaticInjectorErrors для Location, LocationStrategy и PlatformLocation

Question

Я создал обобщенный модуль npm, который может использоваться любым угловым приложением. В общем модуле есть глобальный сервис, который внедряет Location. Глобальный сервис выглядит так:

global.service.ts

import {Location} from '@angular/common';
import {Injectable} from '@angular/core';
ixport {RouterModule} from '@angular/router';

@Injectable()
export class GlobalService {
  location:Location;
  constructor(location: Location) {
   ...
}

И мой общий модуль (shared.module.ts)

import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
    imports: [
      CommonModule
    ]
})

export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
        ngModule: SharedModule,
        providers: [
            Location,
            { provide: LocationStrategy, useClass: 
            PathLocationStrategy },
        ]
      }
    }
}

А вот мой файл index.ts, который экспортирует модуль и сервисы

export {SharedModule} from './shared.module';
export {GlobalService} from './src/services/global.service';

Теперь я пытаюсь импортировать этот сервис в мой файл app.module.ts и использовать его в некоторых компонентах этого модуля. Мой app.module.ts выглядит так:

app.module.ts

import { NgModule } from '@angular/core';
...
import { SharedModule } from '../../node_modules/shared/shared.module'; 
import { GlobalService } from '../../node_modules/shared/src/services/global.service';

import { AppComponent } from './app.component';

@NgModule({
    imports: [
    SharedModule.forRoot(),
],
declarations: [
  AppComponent,
  ...
],
  providers: [GlobalService],
  bootstrap: [AppComponent]
})
  export class AppModule {

}

Когда я добавляю его в мой файл app.component.ts:

import { Component, OnInit } from '@angular/core';
import { GlobalService } from '../../src/services/global.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(globalService:GlobalService){
  }
}

Я получаю staticInjectorError: нет поставщика для Location. Поэтому я импортирую Location, добавляю провайдера Location внутри общего модуля, затем получаю staticInjectorError: нет провайдера для LocationStrategy, поэтому я делаю то же самое для LocationStrategy и PathLocationStrategy и добавляю {Обеспечить: LocationStrategy, useClass: PathLocationStrategy} для моих провайдеров. Затем я получаю staticInjectorError: нет поставщика для PlatformLocation. На данный момент у меня почти нет решений.

Как правильно обработать этот случай импорта служб с зависимостями в другой модуль?

FYI. Я успешно смог добавить службу без зависимостей из shared.module в app.module

Answer 1

Есть определенные рекомендации от Angular о том, как вы должны организовать свои модули.

В идеале Singleton Services должно быть частью Core Module

Pipes, Directives и другие общие Components могут быть частью Shared Module.

В этом конкретном случае ваша услуга зависит от некоторых поставщиков CommonModule. Вы должны добавить CommonModule к exports из NgModule

@NgModule({
    imports: [
      CommonModule
    ],
    providers : [ 
      GlobalService
    ],
    exports: [
      CommonModule
    ]
})

Это должно сработать.