Angular Template

Modern Angular starter template focused on scalability, developer experience, accessibility, and clean architecture.

Stack

• Angular 22
• Tailwind v4
• spartan/ui
• Ng Icons (Tabler icons)
• Prettier
• pnpm

Setup

1. Rename the project

Update the project name in:

package.json

{
  "name": "my-project"
}

angular.json

Replace angular-starter with your project name.

2. Install dependencies

pnpm install

3. Start development server

pnpm start

Included Features

Angular

• Standalone Components only
• Modern Angular APIs
• Signal-based state management
• Lazy loading ready
• SSR compatible structure

Tailwind CSS v4

Configured with:

• prettier-plugin-tailwindcss
• Tailwind IntelliSense support

Prettier

Integrated with:

• Tailwind class sorting
• Consistent formatting

Developer Experience

Included improvements:

• Path aliases
• Clean folder structure
• Strict TypeScript configuration

Optional Features

NgRx

ng add @ngrx/signals@latest @ngrx/operators@latest

i18n

1. Install dependencies

ng add @angular/localize ng-extract-i18n-merge

2. Add i18n support for client hydration

provideClientHydration(withI18nSupport()),

3. Add extract i18n script

"scripts": {
  "i18n:extract": "ng extract-i18n --output-path src/locale --format=xlf2"
}

Progress Bar

Useful for route transition feedback.

1. Install package

pnpm add ngx-progressbar

2. Configure router progress

Add provideNgProgressRouter in app.config.ts.

provideNgProgressRouter({
  startEvents: [GuardsCheckEnd],
  completeEvents: [NavigationEnd],
  minDuration: 250,
}),

3. Add component

<ng-progress ngProgressRouter />

4. Customize styles

:root {
  --ng-progress-color: var(--color-black);
}

.dark {
  --ng-progress-color: var(--color-white);
}

Recommended VSCode Extensions

• Angular Language Service
• Prettier
• Tailwind CSS IntelliSense