During my work on a major angular project, I came across feature modules and routing modules which seemed to be great for organizing the project. However, when I implemented them, the app started malfunctioning. To address this issue, I decided to create a test project to experiment with routing between feature modules on a smaller scale.
Although the test project is functional, there are some minor issues that could potentially cause problems in the future and I would like to resolve them.
I have identified two main problems:
The
directive does not work in feature modules but only in the app module. It appears as plaintext in the markup without creating a working link. I even tried importing routerLink into the feature modules module.ts file as a last resort, but it did not solve the issue.<a routerLink="some/link>I had hoped that routing to a feature module would allow for different markup and styling based on the module being accessed - for example, routing to module-a would display one navigation menu while routing to module-b would show another. However, the default behavior persists where the app.component is displayed universally, and routing to a feature module simply replaces the specified component's URL in the router-outlet. I wish to disable this default behavior so that components routed to in one feature module have their own unique styles and features distinct from those routed to in another module, essentially having the router-outlet recognize that
feature-a/componentbelongs to feature-a and therefore loads that module's HTML and CSS instead of the root app.component.
The source code for this test project, focused mainly on feature-a, has been provided below to avoid unnecessary clutter from feature-b.
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 { FeatureAModule } from './feature-a/feature-a.module';
import { FeatureBModule } from './feature-b/feature-b.module';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FeatureAModule,
FeatureBModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
App.routing.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ChalpComponent } from './feature-a/chalp/chalp.component';
import { FeatureAComponent } from './feature-a/feature-a.component';
import { FeatureBComponent } from './feature-b/feature-b.component';
import { SkoneComponent } from './feature-b/skone/skone.component';
const routes: Routes = [
/* { path: 'feature-a', component: FeatureAComponent,
children: [
{ path : 'feature-a/chalp', component: ChalpComponent }
]
},
{ path: 'feature-b', component: FeatureBComponent,
children: [
{ path : 'feature-b/skone', component: SkoneComponent }
]
}
*/
{ path : 'feature-a/chalp', component: ChalpComponent },
{ path : 'feature-b/skone', component: SkoneComponent },
{ path: 'feature-a', component: FeatureAComponent },
{ path: 'feature-b', component: FeatureAComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Markup for app.component:
<h1>Inside App-Module now!</h1>
Go to feature A for chalp: <a routerLink="feature-a/chalp">Chalp</a>
Go to feature B for Skone: <a routerLink="feature-b/skone">Skone</a>
<router-outlet></router-outlet>
Feature-a routing + module file
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes, RouterOutlet, RouterLink } from '@angular/router';
import { FeatureAComponent } from './feature-a.component';
import { ChalpComponent } from './chalp/chalp.component';
const routes : Routes = [
{ path : '', component : FeatureAComponent },
{ path : 'chalp', component: ChalpComponent}
]
@NgModule({
declarations: [ChalpComponent],
imports: [
CommonModule,
RouterModule.forChild(routes)
]
})
export class FeatureAModule { }
Chalp - a component within feature-a
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-chalp',
templateUrl: './chalp.component.html',
styleUrls: ['./chalp.component.css']
})
export class ChalpComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
Chalp markup
<p>Chalp works!</p>
<a routerLink="../">Go back one</a>