Angular2 - NgModule 的无效提供程序仅允许提供 Provider 和 Type 实例答案

【问题标题】：Angular2 - Invalid provider for the NgModule only instances of Provider and Type are allowedAngular2 - NgModule 的无效提供程序仅允许提供 Provider 和 Type 实例
【发布时间】：2017-02-21 08:11:49
【问题描述】：

我得到了这个回溯，我无法复制这个错误。

vendor.bundle.js:25942 
Uncaught Error: Invalid provider for the NgModule 'NbSharedModule' 
- only instances of Provider and Type are allowed, 
got: [[object Object], MaterialDashboardProService, VehicleTypesService, ?undefined?, ...]

这是我的NbSharedModule

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import {MaterialModule} from '@angular/material';

import { AdminFormComponent } from './admin-form/admin-form.component';
import {
  MaterialDashboardProService,
  VehicleTypesService,
  LocationsService,
  VehiclesService,
  BookingsService,
  NotificationService,
  UsersService
} from './services';
import { OrganisationFormComponent } from './organisation-form/organisation-form.component';
import {
  MdpActivatorDirective,
  MdpBootstrapSelectDirective,
  MdpDatetimePickerDirective,
  MdpTagsinputDirective
} from './directives';
import { ChunkPipe } from './pipes/chunk.pipe';
import { VehicleTypesChooserComponent } from './vehicle-types-chooser/vehicle-types-chooser.component';
import { VehicleCardComponent } from './vehicle-card/vehicle-card.component';
import { LoaderComponent } from './loader/loader.component';
import { NotificationComponent } from './notification/notification.component';
import { TagsinputComponent } from './tagsinput/tagsinput.component';
import { VehicleFormComponent } from './vehicle-form/vehicle-form.component';
import { DeletePopupComponent } from './delete-popup/delete-popup.component';

@NgModule({
  declarations: [
    OrganisationFormComponent,
    AdminFormComponent,
    MdpActivatorDirective,
    MdpDatetimePickerDirective,
    MdpBootstrapSelectDirective,
    MdpTagsinputDirective,
    ChunkPipe,
    VehicleTypesChooserComponent,
    VehicleCardComponent,
    LoaderComponent,
    NotificationComponent,
    TagsinputComponent,
    VehicleFormComponent,
    DeletePopupComponent
  ],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormsModule,
    MaterialModule.forRoot()
  ],
  providers: [
    {provide: 'windowObject', useValue: window},
    MaterialDashboardProService,
    VehicleTypesService,
    LocationsService,
    VehiclesService,
    BookingsService,
    NotificationService,
    UsersService
  ],
  exports: [
    OrganisationFormComponent,
    AdminFormComponent,
    MdpActivatorDirective,
    MdpDatetimePickerDirective,
    MdpBootstrapSelectDirective,
    MdpTagsinputDirective,
    ChunkPipe,
    VehicleTypesChooserComponent,
    VehicleCardComponent,
    LoaderComponent,
    NotificationComponent,
    TagsinputComponent,
    VehicleFormComponent,
    DeletePopupComponent
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class NbSharedModule { }

package.json

{
  "name": "foo-app",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.4.0",
    "@angular/compiler": "2.4.0",
    "@angular/core": "2.4.0",
    "@angular/forms": "2.4.0",
    "@angular/http": "2.4.0",
    "@angular/material": "^2.0.0-beta.1",
    "@angular/platform-browser": "2.4.0",
    "@angular/platform-browser-dynamic": "2.4.0",
    "@angular/router": "3.2.3",
    "@angular2-material/slide-toggle": "^2.0.0-alpha.8-2",
    "@types/jquery.datatables": "^1.10.34",
    "angular2-fullcalendar": "^1.1.1",
    "angular2-moment": "^1.0.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@angular/compiler-cli": "2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "^1.0.0-beta.24",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "^4.0.2",
    "typescript": "~2.0.3",
    "webdriver-manager": "10.2.5"
  }
}

【问题讨论】：

由于某种原因，LocationService 未定义。看起来您正在为服务使用桶（index.ts）。有时使用通配符重新导出可能会导致此问题。我见过一些会导致这种情况的事情（通常使用 webpack）。
所以最好直接从文件中导入服务而不是index.ts，
昨天它工作正常。今天只有我在除master之外的所有分支中都遇到了这个错误。这与节点包有关吗？我尝试删除节点模块文件夹并重新安装包。
我不是这个意思。我的意思是在你的 index.ts 中，而不是 export * from 'blah'，使用 export { LocationService } from 'blah'。我总是遇到通配符 (*) 导致问题的问题
不知道这样能不能解决问题。我过去遇到的其他一些原因会导致导入未定义。现在想不出来了。但是，是的，我敢打赌直接从源文件导入它会起作用，而不是从桶中导入

标签： javascript angular

【解决方案1】：

对我来说，我在服务的index.ts 文件中包含了相同服务的两个导出语句。删除一个后它终于可以工作了。

services/index.ts

export * from './material-dashboard-pro.service';
export * from './vehicle-types.service';
export * from './locations.service';
export * from './vehicles.service';
export * from './locations.service'; // duplicated, remove this

【讨论】：

太棒了。它解决了我的问题。我被困了2天，终于得到了这篇文章。