时间戳

首页 > 解决方案 > Location、LocationStrategy 和 PlatformLocation 的 Angular StaticInjectorErrors

angular - Location、LocationStrategy 和 PlatformLocation 的 Angular StaticInjectorErrors

问题描述

我创建了一个通用的 npm 模块，任何 angular 5 app 都可以使用它。在共享模块中，有一个注入 Location 的全局服务。全局服务如下所示：

全球服务.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:no provider for Location。所以我导入 Location 在共享模块中添加 Location 提供程序，然后我得到 staticInjectorError:no provider for LocationStrategy 所以我对 LocationStrategy 和 PathLocationStrategy 执行相同的操作并将 {provide: LocationStrategy, useClass:PathLocationStrategy} 添加到我的提供程序。然后我得到一个staticInjectorError：PlatformLocation 没有提供者。在这一点上，我几乎没有解决方案。

处理这种将具有依赖关系的服务导入另一个模块的情况的正确方法是什么？

供参考。我成功地添加了一个没有从 shared.module 到 app.module 依赖的服务

标签： angularangular5

解决方案

Angular有一些关于如何组织模块的建议。

理想情况下，单例服务应该是Core Module

Pipes和Directives其他常见的Components可以是 的一部分Shared Module。

在这种特殊情况下，您的服务依赖于CommonModule. 你应该添加CommonModule到exportsNgModule 

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

这应该可以解决问题。

推荐阅读