zmzlois / angular-boilerplate

⛩️ Minimalistic Angular starter

Angular Boilerplate

Lightweight & minimalistic Angular starter

https://angularboilerplate.vercel.app

Contributing Guidelines · Submit an Issue

---

⚗️ Features

• Lazy loading
• Standalone components
• OS/Light/Dark modes
• Strongly-typed storage
• TailwindCSS

🛠️ Tweaks

• TailwindCSS configuration:

  You can find the tailwind.config.js file in the project root, then you can refer to https://tailwindcss.com/docs/configuration to learn how to make your own adjustments.

• Set default theme (first time load)

  Go to src\app\lib\constants.ts and choose the default theme.

  OS preference

  export const DEFAULT_BASE_THEME: AppTheme = 'system' as const;

  Light mode

  export const DEFAULT_BASE_THEME: AppTheme = 'light' as const;

  Dark mode

  export const DEFAULT_BASE_THEME: AppTheme = 'dark' as const;

• Enable a new local/session storage item

  Go to src\app\lib\utils\storage\storage.types.ts and add a new item name in the StorageObjectType type and a new key value pair in the StorageObjectMap type.

  

  After that, you can use the new item.

⛩️ Project structure

├───app
│   ├───lib
│   │   ├───components
│   │   │   ├───footer
│   │   │   ├───layouts
│   │   │   │   └───layout-horizontal
│   │   │   ├───logo
│   │   │   └───navbar
│   │   ├───guards
│   │   ├───interceptors
│   │   ├───interfaces
│   │   ├───enums
│   │   ├───services
│   │   │   ├───auth
│   │   │   └───theme
│   │   └───utils
│   │       └───storage
│   └───pages
│       ├───auth
│       │   ├───login
│       │   └───register
│       ├───home
│       ├───profile
│       ├───screens
│       │   └───not-found
│       └───settings
│           ├───accessibility
│           ├───account
│           └───appearance
├───assets
├───environments
└───theme
    ├───01-base
    ├───02-components
    ├───03-utilities
    └───tailwindcss

🧙‍♂️ Commands

Command	Description	NPM	Yarn	PNPM	Background command
ng	See available commands	npm run ng	yarn ng	pnpm ng	ng
start	Run app in development mode	npm start	yarn start	pnpm start	ng serve
build	Build app for production	npm run build	yarn build	pnpm build	ng build
watch	Run build when files change	npm run watch	yarn watch	pnpm watch	ng build --watch --configuration development
test	Run unit tests	npm run test	yarn test	pnpm test	ng test
test:run	Run unit tests with headless browser and without watch mode	npm run test:run	yarn test:run	pnpm test:run	ng test --watch=false --browsers ChromeHeadless
lint	Lint code	npm run lint	yarn lint	pnpm lint	ng lint