tarsisexistence / routerkit

🦩 strict typed angular routes
MIT License
75 stars 8 forks source link
angular router routes typescript

RouterKit

logo

A new approach to Angular routes:


Showcase

Gif demonstrating the process of running schematic script.


What problems does it solve?


How does it work?

script:

function:


Install

Install the package via Angular schematic:

ng add @routerkit/core


Usage

Schematic

You can run Angular schematic to generate the routes type:

ng g @routerkit/core:parse --project YOUR_PROJECT_NAME

App

Before:

import { Component } from '@angular/core';

@Component({
  selector: 'user-details-link',
  template: `<a routerLink="/profile/users/{{ usersId }}">User Details</a>`
})
export class UserComponent {
  usersId = 42;
}

After:

import { Component } from '@angular/core';

import { getRoutes } from '@routerkit/core';
import { TypedRoutes } from '{ROOT}/{PROJECT_NAME}.routes.d.ts';

@Component({
  selector: 'user-details-link',
  template: `<a routerLink="{{ routes.profile.users[usersId] }}">User Details</a>`
})
export class UserComponent {
  routes: TypedRoutes = getRoutes<TypedRoutes>();
  usersId = 42;
}


Tip: if you prefer [routerLink] directive you can use asArray (asString is available too) property

Before:

<a [routerLink]="['/', 'profile', 'users', userId]">Navigate</a>

After:

<a [routerLink]="routes.profile.users[userId].asArray">Navigate</a>


Contributors ✨

Thanks goes to these wonderful people (emoji key):


Max Tarsis

🤔 💻 🚇 📖 📆

Denis Makarov

🤔 💻

Kirill Cherkashin

🤔 📖

Andrew Grekov

🤔

Lars Gyrup Brink Nielsen

📖

Joep Kockelkorn

🐛

Gatej Andrei

💻

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