Data from the service not available when accessed from the same level to app in Angular

Question

I have a problem related to dependency injection. I am new to Angular, the problem is that, I tried to store the logged-in user data in service and call this service in the app component that gets logged in user information from API.

The data from this service is available when I try to access it from /dashboard/* any descendant links. But when I try to access this data from /dashboard I got undefined.

The problem that I have observed is that, data from service does not get loaded until there is a change in the URL. When there is a navigation, data get loaded.

The service is registered in providers of app.module.

app.module -

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { UserProfileService } from './services/profile/user-profile.service';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        DashboardModule,
        SharedModule,
        BrowserAnimationsModule,
        MobileScreenModule,
        AuthModule,
        JwtModule
    ],
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
        UserProfileService
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module -

const routes: Routes = [
    // {path: 'auth' , redirectTo:'/auth/login'},
    {
        path: 'auth', 
        loadChildren: ()=>  import('./auth/auth.module').then(child => child.AuthModule), 
        canActivate: [PreAuthGuardService]
    },
    {
        path: 'dashboard', 
        component: DashboardComponent,
        canActivate: [PostAuthGuardService],
        loadChildren: () => import('./dashboard/dashboard.module').then((childrens) => childrens.DashboardModule)
    },
    { path: '**', redirectTo: '/auth/login' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

score 1 · Answer 1 · answered Mar 18 '21 at 17:59

1

I would suggest you remove UserProfileService from providers, but make sure you have providedIn: 'root' set. Also make sure you don't provide it anywhere else. This will make sure only one instance of the service will exist, so data should be available.

Also, guard is not a service (PostAuthGuardService), I would rename them if I were you.

answered Mar 18 '21 at 17:59

Bojan Kogoj

5,321
3
35
57

Ok thanks a lot. I would rename my guards. – Çh Furqan Hämëèd Jūtt Mar 18 '21 at 18:07
But i have the same configuration of service as you are saying. But still getting the same issue. – Çh Furqan Hämëèd Jūtt Mar 18 '21 at 18:08
I have made an experiment: i make a test module with routing and in app-routing i have loaded the children with loadChildren:... and put the dashboard in Testmodule where in app-routing i make the path as " " from children i am loading the dashboard route. This is working. – Çh Furqan Hämëèd Jūtt Mar 18 '21 at 18:11
As far my conclusion service not working with App and Dashboard at same level. – Çh Furqan Hämëèd Jūtt Mar 18 '21 at 18:11
Make sure you don't provide service in component in `/dashboard` – Bojan Kogoj Mar 18 '21 at 20:28
No, service is not provided any where. – Çh Furqan Hämëèd Jūtt Mar 19 '21 at 03:36

Data from the service not available when accessed from the same level to app in Angular

1 Answers1