Angular 2 default route changed to child route

I have a problem with the default route, it used to work correctly, but now when I click on the domain / root page it is redirected to the authenticated dashboard page which is Lazy Load NgModule and redirected to login again since it has no credentials to authenticated user.

Why this is happening, I recently switched to angular 4.1.2 but I'm pretty sure it worked fine before and angular v2 - v4 is not the real cause of the problem.

my routes:

import { Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { HomeComponent } from './pages/home/home.component';
import { LoginComponent } from './pages/adviser/login/login.component';
// import { DashboardModule } from './pages/adviser/dashboard/dashboard.module'
import { Page404Component } from './pages/page404/page404.component';
import { AuthGuardService } from './shared/services/auth-guard.service';
import { PrivacyPolicyComponent } from './pages/privacy-policy/privacy-policy.component';
import { TermsConditionComponent } from './pages/terms-condition/terms-condition.component';

export const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'privacy-policy', component: PrivacyPolicyComponent },
  { path: 'terms-condition', component: TermsConditionComponent },
  { path: 'dashboard', canActivate: [AuthGuardService], loadChildren: 'app/pages/adviser/dashboard/dashboard.module#DashboardModule' },
  { path: 'funds', loadChildren: 'app/pages/funds/funds.module#FundsModule' },
  { path: '', pathMatch: 'full', redirectTo: '/home' },
  { path: '**', pathMatch: 'full', component: Page404Component }
];

      

My app.module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule, BrowserXhr } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';
import { appRoutes } from './app.routes';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { ContactComponent } from './pages/contact/contact.component';
import { HomeComponent } from './pages/home/home.component';
import { LoginComponent } from './pages/adviser/login/login.component';
import { DashboardModule } from './pages/adviser/dashboard/dashboard.module';
import { Page404Component } from './pages/page404/page404.component';
import { HttpService } from './shared/services/http.service';
import { InstrumentService } from './shared/services/instrument.service';
import { WindowRef } from './shared/services/window-ref.service';
import { CredentialsService } from './shared/services/credentials.service';
import { ConstantService } from './shared/services/constant.service';
import { CryptService } from './shared/services/crypt.service';
import { AuthGuardService } from './shared/services/auth-guard.service';
import { PrivacyPolicyComponent } from './pages/privacy-policy/privacy-policy.component';
import { TermsConditionComponent } from './pages/terms-condition/terms-condition.component';
import { NgProgressModule, NgProgressCustomBrowserXhr } from 'ngx-progressbar';
import { Ng2PageScrollModule } from 'ng2-page-scroll';

@NgModule({
  declarations: [
    AppComponent,
    ContactComponent,
    HomeComponent,
    LoginComponent,
    Page404Component,
    PrivacyPolicyComponent,
    TermsConditionComponent
  ],
  imports: [
    NgProgressModule,
    BrowserModule,
    BrowserAnimationsModule,
    Ng2PageScrollModule.forRoot(),
    FormsModule,
    HttpModule,
    DashboardModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [HttpService, CredentialsService, ConstantService,
    AuthGuardService, CryptService, WindowRef,InstrumentService,
    { provide: BrowserXhr, useClass: NgProgressCustomBrowserXhr }],
  bootstrap: [AppComponent]
})
export class AppModule { }

      

My Dashbaord.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { HttpService } from '../../../shared/services/http.service';
import { InstrumentService } from '../../../shared/services/instrument.service';
import { WindowRef } from '../../../shared/services/window-ref.service';
import { CredentialsService } from '../../../shared/services/credentials.service';
import { ConstantService } from '../../../shared/services/constant.service';
import { CryptService } from '../../../shared/services/crypt.service';
import { AuthGuardService } from '../../../shared/services/auth-guard.service';
import { AutoCompleteComponent } from '../../../shared/plugin/auto-complete/auto-complete.component';
import { MilliToDatePipe } from '../../../shared/pipes/milli-to-date.pipe';
import { PercentagePipe } from '../../../shared/pipes/percentage.pipe';
import { NseBsePipe } from '../../../shared/pipes/nse-bse.pipe';
import { INRCurrencyPipe } from '../../../shared/pipes/inr-currency.pipe';
import { NumberFormatPipe } from '../../../shared/pipes/num.pipe';
import { RiskPipe } from '../../../shared/pipes/risk.pipe';
import { LogPipe } from '../../../shared/pipes/log.pipe';
import { ChartsModule } from 'ng2-charts';
import { NgProgressModule, NgProgressCustomBrowserXhr } from 'ngx-progressbar';
import { Ng2PageScrollModule } from 'ng2-page-scroll';
import { InstrumentPipe } from '../../../shared/pipes/instrument.pipe';
import { TruncatePipe } from '../../../shared/pipes/truncate.pipe';

import { DashboardComponent} from './dashboard.component';
import { dashboardRouting } from './dashboard.routing';

@NgModule({
  imports: [
    CommonModule,
    dashboardRouting,
    ChartsModule,
    FormsModule    
  ],
  declarations: [
    DashboardComponent,
    AutoCompleteComponent,
    MilliToDatePipe,
    PercentagePipe,
    NumberFormatPipe,
    INRCurrencyPipe,
    NseBsePipe,
    RiskPipe,
    LogPipe,
    InstrumentPipe,
    TruncatePipe
  ],
  providers: [HttpService, CredentialsService, ConstantService,
    AuthGuardService, CryptService, WindowRef, InstrumentService]
})
export class DashboardModule { }

      

My panel routing

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';

const dashboardRoutes: Routes = [
  { path: '', component: DashboardComponent }  
];

export const dashboardRouting: ModuleWithProviders = RouterModule.forChild(dashboardRoutes);

      

+3


source to share


1 answer


I solved this problem by removing the following imports from my app.module.ts file

  • DashboardModule
  • FundsModule


as these 2 were lazy loaded and therefore created a problem

+1


source







All Articles