Angular Hide Navbar Menu from Login page

I have implemented a nav bar show/hide for login/logout for user in my angular 5 app, this is my reference

https://loiane.com/2017/08/angular-hide-navbar-login-page/

this works fine in my local, but fails when deployed. what could be the issue. I'm using the code as it is with minor changes.

Auth Gard

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot):
Observable<boolean> {

return this.authService.isLoggedIn.pipe(
take(1),
map((isLoggedIn: boolean) => {
if (!isLoggedIn) {
this.router.navigate(['/login']);
return false;
}
return true;
})
);

}


Auth service

private loggedIn: BehaviorSubject<boolean> = new
BehaviorSubject<boolean>(false);

get isLoggedIn() {
this.login();
return this.loggedIn.asObservable();
}

constructor(private router: Router, private sessionService:
SessionService) {}

login() {
const userSession = this.sessionService.get('userEmail');
this.loggedIn.next(userSession !== null ? true : false);
}

logout() {
this.loggedIn.next(false);
this.router.navigate(['/login']);
}


Header Component

isLoggedIn$: Observable<boolean>;
userImage: string;

constructor(private sessionService: SessionService, private authService:
AuthService, private route: ActivatedRoute) {
this.route.params.subscribe(val => {
this.isLoggedIn$ = this.authService.isLoggedIn;
});
}

ngOnInit() {

this.isLoggedIn$ = this.authService.isLoggedIn;
const img = this.sessionService.get('userImage');
this.userImage = img === null ? '' : <string>img;

}

toggleMenu() {
this.showMenu = !this.showMenu;
console.log(this.showMenu);
}


Header Html

<ul class="header_main_nav condensed" *ngIf="isLoggedIn$.source._value">
<li class="routlink">
<a [routerLink]="['/agileBomRefLnk']" routerLinkActive="active">
<span class="glyphicon glyphicon-search"></span>
<span class="link-text">Agile BOM</span>
</a>
</li>
</ul>

Continue reading...