CODEWITHSUNDEEP
angularmoduleangular-servicessharedangular-components
qbvp
qbvp

Reputation: 31

Can I use a service ,on a component, that has been provided from a shared module?

I don't know if what I am trying to do is possible. I have imported SharedModule on AppModule with forRoot method. And then, I have imported SharedModule on the general component that I need it, like this:

App.module.ts : 

> import { BrowserModule } from '@angular/platform-browser'; import {
> NgModule } from '@angular/core'; import { SharedModule } from
> './shared/shared.module'; import { HttpClientModule } from
> '@angular/common/http'; import { AppComponent } from
> './app.component'; import { ClinicaComponent } from
> './clinica/clinica.component'; import { ClinicaModule } from
> './clinica/clinica.module'; import { AppRoutingModule } from
> './/app-routing.module'; import { ProfesionalComponent } from
> './profesional/profesional.component'; import { ProfesionalModule }
> from './profesional/profesional.module';
> 
> @NgModule({
>     imports: [
>         BrowserModule,
>         ClinicaModule,
>         ProfesionalModule,
>         SharedModule.forRoot(),
>         AppRoutingModule,
>         HttpClientModule,
>     ],
>     declarations: [
>       ClinicaComponent,
>       AppComponent,
>       ProfesionalComponent
> 
>     ],
>     providers: [],
>     bootstrap: [AppComponent] }) export class AppModule { }

Shared.module.ts : 

export const GlobalProviders = [ //para los global providers
  {
        provide: AuthServiceConfig,
        useFactory: getAuthServiceConfigs
      },
   AuthenticationService, UserService, AlertService, ProfesionalService, ServiciosService, ClinicService
];
@NgModule({
    imports: [
        CommonModule,
        //SharedRoutingModule,
        FormsModule,
        ReactiveFormsModule,
        SocialLoginModule
    ],
    declarations: [LoginComponent,
       HeaderComponent,
       NotFoundComponent,
       MyfooterComponent,
       RequiredLabelDirective],
    exports: [
        RouterModule,
        HeaderComponent,
        MyfooterComponent,
        RequiredLabelDirective,
        FormsModule,
        ReactiveFormsModule
    ]
})
export class SharedModule {

   static forRoot(): ModuleWithProviders {
        return {
            ngModule: SharedModule,
            providers: [GlobalProviders]
        };
    }

So, I want to use the GlobalProviders from a sibling component of Profesional Component, MisDatosComponent. This is my profesional.component.ts: 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GestionProfesionalesComponent } from './gestion-profesionales/gestion-profesionales.component';
import { MisDatosComponent } from './profile/profile.component';
import { SharedModule } from '../shared/shared.module';

@NgModule({
  imports: [
    CommonModule,
    SharedModule
  ],
  declarations: [ MisDatosComponent, GestionProfesionalesComponent]
})
export class ProfesionalModule { }

This is the structure of the project for you to understand me:

structure

So I thought that when I imported sharedModule in ProfesionalModule, and as I imported also sharedModule in ProfileComponent, I could use the service that provides the sharedModule. But It doesn't recognised it and I have to import the services one by one in ProfileComponent. Someone who can help me???

Upvotes: 0

Views: 852

Answers (1)

Keenan Diggs
Keenan Diggs

Reputation: 2342

To answer your question literally, yes. If you add services to the providers array of an ngModule, and then have a second ngModule import the first, the components of the second will have access to the providers of the first.

This article from the docs has a good explanation, including ways to limit this provider sharing when it's unwanted: https://angular.io/guide/providers#providedin-and-ngmodules

Upvotes: 1

Related Questions