angular-routing

This skill provides code patterns and configuration examples for implementing routing in Angular v20+ applications. It covers lazy loading, functional guards, signal-based route parameters, resolvers, nested routes, and programmatic navigation.

6.0K
Installs
5
Use cases
5/10
Quality

Is angular-routing safe to install?

Safe to install

Safe to install: our audit of angular-routing's source files found 0 shell commands, 0 external URLs, no file writes (none risk). Every command and URL listed appears verbatim in the skill's source. The skill provides static code examples and documentation. It does not execute commands or perform network requests.

How we audit skills: our security review methodology.

Who is this skill for?

Angular developers building applications with v20+ features.

What can you do with it?

  • Configuring application routes and lazy loading modules
  • Implementing authentication and role-based access control with functional guards
  • Binding route parameters and query parameters to component signals
  • Pre-fetching data using route resolvers
  • Managing nested route structures and programmatic navigation

How good is this skill?

Quality score: 5/10. The skill provides clear, idiomatic Angular v20+ code examples that align with current framework best practices.

What does the skill file contain?

SKILL.md
# Angular Routing

Configure routing in Angular v20+ with lazy loading, functional guards, and signal-based route parameters.

## Basic Setup

```typescript
// app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: Home },
  { path: 'about', component: About },
  { path: '**', component: NotFound },
];

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appCon...

Frequently asked questions

Does this skill support signal-based route parameters?

Yes, it demonstrates using input() for route parameters and query parameters when enabled with withComponentInputBinding().

How do I implement lazy loading with this skill?

The skill provides examples for lazy loading entire feature modules using loadChildren and single components using loadComponent.

Can I use functional guards for authentication?

Yes, the skill includes examples for CanActivateFn implementations, including auth guards and role-based guards.

Data sourced from analogjs/angular-skills on GitHub. Install counts from skills.sh. The summary and security audit are derived from the skill's source files: every command and URL listed appears verbatim in the source.

Related skills

frontend-design

618.4K

AI agents tasked with designing and building web interfaces who need to produce unique, high-quality visual identities rather than generic, templated designs

The frontend-design skill provides guidance for creating distinctive, intentional visual designs for web interfaces. It instructs the agent to act as a design lead at a small studio, focusing on avoiding templated defaults by making deliberate choices regarding typography, color palettes, layout, and motion. The skill emphasizes a structured process of brainstorming, planning, and self-critique before writing code.

nonedesignfrontendanthropics

firebase-app-hosting-basics

99.2K

Developers deploying full-stack web applications to Firebase App Hosting

This skill assists with deploying and managing full-stack web applications using Firebase App Hosting. It provides guidance on configuration, secret management, and deployment workflows for frameworks like Next.js and Angular.

highfirebasehostingfirebase

firebase-hosting-basics

97.9K

Developers deploying static web applications, single page applications, or microservices to Firebase Hosting

This skill provides instructions and guidance for deploying web applications to Firebase Hosting. It covers configuration, deployment procedures, and local emulation for static sites and single page applications.

highfirebasehostingfirebase

developing-genkit-js

50.1K

Developers building AI agents, flows, and tools using the Genkit framework in JavaScript or TypeScript environments

This skill provides guidance for developing AI-powered applications using Genkit in Node.js and TypeScript. It enforces a strict troubleshooting protocol that prioritizes reading local documentation via the Genkit CLI over internal knowledge to account for recent breaking API changes.

highGenkitTypeScriptgenkit-ai