Angular4 routes not working after page refresh

Question

Angular 4 routes not working after page refresh. It's worked before. Currently when page refresh route is going to login page(default Route) it should stay on same route.

localhost:4200/dashboard if we refresh this page it's going to localhost:4200/login

I don't know whats changes is made in project suddenly it's stopped working. Please help.

Package.json

{
  "name": "Projectname",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@aspnet/signalr-client": "^1.0.0-alpha2-final",
    "@types/signalr": "^2.2.35",
    "angular": "^1.6.9",
    "angular-datatables": "^5.0.0",
    "angular-localstorage": "^1.1.5",
    "angular-rateit": "^4.0.2",
    "angular-sortablejs": "^2.5.1",
    "angular-star-rating": "^3.0.8",
    "angular2-draggable": "^1.1.0-beta.0",
    "angular2-focus": "^1.1.1",
    "angular4-color-picker": "^1.4.2",
    "angular4-files-upload": "^1.0.2",
    "async": "^2.6.0",
    "auth0": "^2.9.1",
    "auth0-js": "^9.4.1",
    "core-js": "^2.4.1",
    "datatables.net": "^1.10.16",
    "datatables.net-dt": "^1.10.16",
    "datatables.net-responsive": "^2.2.1",
    "datatables.net-responsive-dt": "^2.2.1",
    "lodash": "^4.8.0",
    "ng-file-upload": "^12.2.13",
    "ng2-dnd": "^5.0.2",
    "ng2-file-upload": "^1.3.0",
    "ng2-toastr": "^4.1.2",
    "ngx-ckeditor": "^0.1.1",
    "ngx-color-picker": "^5.3.0",
    "ngx-drag-drop": "^1.0.3",
    "ngx-editor": "^3.2.1",
    "ngx-file-drop": "^2.0.2",
    "ngx-loading": "^1.0.14",
    "ngx-rating": "0.0.9",
    "ngx-toastr": "^8.1.0",
    "ngx-uploader": "^4.2.2",
    "rxjs": "^5.5.2",
    "signalr": "^2.2.3",
    "sortablejs": "^1.7.0",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.7.3",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/datatables.net": "^1.10.9",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

Route File

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard-components/dashboard/dashboard.component';
import { AuthGuard } from './auth-guard.service';
import { ResetPasswordComponent } from './reset-password/reset-password.component';
import { createTemplateData } from '@angular/core/src/view/refs';
import { ErrorPageComponent } from './components/error-page/error-page.component';
import { UserLogComponent } from './Views/user-log/user-log.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
    //canLogIn:[AuthGuard]
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'reset-password',
    component: ResetPasswordComponent
  },
  {
    path: '404',
    component: ErrorPageComponent
  },
  {
    path:'logs',
    component:UserLogComponent,
    canActivate: [AuthGuard]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  declarations: [],
  exports: [RouterModule]
})
export class AppRoutingModule { }

One more thing when i use ng serve it's showing angular cli warning.

Your global Angular CLI version (1.7.4) is greater than your local version (1.7.3). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".

Answer 1

1) Your authguard is redirecting you to login, because you aren't logged in ( inmediatly ) on refresh.

2) About the CLI warning

In your devDependencies you have:

"@angular/cli": "1.7.3",

Globally you have installed @angular/[email protected] That's why the CLI is complaining.

If you want to keep @angular/[email protected] in your application and avoid the warning you can do what's mentioned:

ng set --global warnings.versionMismatch=false 

Or install the same version globally

npm i -g @angular/[email protected]