I am facing an issue in my home component, which is a child of the Dashboard component. The object connectedUser injected in layoutService appears to be undefined in the home component (home userID & home connectedUser in home component logs); Is there something missing here?
home.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HomeRoutingModule } from './home-routing.module';
import { HomeComponent } from './home.component';
@NgModule({
imports: [
CommonModule,
ReactiveFormsModule,
HomeRoutingModule,
FormsModule
],
declarations: [
HomeComponent
],
providers: [
]
})
export class HomeModule {}
dashboard.component.ts
import { Component, OnInit } from '@angular/core';
import { UserConnected } from 'src/app/models/userConnected';
import { LayoutService } from '../services/layout.service';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
currentDate: String;
userSaml = new UserConnected();
constructor(public layoutService: LayoutService) { }
ngOnInit(): void {
var today = new Date();
this.currentDate = today.getDate() + '/' + (today.getMonth() + 1) + '/' + today.getFullYear();
this.layoutService.getConnectedUser().subscribe(
(data) => {
this.userSaml = data;
this.layoutService.connectedUser.matricule = this.userSaml.matricule;
this.layoutService.connectedUser.profil = this.userSaml.profil;
this.layoutService.connectedUser.uid = this.userSaml.uid;
this.layoutService.connectedUser.username = this.userSaml.username;
this.layoutService.connectedUser.city = this.userSaml.city;
},
(err) => {
throw err;
}
);
}
}
app-routine.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AppComponent } from './app.component';
import { DashboardComponent } from './shared/layout/dashboard/dashboard.component';
export const routes: Routes = [
{
path: '',
component: DashboardComponent
, children: [
{
path: '',
loadChildren: './home/home.module#HomeModule'
},
{
path: 'rapport',
loadChildren: '../rapport/rapport.module#RapportModule'
},
{
path: 'admin',
loadChildren: './admin/admin.module#AdminModule'
}
]
}];
@NgModule({
imports: [
RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
home.component.ts
import { Component, OnInit } from '@angular/core';
import { LayoutService } from '../shared/layout/services/layout.service';
import { UserConnected } from '../models/userConnected';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(public layoutService: LayoutService) { }
userID: string;
userExists : boolean = false;
connectedUser = new UserConnected;
ngOnInit() : void {
this.connectedUser = this.layoutService.connectedUser;
console.log("home connectedUser" + JSON.stringify(this.connectedUser));
this.userID = this.connectedUser.uid;
console.log("home userID" + this.userID);
this.adminService.verifyUser(this.userID)
.subscribe(
(data) => {
this.userExists = true;
},
(err) => {
this.userExists = false;
}
);
}
}
layoutService
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from '../../../../environments/environment';
import { UserConnected } from 'src/app/models/userConnected';
@Injectable({
providedIn: 'root'
})
export class LayoutService {
connectedUser : UserConnected;
constructor(private http:HttpClient) { }
getConnectedUser(){
return this.http.get<UserConnected>(environment.RAA_ROOT + '/connectedUser');
}
}