How to fix the "No service provider" error?

Question

I get an error message:

"Exception: the Call to Node module failed: Error: Uncaught (in Promise): Error: No ServiceModuleService! Provider! Error: No ServiceModuleService!"

Here is some code.

app.module.shared.ts:

import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { AppComponent } from './components/app/app.component' import { ServiceModuleListComponent } from './components/service-module-list/service-module-list.component'; import { HeaderComponent } from './components/shared/header/header.component'; import { ServiceModuleService } from './components/shared/service-module.service'; import { ServiceModuleComponent } from './components/service-module/service-module.component'; export const sharedConfig: NgModule = { bootstrap: [AppComponent], declarations: [ AppComponent, ServiceModuleListComponent, HeaderComponent, ServiceModuleComponent ], imports: [ RouterModule.forRoot([ { path: '', redirectTo: 'servicemodulelist', pathMatch: 'full' }, { path: 'servicemodulelist', component: ServiceModuleListComponent }, { path: '**', redirectTo: 'servicemodulelist' } ]) ], providers: [ServiceModuleService] }; 

app.module.client.ts:

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { sharedConfig } from './app.module.shared'; @NgModule({ bootstrap: sharedConfig.bootstrap, declarations: sharedConfig.declarations, imports: [ BrowserModule, FormsModule, HttpModule, ...sharedConfig.imports ], providers: [ { provide: 'ORIGIN_URL', useValue: location.origin }, sharedConfig.providers ] }) export class AppModule { } 

app.component.ts

 import { Component } from '@angular/core'; @Component({ selector: 'app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { } 

service-module.component.ts:

 import { Component, Input } from '@angular/core'; import { ServiceModule } from '../shared/service-module.type'; @Component({ selector: 'service-module', templateUrl: './service-module.component.html' }) export class ServiceModuleComponent { @Input() serviceModule: ServiceModule constructor() { } } 

service module-list.component.ts:

 import { Component, OnInit } from '@angular/core'; import { ServiceModule } from '../shared/service-module.type'; import { ServiceModuleService } from '../shared/service-module.service'; import { ServiceModuleComponent }from '../service-module/service-module.component'; @Component({ selector: 'service-module-list', templateUrl: './service-module-list.component.html' }) export class ServiceModuleListComponent implements OnInit { serviceModules: ServiceModule[]; constructor(private serviceModuleService: ServiceModuleService) { } ngOnInit() { this.serviceModuleService.getServiceModuleItems() .then(serviceModuleItems => { this.serviceModules = serviceModuleItems; }); } } 

service module.service.ts:

 import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import 'rxjs/Rx'; import { ServiceModule } from './service-module.type'; @Injectable() export class ServiceModuleService { constructor(private http: Http) { } getServiceModuleItems() { return this.http.get('api/ServiceModuleItems') .map(response => response.json() as ServiceModule[]) .toPromise(); } } 

service module.type.ts:

  export class ServiceModule { idx: number; applicationName: string; isActive: boolean; description: string; } 

At this point, at startup, the application should display a list of the records that I have in the SQL table, and the service calls the API to get this, but now I am stuck in this problem with an error message.

Answer 1

I dug into this syntax a bit more:

 imports: [ BrowserModule, FormsModule, HttpModule, ...sharedConfig.imports ], 

"..." is an operator with the JavaScript extension. It ensures that the contents of the import are added here, and not the array itself. One of my colleagues explained this as follows:

 imports: [ a, b, c, sharedConfig.imports ] 

you end up with (which places the array)

 imports: [a, b, c, [what_shared_config_has]] 

instead of what you want (values ​​from an array)

 imports: [a, b, c, what_shared_config_has] 

Thus, this should also have a spread operator:

 providers: [ { provide: 'ORIGIN_URL', useValue: location.origin }, ...sharedConfig.providers ] 

Answer 2

I could not insert this code in a comment, so I am inserting it here. But this is what my modules look like with my services:

 import { NgModule } from '@angular/core'; import { RouterModule} from '@angular/router'; import { ProductListComponent } from './product-list.component'; import { ProductDetailComponent } from './product-detail.component'; import { ProductDetailGuard } from './product-guard.service'; import { ProductFilterPipe } from './product-filter.pipe'; import { ProductService } from './product.service'; import { SharedModule } from '../shared/shared.module'; @NgModule({ imports: [ SharedModule, RouterModule.forChild([ { path: 'products', component: ProductListComponent }, { path: 'product/:id', canActivate: [ ProductDetailGuard], component: ProductDetailComponent } ]) ], declarations: [ ProductListComponent, ProductDetailComponent, ProductFilterPipe ], providers: [ ProductService, ProductDetailGuard ] }) export class ProductModule {} 

I'm not sure what the {provide: ...} function is for, but you can just add your ServiceModuleService here.

 providers: [ { provide: 'ORIGIN_URL', useValue: location.origin }, ServiceModuleService ]