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

[deepu105045]

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 { }

[diogohmcruz]

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