Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/daniel-le97/angular
https://github.com/daniel-le97/angular
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/daniel-le97/angular
- Owner: daniel-le97
- Created: 2023-01-11T23:02:46.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-04T05:31:44.000Z (4 months ago)
- Last Synced: 2024-12-09T14:57:43.502Z (about 2 months ago)
- Language: TypeScript
- Size: 244 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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
```ts
export const DEFAULT_BASE_THEME: AppTheme = 'system' as const;
```
Light mode
```ts
export const DEFAULT_BASE_THEME: AppTheme = 'light' as const;
```
Dark mode
```ts
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
```console
├───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 |