Lazy Loading with shared component in Angular 8

Question

I just can't find the answer to this question. I am doing a simple home page with a navbar, but I'm adding the navbar as a shared component, so I can reuse it inside other components.

The problem is that, when I try to go to a new route lazy loaded using the navbar, the navbar just cant load the route.

This is my code:

Ng --Version:

Angular CLI: 8.2.2
Node: 10.13.0
OS: win32 x64
Angular: 8.2.8
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.802.2
@angular-devkit/build-angular     0.802.2
@angular-devkit/build-optimizer   0.802.2
@angular-devkit/build-webpack     0.802.2
@angular-devkit/core              8.2.2
@angular-devkit/schematics        8.2.2
@angular/cli                      8.2.2
@ngtools/webpack                  8.2.2
@schematics/angular               8.2.2
@schematics/update                0.802.2
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.38.0

app.html:

<router-outlet></router-outlet>

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'dashboard-syngenta';
}

app.module.ts:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


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

app-routing.module.ts

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


const routes: Routes = [
  { path: '', loadChildren: './login/login.module#LoginModule'}
];

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

login.component.html

<div class="loginContainer">


            <div class="row">
                <div class="col-12 text-center">
                    <button class="btn btn-submit" type="button" routerLink="home">Ingresar</button>
                </div>
            </div>

</div>

login.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

login.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login.component';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'home', loadChildren: '../home/home.module#HomeModule' }
];

@NgModule({
  declarations: [LoginComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class LoginModule { }

HomePage HTML:

<div class="homeContainer">
    <!-- Sidebar  -->
    <div class="navbar">
        <app-navbar></app-navbar>

    </div>

    <!-- Page Content  -->
    <div id="content">

        <router-outlet></router-outlet>

    </div>

</div>

HomeComponent.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {


  constructor() { }

  ngOnInit() {
  }

}

HomeModule.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { Routes, RouterModule } from '@angular/router';
import { SharedModule } from '../shared/shared.module';

const routes: Routes = [
  { path: '', component: HomeComponent }
];

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    SharedModule
  ]
})
export class HomeModule { }

navbar.component.html

<div class="wrapper">
    <!-- Sidebar  -->
    <nav id="sidebar" [ngClass]="{'active': toggleActive}">
        <div class="sidebar-header">
            <h3>Syngenta Admin</h3>
            <strong>SA</strong>
        </div>

        <ul class="list-unstyled components">
            <li routerLink="home" routerLinkActive="active">
                <a href="#homeSubmenu">
                    <i class="fa fa-home"></i>
                    Home
                </a>
            </li>
            <li routerLink="usuarios" routerLinkActive="active">
                <a href="#">
                    <i class="fa fa-user" aria-hidden="true"></i>
                    Usuarios
                </a>
            </li>
            <li routerLink="productos" routerLinkActive="active">
                <a href="#pageSubmenu">
                    <i class="fa fa-truck"></i>
                    Productos
                </a>
            </li>

        </ul>

    </nav>
</div>

navbar.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {

  toggleActive = true;

  constructor() { }

  ngOnInit() {
  }

  activeSidebar() {
    this.toggleActive = !this.toggleActive;
  }

}

shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NavbarComponent } from './navbar/navbar.component';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'home', loadChildren: '../home/home.module#HomeModule' }
];

@NgModule({
  declarations: [NavbarComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  exports: [NavbarComponent]
})
export class SharedModule { }

Then route says is a /#homeSubmenu after I click the routeLink inside the navbar.

Then:

I'm not sure if I'm implementing the lazy loading properly. I would really appreciate any suggestion.

Answer 1

Your arquitecture of the lazy loading is not proper, i recommend you not to use a shared module for your side bar instead put it inside your home component and change its origin route to be the default. So It is your global parent component. Then use child components lazy loaded.

To use your login module use a guard to redirect it inside the Home Lazy Loading Routing.

Edit 1: Btw you have a problem with your anchors you have a href inside each of your links

 <li routerLink="home" routerLinkActive="active">
    <!-- Here is your error for the submenu -->
   <a href="#homeSubmenu">
     <i class="fa fa-home"></i>
        Home
    </a>
 </li>

Check it out.