ionic lazy loading, routes not working, after leaving

Question

I have two modules orders and products.I have lazily loaded their routes, everything is working on the first run, problem is when I leave the current route(order), and go come back to it, its not working anymore, I have called this route on my "login.component", this seems to be the problem, cause if I call the product, its the product routes that is not working. The url changes but the component wont change, below are my setup.

Github Repo: https://github.com/markanthonybanong/routing

//app.component.html

//app-routing.module

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./login/login.module').then(m => m.LoginModule)
  },
  {
    path: 'order',
    loadChildren: () => import('./order/order.module').then(m => m.OrderModule),
  },
  {
    path: 'product',
    loadChildren: () => import('./product/product.module').then(m => m.ProductModule),
  },

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

//login.component.ts

  import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {
  public myForm: FormGroup;
  constructor(
    public formBuilder: FormBuilder,
    private router: Router
  ) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      username: [null, Validators.required],
      password: [null, Validators.required]
    }); 
  }

  onSignUp(): void {
    if(this.myForm.value.username === "admin" && this.myForm.value.password === "admin"){
      this.router.navigateByUrl('/order');
    }
  }

}

//order.component.html

//order-routing.module

   import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AddOrderComponent } from './add-order/add-order.component';
import { OrderListComponent } from './order-list/order-list.component';
import { OrderComponent } from './order/order.component';

const routes: Routes = [
  {
    path: '',
    component: OrderComponent,
    children: [
      { path: '', redirectTo: 'order-list', pathMatch: 'full'},
      { path: 'order-list', component: OrderListComponent},
      { path: 'add-order', component: AddOrderComponent},
    ]
  }
];

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

//product.component.html


  
    PRODUCT
    
      
   
  
   
    
      
        Product List
      
      
        Add Product

//product-routing.module

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AddProductComponent } from './add-product/add-product.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductComponent } from './product/product.component';

const routes: Routes = [
  {
    path: '',
    component: ProductComponent,
    children: [
      { path: '', redirectTo: 'product-list', pathMatch: 'full'},
      {path: 'product-list', component: ProductListComponent},
      {path: 'add-product', component: AddProductComponent},
    ]
  }
];

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

Can someone shed some light on me. At this point i dont know what to do. In my knowledge i have done everything correctly.

ionic lazy loading, routes not working, after leaving

Answers (1)

Related Questions