Declarative Route Path Management in Angular Apps

Usage no npm install needed!

<script type="module">
  import ngspotRoutePathBuilder from 'https://cdn.skypack.dev/@ngspot/route-path-builder';


MIT commitizen PRs styled with prettier All Contributors ngneat-lib spectator semantic-release

Declarative Route Path Management in Angular Apps

This library consists of a single abstract class: RoutePathBuilder. See this article to learn how to use it!


  • ✅ < 3kb bundle size
  • ✅ A single source of truth for each path in the application
  • ✅ Strong typings
  • ✅ Access to Angular's dependency injection
  • ✅ Use of absolute links (meaning, the generated links are absolute)
  • ✅ Modularity
  • ✅ Use of property chaining to reflect the nested nature of the routes
  • ✅ Use of relative URL parts for the assembly of the URLs.
  • ✅ Flexible return type

Table of Contents



npm install @ngspot/route-path-builder --save


yarn add @ngspot/route-path-builder


  1. Define your routes
// app-routes.ts
import { RoutePathBuilder } from '@ngspot/route-path-builder';

@Injectable({ providedIn: 'any' })
export class AppRoutes extends RoutePathBuilder {
  products = this.childRoutes('products', RoutesForProducts);

  about() {
    return this.url('about');

  contact() {
    return this.url('contact');

// routes-for-products.ts
@Injectable({ providedIn: 'any' })
export class RoutesForProducts extends RoutePathBuilder {
  orders() {
    return this.url('orders');
  1. Use the AppRoutes:
class MyComponent {
  constructor(private appRoutes: AppRotes) {}

  someMethod() {
    const aboutUrl = this.appRoutes.about().url;


Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Icons made by Freepik from www.flaticon.com