angularangular4-router

Angular4 routes not working after page refresh


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".


Solution

  • 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/cli@1.7.4 That's why the CLI is complaining.

    If you want to keep @angular/cli@1.7.3 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/cli@1.7.3