Angular 2 RC.5单例全局共享服务

Question

I am trying to create global singleton available services . I have read this solution - https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module , but it doesn't works for me.

I created shared module (this is my shorter example):

NgModule({
    imports: [
        CommonModule,
        ReactiveFormsModule
    ],
    declarations: [ ShopCartComponent ],
    exports: [
        CommonModule,
        ReactiveFormsModule,
        ShopCartComponent,
    ]
})
export class SharedModule {
    static forRoot() : ModuleWithProviders {
        return {
            ngModule: SharedModule,
            providers: [
                ProductsService,
                ProductsActions
            ]
        };
    }
}

And in my root application module:

NgModule({
    imports: [
        BrowserModule,
        SharedModule.forRoot(),
        RouterModule.forRoot(routes)
    ],
    declarations: [ AppComponent ],
    providers: [
        provideStore({
           ... some stores ...
        })
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

But when I am trying to inject ProductsService | ProductsActions into children module, angular shows followed error message:

ORIGINAL EXCEPTION: No provider for ProductsService!

It is my children module:

@NgModule({
    imports: [
        SharedModule,
        RouterModule.forChild([
            { path: '', component: ProductsComponent }
        ])
    ],
    declarations: [ ProductsComponent ]
})
export default class ProductsModule { }

I already imported SharedModule. Shoud I do something more?

---------------- UPDATE -------------------

I already solved my problem. I had to add ProductsModule into imports of root module. Like this:

@NgModule({
    imports: [
        BrowserModule,
        ProductsModule,
        RouterModule.forRoot(routes),
        SharedModule.forRoot()
    ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

The reason (I think) is that I wanted to load another module immadiately in root route table, like this:

{ path: '', loadChildren: 'app/components/products/products.module' },

Thanks guys for all help!

Answer 1

I would set your services into the providers attribute of your shared module.

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule
  ],
  declarations: [ ShopCartComponent ],
  exports: [
    CommonModule,
    ReactiveFormsModule,
    ShopCartComponent,
  ],
  providers: [ // <-----
    ProductsService,
    ProductsActions
  ]
})
export class SharedModule {
  (...)
}