AngularJS如何正确注入共享服务？

Question

https://code.angularjs.org/1.6.3/docs/error/$injector/unpr?p0=documentPreviewServiceProvider%20%3C-%20documentPreviewService%20%3C-%20ezursMedicalRecordsService

main module导入commonServices module和caseinfo module，caseinfo module声明recordsComponent。

commonServices module使用EzursMedicalRecords声明两个服务DocumentPreviewService和.service。

recordsComponent注入EzursMedicalRecordsService，EzursMedicalRecordsService注入DocumentPreviewService

我已经检查了所有内容：

1. 拼写正确
2. 每个服务都用.service声明一次
3. 子服务在父服务之前声明
4. 提供了服务实例
5. 我没有在服务中注入$scope

这是物品的声明方式

common-services.module

export default angular.module('app.common-services', [
    angularLocalStorageModule, 
    ngSanitizeModule,
    uiSelectModule,
    ngIdleModule,
    angularLoadingBarModule,
    angularValidationMatchDirective,
    uibTypeaheadModule,
    angularRecaptcha,
    signalrModule
    ])
    .service('documentPreviewService ', documentPreviewService )
    .service('windowEventsService', windowEventsService)
    .service('ezursMedicalRecordsService', ezursMedicalRecordsService)
    .service('blobService', BlobService)

caseinfo模块

export default angular.module('app.caseinfo', [uirouter, uibAccordionModule, uibTabsnModule, "kendo.directives"])
    .controller('RecordsController', RecordsController)

主模块

import caseInfoModule from './case-info-page';
import commonServicesModule from '../common/services/app.common.services';

angular
    .module('app', [
        caseInfoModule,
        commonServicesModule,
    ])

有组件

class RecordsController {
    constructor(urls, $http, ezursGridService, blobService, ezursMedicalRecordsService, dialogService) {
        this.urls = urls;
        this.$http = $http;
        this.ezursGridService = ezursGridService;
        this.blobService = blobService;
        this.ezursMedicalRecordsService = ezursMedicalRecordsService;
        this.dialogService = dialogService;
    }

 RecordsController.$inject = ['urls', '$http', 'ezursGridService', 'blobService', 'ezursMedicalRecordsService', 'dialogService'];

 export default {
    bindings: {
        caseDto:"="
    },
    template,
    controller: RecordsController
};

ezursMedicalRecordsService

class MedicalRecordsService {
    constructor($http, urls, blobService, $window, documentPreviewService) {
        this.$http = $http;
        this.urls = urls;
        this.blobService = blobService;
        this.$window = $window;
        this.documentPreviewService = documentPreviewService;
    }

MedicalRecordsService.$inject = ['$http', 'urls', 'blobService', '$window', 'documentPreviewService'];

export default MedicalRecordsService;

和documentPreviewService

class DocumentPreviewService {
    constructor($http, urls) {
        this.$http = $http;
        this.urls = urls;
    }
}

DocumentPreviewService.$inject = ['$http', 'urls'];

export default DocumentPreviewService;

我确实需要将documentPreviewService注入整个应用程序中使用的ezursMedicalRecordsService中。

我不明白为什么可以将documentPreviewService注入ezursMedicalService。我有blob.service，它的声明方式与documentPreviewService相同，但是blob.service都可以。

Answer 1

在服务声明中，documentPreviewService后面有一个空白：

.service('documentPreviewService ', documentPreviewService )

我以为删除它可以解决问题！