Service structure

my.service.ts

This is an example on how the service.ts should be structured

Global services

This service will be injected into the app.module.ts

@Injectable({
providedIn: 'root',
})
export class sessionService {/** ... **/}

List of services that should or could be imported this way:

  • global services
// Folder structure
src
└── app
└── core
└── services
├── [name].service.ts
├── session.service.ts // example
└── dal.service.ts // example
  • services used as shared component
// Folder structure
src
└── app
└── shared
└── component
└── component-overlay
├── component-overlay.component.html
├── component-overlay.component.ts
├── component-overlay.module.ts
└── component-overlay.service.ts // <-- Here

Local services

This service will be injected into the component module

@Injectable()
export class myComponentService {/** ... **/}
// Folder structure
src
└── app
└── pages
└── [page]
├── [page].component.html
├── [page].component.ts
├── [page].module.ts
└── [page].service.ts
// [page].module.ts
@NgModule({
declarations: [],
imports: [],
providers: [myComponentService], // <-- Here
})