title: How to fix 'No provider for service' error?
body: <p>I get an error:</p>
  
  <blockquote>
    <p>"Exception: Call to Node module failed with error: Error: Uncaught (in
    promise): Error: No provider for ServiceModuleService! Error: No
    provider for ServiceModuleService!"</p>
  </blockquote>
  
  <p>Here is some code.</p>
  
  <p>app.module.shared.ts:</p>
  
  
  
  <pre class="lang-typescript prettyprint-override"><code>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]
  };
  </code></pre>
  
  <p>app.module.client.ts:</p>
  
  <pre class="lang-typescript prettyprint-override"><code>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 {
  }
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre class="lang-typescript prettyprint-override"><code>import { Component } from '@angular/core';
  
  @Component({
      selector: 'app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent {
  }
  </code></pre>
  
  <p>service-module.component.ts:</p>
  
  <pre class="lang-typescript prettyprint-override"><code>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() {
  
      }
  }
  </code></pre>
  
  <p>service-module-list.component.ts:</p>
  
  <pre class="lang-typescript prettyprint-override"><code>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 =&gt; {
                  this.serviceModules = serviceModuleItems;
              });
      }
  }
  </code></pre>
  
  <p>service-module.service.ts:</p>
  
  <pre class="lang-typescript prettyprint-override"><code>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 =&gt; response.json() as ServiceModule[])
              .toPromise();
      }
  }
  </code></pre>
  
  <p>service-module.type.ts:</p>
  
  <pre class="lang-typescript prettyprint-override"><code>    export class ServiceModule {
      idx: number;
      applicationName: string;
      isActive: boolean;
      description: string;
  }
  </code></pre>
  
  <p>Basically at this point, on startup the app must display a list of entries I have on a SQL table, and the service calls an API to get that, but am stuck on this issue now with the error message.</p>