DeborahK/Angular-Routing

Angular Routing : After lazy loading , page is redirecting to default route

Closed this issue · 1 comments

I was following your course on Angular routing in Pluralsight I have created a sample app but I am facing below issue after implementing lazy loading .
my repo https://github.com/deepu105045/boyka

I have two modules in my angular 6 application one is app module and another one is User module, I am trying to implement lazy loading of the user module. Routing works if I manually hit the URL then the correct page from user module is getting displayed. But when I tried to navigate from header component it's not navigating to user page instead it's going to the default page.

Header.html

Login Register app-routing-module

import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { WelcomeComponent } from './components/welcome/welcome.component';
import { PagenotfoundComponent } from './components/pagenotfound/pagenotfound.component';

const routes: Routes = [
{
path:'welcome',
component:WelcomeComponent
},
{
path:'user',
loadChildren:'./user/user.module#UserModule'
},
{
path: '',
redirectTo: 'welcome',
pathMatch: 'full' },
{
path: '**',
component: PagenotfoundComponent
}
];

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

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { RegisterComponent } from './components/register/register.component';

const routes: Routes = [
{
path:'login',
component: LoginComponent
},
{
path:'register',
component:RegisterComponent
},
{
path:'',
redirectTo:'login',
pathMatch:'full'
}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class UserRoutingModule { }
App module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { WelcomeComponent } from './components/welcome/welcome.component';
import { PagenotfoundComponent } from './components/pagenotfound/pagenotfound.component';

@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
WelcomeComponent,
PagenotfoundComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

I think that in app.component.html at line 59, you should change it to: [@slideInAnimation]="o.activatedRoute".