NullInjectorError: No provider for Service! Angular

Error while calling a page in Angular:

core.mjs:6485 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(..Module)[...Service -> ..Service -> ...Service -> ...Service]:
NullInjectorError: No provider for ...Service!
NullInjectorError: R3InjectorError(...PageModule)[...Service -> ...Service -> ...Service -> ...Service]:
NullInjectorError: No provider for ...Service!
at NullInjector.get (core.mjs:11145:1)
at R3Injector.get (core.mjs:11312:1)
at R3Injector.get (core.mjs:11312:1)
at R3Injector.get (core.mjs:11312:1)
at NgModuleRef.get (core.mjs:21872:1)

The solution is to add the service in the providers section in your module. Go to the module where you want to use that service and add the service as following:

@NgModule({
  imports: [......],
  declarations: [.....],
  providers: [...., YourService]
})
export class YourModule {}

In the above code the YourService was added like this in the providers:

providers: [...., YourService]