I m facing very strange issue. My angular application page is displaying properly. It seems its not fully loaded, and when I m manually reloading/refreshing the page, its loading fine.
Here is the full scenario. I created a login page which displays perfectly and working as expected. After login I m navigating to my dashboard page which is not showing properly, seems half loaded, but when manually refresh its work fine. After inspecting elements, I found that the contents of dashboard is there but not showing properly. there is no any error in console as well
Here is my app-routing.module.ts code:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { MainLayoutComponent } from './main-layout/main-layout.component';
const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'dashboard', component: MainLayoutComponent },
{ path: '', pathMatch: "full", redirectTo: 'dashboard' },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
And here is my login.component.ts
declare var $: any;
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Common } from '../Common/common';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
encapsulation: ViewEncapsulation.None
})
export class LoginComponent implements OnInit {
constructor(private httpClient: HttpClient, private router: Router) { }
form: any;
submitModel: any = {
username: "",
password: ""
};
ngOnInit(): void {
this.form = $('#myloginform').parsley();
localStorage.clear();
}
SubmitForm() {
if ($("#myloginform").parsley().validate()) {
$(".preloader").show();
this.httpClient.post<any>(Common.APIUrl + "login", this.submitModel, { withCredentials: true }).subscribe(
{
next: data => {
console.log(data);
localStorage.setItem("token", data.result);
this.router.navigate(['dashboard']);
},
error: error => {
console.error(error);
},
complete: function () {
console.log("complete");
$(".preloader").hide();
}
}
);
}
}
}
Here is my main-layout.component.ts
declare var $: any;
import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
import { Common } from '../Common/common';
@Component({
selector: 'app-main-layout',
templateUrl: './main-layout.component.html',
styleUrls: ['./main-layout.component.css'],
encapsulation: ViewEncapsulation.None
})
export class MainLayoutComponent implements OnInit {
constructor(private httpClient: HttpClient, private router: Router) { }
ngOnInit(): void {
console.log("MainLayoutComponent - on init called")
}
Logout() {
$(".preloader").show();
this.httpClient.get<any>(Common.APIUrl + "logout", { withCredentials: true }).subscribe(
{
next: data => {
localStorage.clear();
this.router.navigate(['login']);
},
error: error => {
console.error(error);
},
complete: function () {
$(".preloader").hide();
}
}
);
}
}
Currently facing like this: 
Expected result: 
Additional Info: when I m logging out, its navigating to Login page properly. I have added all references of jQuery/Bootstrap + additional plugin in my index html page.
I m new to angular and this is my first question in StackOverflow. Please forgive me, if I couldn't explain better. Thanks in advance
I removed the content from Dashboard and just added one <h1> tag. it is displaying
Index.html
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex,nofollow">
<base href="/">
<title>Employee App</title>
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon.png">
<!-- Custom CSS -->
<link href="assets/dist/css/style.min.css" rel="stylesheet">
<link href="assets/dist/css/style.extended.css" rel="stylesheet">
</head>
<body>
<app-root></app-root>
<script src="assets/libs/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<!--Parsley -->
<script src="assets/extra-libs/parsley/parsley.js"></script>
<!-- apps -->
<script src="assets/dist/js/app.min.js"></script>
<script src="assets/dist/js/app.init.js"></script>
<script src="assets/dist/js/app-style-switcher.js"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="assets/libs/jquery-sparkline/jquery.sparkline.min.js"></script>
<!--Wave Effects -->
<script src="assets/dist/js/waves.js"></script>
<!--Menu sidebar -->
<script src="assets/dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="assets/dist/js/feather.min.js"></script>
<script src="assets/dist/js/custom.min.js"></script>
</body>
</html>
MainLayout.component.html
<div id="main-wrapper">
<header class="topbar">
<nav class="navbar top-navbar navbar-expand-md navbar-dark">
<div class="navbar-header">
<a class="nav-toggler waves-effect waves-light d-block d-md-none" href=""><i class="ti-menu ti-close"></i></a>
<a class="navbar-brand" href="">
<b class="logo-icon">
<img src="../assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo" />
</b>
<span class="logo-text">
<img src="../assets/images/logo-text.png" alt="homepage" class="dark-logo" />
<img src="../assets/images/logo-light-text.png" class="light-logo" alt="homepage" />
</span>
</a>
<a class="topbartoggler d-block d-md-none waves-effect waves-light" href="" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><i class="ti-more"></i></a>
</div>
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item d-none d-md-block"><a class="nav-link sidebartoggler waves-effect waves-light" href="" data-sidebartype="mini-sidebar"><i class="icon-arrow-left-circle"></i></a></li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark pro-pic" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="../assets/images/users/1.jpg" alt="user" class="rounded-circle" width="31"></a>
<div class="dropdown-menu dropdown-menu-right user-dd animated flipInY">
<div class="d-flex no-block align-items-center p-3 mb-2 border-bottom">
<div class=""><img src="../assets/images/users/1.jpg" alt="user" class="rounded" width="80"></div>
<div class="ml-2">
<h4 class="mb-0">Steave Jobs</h4>
<p class=" mb-0">varun@gmail.com</p>
<a href="profile.html" class="btn btn-rounded btn-danger btn-sm">View Profile</a>
</div>
</div>
<a class="dropdown-item" href="" (click)="Logout()"><i class="fa fa-power-off mr-1 ml-1"></i> Logout</a>
</div>
</li>
</ul>
</div>
</nav>
</header>
<aside class="left-sidebar">
<div class="scroll-sidebar">
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li class="nav-small-cap"><i class="mdi mdi-dots-horizontal"></i> <span class="hide-menu">Personal</span></li>
<li class="sidebar-item">
<a href="" class="sidebar-link waves-effect waves-dark" aria-expanded="false"><i data-feather="link" class="feather-icon"></i><span class="hide-menu">Sample Link</span></a>
</li>
<li class="sidebar-item">
<a class="sidebar-link has-arrow waves-effect waves-dark" href="" aria-expanded="false"><i data-feather="map" class="feather-icon"></i><span class="hide-menu">Sample Link</span></a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item"><a href="map-google.html" class="sidebar-link"><i class="mdi mdi-adjust"></i><span class="hide-menu">Google Maps</span></a></li>
<li class="sidebar-item"><a href="map-vector.html" class="sidebar-link"><i class="mdi mdi-adjust"></i><span class="hide-menu">Vector Maps</span></a></li>
</ul>
</li>
<li class="sidebar-item">
<a class="sidebar-link has-arrow waves-effect waves-dark" href="" aria-expanded="false"><i data-feather="git-pull-request" class="feather-icon"></i><span class="hide-menu">Multi level dd</span></a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item"><a href="" class="sidebar-link"><i class="mdi mdi-octagram"></i><span class="hide-menu">item 1.1</span></a></li>
<li class="sidebar-item"><a href="" class="sidebar-link"><i class="mdi mdi-octagram"></i><span class="hide-menu">item 1.2</span></a></li>
<li class="sidebar-item">
<a class="has-arrow sidebar-link" href="" aria-expanded="false"><i class="mdi mdi-playlist-plus"></i> <span class="hide-menu">Menu 1.3</span></a>
<ul aria-expanded="false" class="collapse second-level">
<li class="sidebar-item"><a href="" class="sidebar-link"><i class="mdi mdi-octagram"></i><span class="hide-menu"> item 1.3.1</span></a></li>
<li class="sidebar-item"><a href="" class="sidebar-link"><i class="mdi mdi-octagram"></i><span class="hide-menu"> item 1.3.2</span></a></li>
<li class="sidebar-item"><a href="" class="sidebar-link"><i class="mdi mdi-octagram"></i><span class="hide-menu"> item 1.3.3</span></a></li>
<li class="sidebar-item"><a href="" class="sidebar-link"><i class="mdi mdi-octagram"></i><span class="hide-menu"> item 1.3.4</span></a></li>
</ul>
</li>
<li class="sidebar-item"><a href="" class="sidebar-link"><i class="mdi mdi-playlist-check"></i><span class="hide-menu"> item 1.4</span></a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="sidebar-footer">
<a href="" class="link" data-toggle="tooltip" title="Settings"><i class="ti-settings"></i></a>
<a href="" class="link" data-toggle="tooltip" title="Email"><i class="mdi mdi-gmail"></i></a>
<a href="" class="link" data-toggle="tooltip" title="Logout"><i class="mdi mdi-power"></i></a>
</div>
</aside>
<div class="page-wrapper">
<!--<router-outlet></router-outlet>-->
<footer class="footer">
© 2020 Monster Admin by wrappixel.com
</footer>
</div>
</div>
ReplyDeleteWhat did you do to solve this problem please?