Angular Boilerplate

Live site (Demo)

English | Español

This opinionated Angular starter focuses on the latest Angular features and best practices. It offers essential features for flexibility and scalability, minimizing unnecessary overhead. The codebase is lightweight yet robust, allowing developers to choose their preferred technologies like UI component libraries, state management, server-side rendering, etc. Its flexible boilerplate enables easy customization and adaptation to unique project requirements.

⚗️ Features

• Angular 16
• PNPM, esbuild
• Standalone components
• Signals
• Lazy loading
• PWA
• I18n
• TailwindCSS
• OS/Light/Dark themes
• Lightweight, fast, and built using state-of-the-art technology.

✅ Ready-to-use

UI Frameworks

• TailwindCSS

Icons

• Iconify - use icons from any icon sets 🔍Icônes.
• @iconify/tailwind - Pure CSS icons.

Add-ons

• https://github.com/ngneat/transloco
• https://github.com/tailwindlabs/tailwindcss
  • https://github.com/tailwindlabs/tailwindcss-aspect-ratio
  • https://github.com/tailwindlabs/tailwindcss-forms
  • https://github.com/tailwindlabs/tailwindcss-typography
  • https://github.com/tailwindlabs/prettier-plugin-tailwindcss
• https://github.com/iconify/iconify
  • https://github.com/iconify/iconify/tree/main/plugins/tailwind

⚙ Prerequisites

• Node.js (^16.14.0 || ^18.10.0): https://nodejs.org/en/
• PNPM: https://pnpm.io/
• Docker (optional): https://www.docker.com/

🏹 Start development

Note: You have three options to start a new project based on this template:

1. Create a new GitHub repository from this template.
2. Clone this repository to start with a clean git history.
3. Scaffold a project fork on StackBlitz.

Using the GitHub template

Create a repo from this template on GitHub.

---

Cloning the repository locally

npx degit juanmesa2097/angular-boilerplate my-app && cd my-app && ./scripts/rename_project.sh my-app

Install dependencies

pnpm install # run `npm install -g pnpm` if you don't have pnpm installed

Run project

pnpm dev

---

📝 Checklist

Please review this checklist and modify it as necessary to meet your project requirements.

• Run the ./scripts/rename_project.sh script to rename the project.
• Change the title in src/index.html and the favicon in src/favicon.ico to match your project.
• Decide whether to continue using simple-git-hooks and lint-staged for your project.
• Clean up the README file to provide clear instructions about your project.
• Modify the pages in the project to meet your specific requirements.

📦 Deploy to Vercel

📦 Deploy to Netlify

🐳 Docker

Create an image of the project.

docker buildx build -t angular-boilerplate:latest .

Run the image of the project.

docker run --rm -p 8080:80 -d angular-boilerplate:latest

🧙‍♂️ Commands

Command	Description	npm	yarn	pnpm
dev	Starts the development server	npm run dev	yarn dev	pnpm dev
dev:host	Starts the development server with a custom host	npm run dev	yarn dev	pnpm dev
build	Builds the production code	npm run build	yarn build	pnpm build
watch	Builds the production code and watches for changes	npm run watch	yarn watch	pnpm watch
test	Runs the unit tests	npm run test	yarn test	pnpm test
test:e2e	Open Cypress	npm run test	yarn test	pnpm test
test:headless	Runs the unit tests in headless mode	npm run test:headless	yarn test:headless	pnpm test:headless
lint	Runs the linter	npm run lint	yarn lint	pnpm lint
lint:fix	Runs the linter and fixes any linting errors	npm run lint:fix	yarn lint:fix	pnpm lint:fix
lint:staged	Runs the linter on staged files	npm run lint:staged	yarn lint:staged	pnpm lint:staged
stylelint	Runs the style linter	npm run stylelint	yarn stylelint	pnpm stylelint
stylelint:fix	Runs the style linter and fixes any style linting errors	npm run stylelint:fix	yarn stylelint:fix	pnpm stylelint:fix
format	Formats the code with prettier	npm run format	yarn format	pnpm format