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