As an intermediate Ng developer looking to advance, I often find myself debugging angular routes during run-time. I am seeking a solution that would provide greater confidence in consistency at compile time.
Scenario
When handling Ng routes, there is a need to manage an object with three key components:
- path
- component
- outlet
For each route, making changes to any of these parts requires managing multiple maintenance points to ensure consistency throughout the application.
- In the typescript app-routing.module.ts file where routes are set up
...
// foo routes
{ path: 'book-adder', component: BookAdderComponent, outlet: 'foo' },
{ path: 'book-detail/:id', component: BookDetailComponent, outlet: 'foo' },
{ path: 'editor-adder', component: EditorAdderComponent , outlet: 'foo'},
{ path: 'editor-detail/:id', component: EditorDetailComponent, outlet: 'foo' },
...
- In the HTML template that declares the router outlets
...
<router-outlet name="foo"></router-outlet>
...
- In the calls to navigate within the controllers
...
setDetailOutlet(id: number) {
this.router.navigate([{
outlets: {
foo: ["book-detail", id]
}
}]);
}
...
Challenge
- When renaming the router outlet part (e.g., from "foo" to "bar"), manual code changes must be made at all three maintenance points.
- Renaming the path requires manual updates at two maintenance points.
- Managing the component part entails manual changes in both the app-routing.module.ts file and the calling component's code.
Inquiry
- Is there a way to centralize the solution to minimize maintenance points for each route?