Reputation: 55

Lazy loading routes are not working Angular

I have a project that is separated in various modules. The lazy loaded modules are the about and contact modules. The navmenu that has the router links is in a feature module with the header and footer. I think I have done everything as it supposed to be with the code, but when I click on the about and contact button in the navmenu nothing happens(they don't redirect). But, when I manually write /about and /contact in the URL the pages seem to lazily load. I believe it has something to do with the module that consists the navmenu, but I can not seem to find a solution.

This is the contact.module.ts(same as the about)

import { NgModule } from '@angular/core';
import { ContactRoutingModule } from './contact-routing.module';
import { ContactComponent } from './contact.component';
import { SharedModule } from '../shared/shared.module';

@NgModule({
declarations: [ ContactComponent ],
imports: [ SharedModule, ContactRoutingModule ],
exports: [ ContactComponent ]
})
export class ContactModule {}

This is the contact.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ContactComponent } from './contact.component';

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

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

This is the app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomepageComponent } from './homepage/homepage.component';

const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomepageComponent },
{ path: 'about', loadChildren: () => import('./aboutus/aboutus.module').then((m) => m.AboutusModule) 
},
{ path: 'contact', loadChildren: () => import('./contact/contact.module').then((m) => 
m.ContactModule) }
];

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

This is the navmenu.html

<div class="b-navbar__navDesktop">
  <a routerLink="/home" class="b-navbar__link">Home</a>
  <a class="b-navbar__link" href="#">Services</a>
  <a routerLink="/about" class="b-navbar__link">About</a>
  <a class="b-navbar__link" href="#">Reviews</a>
  <a class="b-navbar__link" href="#">Locations</a>
  <a routerLink="/contact" class="b-navbar__link">Contacts</a>
</div>

And the app.component.html

 <body>
<app-header></app-header>
<app-nav-menu></app-nav-menu>
<router-outlet></router-outlet>
<app-footer></app-footer>
</body>

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';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HttpClientModule } from '@angular/common/http';
import { HomepageModule } from './homepage/homepage.module';
import { SharedModule } from './shared/shared.module';

import { CoreUIModule } from './core-ui/core-ui.module';

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

Upvotes: 0