0

I got this traceback and I can't replicate this error.

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?, ...]

Here is my 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" } }
Improve this question
7
  • For some reason LocationService is undefined. Looks like you're using a barrel (index.ts) for the services. Sometime re-exporting with wildcard can cause this. There are a few things I've seen that will cause this (generally with webpack). Commented Feb 21, 2017 at 9:00
  • So it's better to import the service directly from the file instead of index.ts, Commented Feb 21, 2017 at 9:03
  • Yesterday it works fine. Today only I got this error in all the branches except master. Is this something with node packages? I tried deleting the node modules folder and reinstalling the packages. Commented Feb 21, 2017 at 9:04
  • 1
    That's not what I mean. I mean in your index.ts, instead of export * from 'blah', use export { LocationService } from 'blah'. I've always run into problems where the wildcard (*) causes a problem Commented Feb 21, 2017 at 9:04
  • I don't know if this will solve the problem. There are a few other reasons I've ran into in the past that would cause the import to be undefined. Can't think of any more right now. But yeah, I bet importing it directly from the source file would work, as opposed as from the barrel Commented Feb 21, 2017 at 9:05

1 Answer 1

Reset to default
2

For me, I have included two export statements for same service in service's index.ts file. Finally it works after removing one.

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
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Great. It solved my problem. I was stuck for 2 days and finally got this post.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.