Mixing
Component not rendered unless refreshed in Angular 6+
0
After an authentication, the app redirects to a dashboard. This dashboard has a sidebar and all the router links changes the path name in the address bar but not rendering the component unless the page is manually reloaded.
this is my main app.component.html code:
<div *ngIf="isLogged" class="dashboard">
<app-navbar></app-navbar>
<div class="container-fluid">
<div class="row navbar-expand-md">
<app-sidebar></app-sidebar>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
</div>
<router-outlet></router-outlet>
</main>
</div>
</div>
</div>
<div *ngIf="!isLogged" class="plain-page">
<router-outlet></router-outlet>
</div>
and this is the app.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthguardService } from './services/authguard.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
title = 'App';
isLogged: boolean = false;
constructor (
private router: Router,
private authguardService: AuthguardService
){}
ngOnInit(){
// this.isLogged = this.authguardService.canActivate();
this.authguardService.authStatus.subscribe(
(data: boolean) => {
this.isLogged = data;
}
);
}
}
Now this is my router.module
import { NgModule } from '@angular/core';
import { RouterModule, Routes, CanActivate } from '@angular/router';
import { AuthguardService as Authguard } from './services/authguard.service';
import { LoginComponent } from './pages/login/login.component';
import { SignupComponent } from './pages/signup/signup.component';
import { UsersComponent } from './pages/users/users.component';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { Google2FAComponent } from './pages/google2-fa/google2-fa.component';
import { RolesComponent } from './pages/roles/roles.component';
import { FileUploadComponent } from './pages/merchant/file-upload/file-upload.component';
const appRoutes: Routes = [
{
path: 'login',
component: LoginComponent
},
{
path: 'signup',
component: SignupComponent
},
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full'
},
{
path: 'google2fa/:id',
component: Google2FAComponent,
canActivate: [Authguard]
},
{
path: 'dashboard',
component: DashboardComponent,
canActivate: [Authguard]
},
{
path: 'users',
component: UsersComponent,
canActivate: [Authguard]
},
{
path: 'roles',
component: RolesComponent,
canActivate: [Authguard]
},
{
path: 'file-upload',
component: FileUploadComponent,
canActivate: [Authguard]
}
]
@NgModule({
declarations: ,
imports: [
RouterModule.forRoot(appRoutes, {onSameUrlNavigation: 'reload'})
],
exports: [RouterModule]
})
export class RoutesModule { }
And this is the AuthguardService
import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { TokenService } from './token.service';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthguardService implements CanActivate {
private isLoggedIn = new BehaviorSubject<boolean>(this.tokenService.loggedIn());
authStatus = this.isLoggedIn.asObservable()
constructor(
private router: Router,
private tokenService: TokenService
) {}
canActivate(): boolean {
if (!this.tokenService.loggedIn()) {
this.router.navigate(['login']);
return false;
}
return true;
}
changeAuthStatus(value: boolean){
this.isLoggedIn.next(value);
}
}
What is the problem why the components were not rendered after logging in and needs to be manually reloaded for it to be rendered?
angular angular6 angular7
asked Nov 21 '18 at 14:17
Jay MarzJay Marz
56941837
add a comment |
0
After an authentication, the app redirects to a dashboard. This dashboard has a sidebar and all the router links changes the path name in the address bar but not rendering the component unless the page is manually reloaded.
this is my main app.component.html code:
<div *ngIf="isLogged" class="dashboard">
<app-navbar></app-navbar>
<div class="container-fluid">
<div class="row navbar-expand-md">
<app-sidebar></app-sidebar>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
</div>
<router-outlet></router-outlet>
</main>
</div>
</div>
</div>
<div *ngIf="!isLogged" class="plain-page">
<router-outlet></router-outlet>
</div>
and this is the app.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthguardService } from './services/authguard.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
title = 'App';
isLogged: boolean = false;
constructor (
private router: Router,
private authguardService: AuthguardService
){}
ngOnInit(){
// this.isLogged = this.authguardService.canActivate();
this.authguardService.authStatus.subscribe(
(data: boolean) => {
this.isLogged = data;
}
);
}
}
Now this is my router.module
import { NgModule } from '@angular/core';
import { RouterModule, Routes, CanActivate } from '@angular/router';
import { AuthguardService as Authguard } from './services/authguard.service';
import { LoginComponent } from './pages/login/login.component';
import { SignupComponent } from './pages/signup/signup.component';
import { UsersComponent } from './pages/users/users.component';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { Google2FAComponent } from './pages/google2-fa/google2-fa.component';
import { RolesComponent } from './pages/roles/roles.component';
import { FileUploadComponent } from './pages/merchant/file-upload/file-upload.component';
const appRoutes: Routes = [
{
path: 'login',
component: LoginComponent
},
{
path: 'signup',
component: SignupComponent
},
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full'
},
{
path: 'google2fa/:id',
component: Google2FAComponent,
canActivate: [Authguard]
},
{
path: 'dashboard',
component: DashboardComponent,
canActivate: [Authguard]
},
{
path: 'users',
component: UsersComponent,
canActivate: [Authguard]
},
{
path: 'roles',
component: RolesComponent,
canActivate: [Authguard]
},
{
path: 'file-upload',
component: FileUploadComponent,
canActivate: [Authguard]
}
]
@NgModule({
declarations: ,
imports: [
RouterModule.forRoot(appRoutes, {onSameUrlNavigation: 'reload'})
],
exports: [RouterModule]
})
export class RoutesModule { }
And this is the AuthguardService
import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { TokenService } from './token.service';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthguardService implements CanActivate {
private isLoggedIn = new BehaviorSubject<boolean>(this.tokenService.loggedIn());
authStatus = this.isLoggedIn.asObservable()
constructor(
private router: Router,
private tokenService: TokenService
) {}
canActivate(): boolean {
if (!this.tokenService.loggedIn()) {
this.router.navigate(['login']);
return false;
}
return true;
}
changeAuthStatus(value: boolean){
this.isLoggedIn.next(value);
}
}
What is the problem why the components were not rendered after logging in and needs to be manually reloaded for it to be rendered?
angular angular6 angular7
asked Nov 21 '18 at 14:17
Jay MarzJay Marz
56941837
What's your this.authguardService.authStatus? does the subscribe occurs?
– moi_meme
Nov 21 '18 at 14:28
@moi_meme I have edited and included theAuthguardServicecode. And yes the subscription occurs
– Jay Marz
Nov 21 '18 at 14:49
add a comment |
0
0
0
After an authentication, the app redirects to a dashboard. This dashboard has a sidebar and all the router links changes the path name in the address bar but not rendering the component unless the page is manually reloaded.
this is my main app.component.html code:
<div *ngIf="isLogged" class="dashboard">
<app-navbar></app-navbar>
<div class="container-fluid">
<div class="row navbar-expand-md">
<app-sidebar></app-sidebar>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
</div>
<router-outlet></router-outlet>
</main>
</div>
</div>
</div>
<div *ngIf="!isLogged" class="plain-page">
<router-outlet></router-outlet>
</div>
and this is the app.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthguardService } from './services/authguard.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
title = 'App';
isLogged: boolean = false;
constructor (
private router: Router,
private authguardService: AuthguardService
){}
ngOnInit(){
// this.isLogged = this.authguardService.canActivate();
this.authguardService.authStatus.subscribe(
(data: boolean) => {
this.isLogged = data;
}
);
}
}
Now this is my router.module
import { NgModule } from '@angular/core';
import { RouterModule, Routes, CanActivate } from '@angular/router';
import { AuthguardService as Authguard } from './services/authguard.service';
import { LoginComponent } from './pages/login/login.component';
import { SignupComponent } from './pages/signup/signup.component';
import { UsersComponent } from './pages/users/users.component';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { Google2FAComponent } from './pages/google2-fa/google2-fa.component';
import { RolesComponent } from './pages/roles/roles.component';
import { FileUploadComponent } from './pages/merchant/file-upload/file-upload.component';
const appRoutes: Routes = [
{
path: 'login',
component: LoginComponent
},
{
path: 'signup',
component: SignupComponent
},
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full'
},
{
path: 'google2fa/:id',
component: Google2FAComponent,
canActivate: [Authguard]
},
{
path: 'dashboard',
component: DashboardComponent,
canActivate: [Authguard]
},
{
path: 'users',
component: UsersComponent,
canActivate: [Authguard]
},
{
path: 'roles',
component: RolesComponent,
canActivate: [Authguard]
},
{
path: 'file-upload',
component: FileUploadComponent,
canActivate: [Authguard]
}
]
@NgModule({
declarations: ,
imports: [
RouterModule.forRoot(appRoutes, {onSameUrlNavigation: 'reload'})
],
exports: [RouterModule]
})
export class RoutesModule { }
And this is the AuthguardService
import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { TokenService } from './token.service';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthguardService implements CanActivate {
private isLoggedIn = new BehaviorSubject<boolean>(this.tokenService.loggedIn());
authStatus = this.isLoggedIn.asObservable()
constructor(
private router: Router,
private tokenService: TokenService
) {}
canActivate(): boolean {
if (!this.tokenService.loggedIn()) {
this.router.navigate(['login']);
return false;
}
return true;
}
changeAuthStatus(value: boolean){
this.isLoggedIn.next(value);
}
}
What is the problem why the components were not rendered after logging in and needs to be manually reloaded for it to be rendered?
angular angular6 angular7
asked Nov 21 '18 at 14:17
Jay MarzJay Marz
56941837
After an authentication, the app redirects to a dashboard. This dashboard has a sidebar and all the router links changes the path name in the address bar but not rendering the component unless the page is manually reloaded.
this is my main app.component.html code:
<div *ngIf="isLogged" class="dashboard">
<app-navbar></app-navbar>
<div class="container-fluid">
<div class="row navbar-expand-md">
<app-sidebar></app-sidebar>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
</div>
<router-outlet></router-outlet>
</main>
</div>
</div>
</div>
<div *ngIf="!isLogged" class="plain-page">
<router-outlet></router-outlet>
</div>
and this is the app.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthguardService } from './services/authguard.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
title = 'App';
isLogged: boolean = false;
constructor (
private router: Router,
private authguardService: AuthguardService
){}
ngOnInit(){
// this.isLogged = this.authguardService.canActivate();
this.authguardService.authStatus.subscribe(
(data: boolean) => {
this.isLogged = data;
}
);
}
}
Now this is my router.module
import { NgModule } from '@angular/core';
import { RouterModule, Routes, CanActivate } from '@angular/router';
import { AuthguardService as Authguard } from './services/authguard.service';
import { LoginComponent } from './pages/login/login.component';
import { SignupComponent } from './pages/signup/signup.component';
import { UsersComponent } from './pages/users/users.component';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { Google2FAComponent } from './pages/google2-fa/google2-fa.component';
import { RolesComponent } from './pages/roles/roles.component';
import { FileUploadComponent } from './pages/merchant/file-upload/file-upload.component';
const appRoutes: Routes = [
{
path: 'login',
component: LoginComponent
},
{
path: 'signup',
component: SignupComponent
},
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full'
},
{
path: 'google2fa/:id',
component: Google2FAComponent,
canActivate: [Authguard]
},
{
path: 'dashboard',
component: DashboardComponent,
canActivate: [Authguard]
},
{
path: 'users',
component: UsersComponent,
canActivate: [Authguard]
},
{
path: 'roles',
component: RolesComponent,
canActivate: [Authguard]
},
{
path: 'file-upload',
component: FileUploadComponent,
canActivate: [Authguard]
}
]
@NgModule({
declarations: ,
imports: [
RouterModule.forRoot(appRoutes, {onSameUrlNavigation: 'reload'})
],
exports: [RouterModule]
})
export class RoutesModule { }
And this is the AuthguardService
import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { TokenService } from './token.service';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthguardService implements CanActivate {
private isLoggedIn = new BehaviorSubject<boolean>(this.tokenService.loggedIn());
authStatus = this.isLoggedIn.asObservable()
constructor(
private router: Router,
private tokenService: TokenService
) {}
canActivate(): boolean {
if (!this.tokenService.loggedIn()) {
this.router.navigate(['login']);
return false;
}
return true;
}
changeAuthStatus(value: boolean){
this.isLoggedIn.next(value);
}
}
What is the problem why the components were not rendered after logging in and needs to be manually reloaded for it to be rendered?
angular angular6 angular7
angular angular6 angular7
asked Nov 21 '18 at 14:17
Jay MarzJay Marz
56941837
asked Nov 21 '18 at 14:17
Jay MarzJay Marz
56941837
edited Nov 21 '18 at 14:49
Jay Marz
asked Nov 21 '18 at 14:17
Jay MarzJay Marz
56941837
asked Nov 21 '18 at 14:17
Jay MarzJay Marz
56941837
asked Nov 21 '18 at 14:17
Jay MarzJay Marz
56941837
56941837
What's your this.authguardService.authStatus? does the subscribe occurs?
– moi_meme
Nov 21 '18 at 14:28
@moi_meme I have edited and included theAuthguardServicecode. And yes the subscription occurs
– Jay Marz
Nov 21 '18 at 14:49
add a comment |
What's your this.authguardService.authStatus? does the subscribe occurs?
– moi_meme
Nov 21 '18 at 14:28
@moi_meme I have edited and included theAuthguardServicecode. And yes the subscription occurs
– Jay Marz
Nov 21 '18 at 14:49
What's your this.authguardService.authStatus? does the subscribe occurs?
– moi_meme
Nov 21 '18 at 14:28
What's your this.authguardService.authStatus? does the subscribe occurs?
– moi_meme
Nov 21 '18 at 14:28
@moi_meme I have edited and included the
AuthguardService code. And yes the subscription occurs– Jay Marz
Nov 21 '18 at 14:49
@moi_meme I have edited and included the
AuthguardService code. And yes the subscription occurs– Jay Marz
Nov 21 '18 at 14:49
add a comment |
1 Answer
1
active
oldest
votes
0
I think that the problem here might be that due to the Angular Component Lifecycle, the suscribe is never resolving because the component is not shown at the very beginning, please include the following in the constructor:
export class AppComponent implements OnInit{
title = 'App';
isLogged: boolean = false;
constructor (
private router: Router,
private authguardService: AuthguardService
){
this.authguardService.authStatus.subscribe(
(data: boolean) => {
this.isLogged = data;
}
}
// remove the subscribe from the ngOnInit()
answered Nov 21 '18 at 14:27
JoSeTe4everJoSeTe4ever
395315
I have tried this but same result. I have updated my question with myAuthguardServicecode.
– Jay Marz
Nov 21 '18 at 14:50
@Jay. Try removing this.<div *ngIf="!isLogged" class="plain-page"> <router-outlet></router-outlet> </div>. Your resolver should guard your component. So it does not matter what the route is, angular will reroute it defined by your resolver. Hope this helps.
– harold_mean2
Nov 21 '18 at 15:31
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53414066%2fcomponent-not-rendered-unless-refreshed-in-angular-6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
I think that the problem here might be that due to the Angular Component Lifecycle, the suscribe is never resolving because the component is not shown at the very beginning, please include the following in the constructor:
export class AppComponent implements OnInit{
title = 'App';
isLogged: boolean = false;
constructor (
private router: Router,
private authguardService: AuthguardService
){
this.authguardService.authStatus.subscribe(
(data: boolean) => {
this.isLogged = data;
}
}
// remove the subscribe from the ngOnInit()
answered Nov 21 '18 at 14:27
JoSeTe4everJoSeTe4ever
395315
I have tried this but same result. I have updated my question with myAuthguardServicecode.
– Jay Marz
Nov 21 '18 at 14:50
@Jay. Try removing this.<div *ngIf="!isLogged" class="plain-page"> <router-outlet></router-outlet> </div>. Your resolver should guard your component. So it does not matter what the route is, angular will reroute it defined by your resolver. Hope this helps.
– harold_mean2
Nov 21 '18 at 15:31
add a comment |
0
I think that the problem here might be that due to the Angular Component Lifecycle, the suscribe is never resolving because the component is not shown at the very beginning, please include the following in the constructor:
export class AppComponent implements OnInit{
title = 'App';
isLogged: boolean = false;
constructor (
private router: Router,
private authguardService: AuthguardService
){
this.authguardService.authStatus.subscribe(
(data: boolean) => {
this.isLogged = data;
}
}
// remove the subscribe from the ngOnInit()
answered Nov 21 '18 at 14:27
JoSeTe4everJoSeTe4ever
395315
I have tried this but same result. I have updated my question with myAuthguardServicecode.
– Jay Marz
Nov 21 '18 at 14:50
@Jay. Try removing this.<div *ngIf="!isLogged" class="plain-page"> <router-outlet></router-outlet> </div>. Your resolver should guard your component. So it does not matter what the route is, angular will reroute it defined by your resolver. Hope this helps.
– harold_mean2
Nov 21 '18 at 15:31
add a comment |
0
0
0
I think that the problem here might be that due to the Angular Component Lifecycle, the suscribe is never resolving because the component is not shown at the very beginning, please include the following in the constructor:
export class AppComponent implements OnInit{
title = 'App';
isLogged: boolean = false;
constructor (
private router: Router,
private authguardService: AuthguardService
){
this.authguardService.authStatus.subscribe(
(data: boolean) => {
this.isLogged = data;
}
}
// remove the subscribe from the ngOnInit()
answered Nov 21 '18 at 14:27
JoSeTe4everJoSeTe4ever
395315
I think that the problem here might be that due to the Angular Component Lifecycle, the suscribe is never resolving because the component is not shown at the very beginning, please include the following in the constructor:
export class AppComponent implements OnInit{
title = 'App';
isLogged: boolean = false;
constructor (
private router: Router,
private authguardService: AuthguardService
){
this.authguardService.authStatus.subscribe(
(data: boolean) => {
this.isLogged = data;
}
}
// remove the subscribe from the ngOnInit()
answered Nov 21 '18 at 14:27
JoSeTe4everJoSeTe4ever
395315
answered Nov 21 '18 at 14:27
JoSeTe4everJoSeTe4ever
395315
answered Nov 21 '18 at 14:27
JoSeTe4everJoSeTe4ever
395315
answered Nov 21 '18 at 14:27
JoSeTe4everJoSeTe4ever
395315
395315
I have tried this but same result. I have updated my question with myAuthguardServicecode.
– Jay Marz
Nov 21 '18 at 14:50
@Jay. Try removing this.<div *ngIf="!isLogged" class="plain-page"> <router-outlet></router-outlet> </div>. Your resolver should guard your component. So it does not matter what the route is, angular will reroute it defined by your resolver. Hope this helps.
– harold_mean2
Nov 21 '18 at 15:31
add a comment |
I have tried this but same result. I have updated my question with myAuthguardServicecode.
– Jay Marz
Nov 21 '18 at 14:50
@Jay. Try removing this.<div *ngIf="!isLogged" class="plain-page"> <router-outlet></router-outlet> </div>. Your resolver should guard your component. So it does not matter what the route is, angular will reroute it defined by your resolver. Hope this helps.
– harold_mean2
Nov 21 '18 at 15:31
I have tried this but same result. I have updated my question with my
AuthguardService code.– Jay Marz
Nov 21 '18 at 14:50
I have tried this but same result. I have updated my question with my
AuthguardService code.– Jay Marz
Nov 21 '18 at 14:50
@Jay. Try removing this.<div *ngIf="!isLogged" class="plain-page"> <router-outlet></router-outlet> </div>. Your resolver should guard your component. So it does not matter what the route is, angular will reroute it defined by your resolver. Hope this helps.
– harold_mean2
Nov 21 '18 at 15:31
@Jay. Try removing this.<div *ngIf="!isLogged" class="plain-page"> <router-outlet></router-outlet> </div>. Your resolver should guard your component. So it does not matter what the route is, angular will reroute it defined by your resolver. Hope this helps.
– harold_mean2
Nov 21 '18 at 15:31
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53414066%2fcomponent-not-rendered-unless-refreshed-in-angular-6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What's your this.authguardService.authStatus? does the subscribe occurs?
– moi_meme
Nov 21 '18 at 14:28
@moi_meme I have edited and included the
AuthguardServicecode. And yes the subscription occurs– Jay Marz
Nov 21 '18 at 14:49