How to fix 'No provider for service' error?

I dug into this syntax a bit more:

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

The '...' here is the JavaScript spread operator. It ensures that the contents of the imports is added here and not the array itself. One of my colleagues explained it like this:

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

you end up with (which puts the array in)

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

instead of what you want (the values from the array)

imports: [a, b, c, what_shared_config_has]

So this needs to have the spread operator as well:

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

I could not paste this much code in a comment, so I'm pasting 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: ...} piece is for, but you could just add your ServiceModuleService here.

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