DEV Community

loading...

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 console.info 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 console.info statement in the subscribe.

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

Component ngOnInit method

ngOnInit(): void {

  console.info('Entering ngOnInit - Home Component');

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

      this.currentUser = this.local.getObject(StorageItems.UserProfile) as IMSALUserProfile;

      console.info('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';
@Injectable({
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) {
super();
}

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 {
  this.http.get('https://graph.microsoft.com/v1.0/me')
  .subscribe({
    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) => {
      console.info('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)

pic
Editor guide
Collapse
jwp profile image
John Peters

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

debugger;
 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.