angular - Understanding Angular 6 services

Question

I'm trying to understand how services work in Angular.

I have a module called CardModule which has the following definition:

@NgModule({
 imports: [
   CommonModule
   BrowserAnimationsModule
   MatMenuModule
 ]
 declarations: [
   CardStackComponent
   UnitCardComponent
   SimplecardComponent
 ]
 providers: [
   CardService
 ]
 exports: [
   CardStackComponent
   SimplecardComponent
 ]
})
export class CardsModule { }

As you can see it is providing CardService along with some other components like SimplecardComponent . I have a second "consumer" module which wants to use SimplecardComponent like so,

imports: [
   CommonModule,
   CardsModule
 ],
 declarations: [
   SomeComponent
 ],
 providers: [],
 exports: [
   SomeComponent
 ]
export class SharedModule {}

So, I've imported CardsModule here to be able to use SimplecardComponent in this module. Now, I'd like to also use the provided CardService in the declared SomeComponent . How can I do this?

I feel like importing the CardService directly in the SharedComponent like

import { CardService } from '<path to card-service.ts>';

nullifies the whole point of putting it in CardsModule .

Is there no other way of doing this other than directly accessing the path to card-service.ts?

If not, what then is the point of saying that the CardsModule provides the CardService?

标签： angular