DEV Community


Trouble with Angular ngOnInit

dmccolloughonegas profile image dmccolloughOneGas ・2 min read

I have an app that I inherited from somebody that left our organization.
I’m having a problem with ngOnInit not working the way I think it should.
I’m still pretty new using Angular and Observables

I can see in the console when I navigate to the component it entering the ngOnInit method, what I don’t see is the statement in the subscribe for the response being executed.
Once I’m in the component, I can refresh the page and then I can see the statement in the subscribe.

My question is why don’t I see the statement when I first navigate to the component?

Component ngOnInit method

ngOnInit(): void {'Entering ngOnInit - Home Component');

  this.profile.getProfile().subscribe((resp) => {

      this.currentUser = this.local.getObject(StorageItems.UserProfile) as IMSALUserProfile;'Current User: ', + JSON.stringify(this.currentUserInit));
Enter fullscreen mode Exit fullscreen mode

This is what my service looks like, it’s a service that is fetching user profile information from Azure Active Directory using MSAL
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { BaseService } from './base.service';
import { AuthError } from '@azure/msal-browser';
import { LoggerService } from './logger.service';
import { Observable, of } from 'rxjs';
import { IMSALUserProfile } from '../../shared/interfaces/msaluserprofile';
import { SessionService } from './session.service';
import { StorageItems } from '../../shared/interfaces/enums/storage.model';
import { LocalStorageService } from './local-storage.service';
import { UserService } from './user.service';
import { IUserInit } from '../../shared/interfaces/userinit';
providedIn: 'root'
export class UserProfileService extends BaseService {

currentUser!: IMSALUserProfile;
currentUserInit!: IUserInit;

constructor(private http: HttpClient,
private logger: LoggerService,
private session: SessionService,
private local: LocalStorageService,
private userInit: UserService) {

public getProfile(): Observable {

let sessionUser = this.session.getItem(StorageItems.UserProfile);

if (sessionUser.length !== 0) {
  this.currentUser = JSON.parse(this.session.getItem(StorageItems.UserProfile));

let profile!: IMSALUserProfile;

if (this.currentUser) {

  profile = this.currentUser as IMSALUserProfile;
} else {
    next: (profile) => {
      profile = profile;

      this.local.setItem(StorageItems.UserProfile, profile);
      this.session.setItem(StorageItems.UserProfile, JSON.stringify(profile));

      this.currentUser = profile as IMSALUserProfile;
    error: (err: AuthError) => {'Authentication error');

this.local.setItem(StorageItems.UserProfile, profile);
this.session.setItem(StorageItems.UserProfile, JSON.stringify(profile));

return of(profile);
Enter fullscreen mode Exit fullscreen mode


Discussion (1)

Editor guide
jwp profile image
John Peters

Put a debugger statement before this line, then press f12 to open dev tools on next run.

 this.currentUser = this.local.getObject(StorageItems.UserProfile) as IMSALUserProfile;
Enter fullscreen mode Exit fullscreen mode

When the debugger hits, press f10 to single step into the program but keep the browser console window open. You'll probably see some errors there.