Angular starter for enterprise-grade front-end projects, built under a clean architecture that helps to scale and maintain a fast workflow.
- Lazy loading.
- Smart and pure components pattern.
- Components types (e.g. component, page).
- Self-contained components and encapsulated modules.
- Auth scheme
- Settings scheme
- User scheme
- PWA
- i18n
- Dynamic titles and content meta tags.
- TailwindCSS + Autoprefixer + PurgeCSS setup.
- Dark mode and theme configuration.
- Scalable CSS architecture with ITCSS.
- Lighthouse reports improved.
- Migration from TSLint to ESLint.
- Husky hooks
- General
- home
- not-found
- Auth
- sign-in
- sign-up
- forgot-password
- forgot-password-email-sent
- password-reset
- password-reset-succeeded
- password-reset-failed
- Settings
- account
- appearance
- billing
- blocked-Users
- Notifications
- security
- security-log
- User
- my-profile
- overview
- Features
- dashboard
- breadcrumb
- footer
- header
- click-outside (detects when the user clicks outside an element).
- bytes (transforms a numeric value into bytes, KB, MB, GB, etc.).
-
Change application title:
Go to
src/index.html
and inside thetitle
tag, replace "Angular Boilerplate" with your app name. -
Change paths of the pages:
Go to
src/app/core/structs/path.enum.ts
to find all the registered routes in an enum file.For example, you could replace
sign-in
withSignIn
,login
oriniciar_sesion
-
Change titles, descriptions, and robots of the pages:
Every page has a
.route
file that contains an exported constant that holds the title, description and a robot's metatag that indicates if it can be indexed or followed by a web crawler. -
Change light and dark mode colors:
Go to
src/css/01-settings/variables.scss
and tweak it to your preference. -
Change your TailwindCSS configuration:
Go to
config/tailwind.config.js
and tweak it to your preference. You can refer to https://tailwindcss.com/docs/configuration to learn how to do it. -
Add new PostCSS plugins
Go to
config/webpack-dev.config.js
for development and testing or toconfig/webpack-prod.config.js
for production settings and add the new plugins inside the plugins array.
├───app
│ ├───@components
│ │ ├───breadcrumb
│ │ ├───footer
│ │ └───header
│ ├───@containers
│ │ ├───home
│ │ └───not-found
│ ├───@core
│ │ ├───directives
│ │ │ └───click-outside
│ │ ├───guards
│ │ ├───interceptors
│ │ ├───pipes
│ │ │ └───bytes
│ │ ├───services
│ │ │ └───seo
│ │ ├───structs
│ │ └───utils
│ ├───+auth
│ │ └───pages
│ │ ├───forgot-password
│ │ ├───forgot-password-email-sent
│ │ ├───password-reset
│ │ ├───password-reset-failed
│ │ ├───password-reset-succeeded
│ │ ├───sign-in
│ │ └───sign-up
│ ├───+settings
│ │ └───pages
│ │ ├───account
│ │ ├───appearance
│ │ ├───billing
│ │ ├───blocked-users
│ │ ├───notifications
│ │ ├───security
│ │ └───security-log
│ ├───+user
│ │ └───pages
│ │ ├───my-profile
│ │ └───overview
│ └───features
| └───dashboard
├───assets
├───css
│ ├───01-settings
│ ├───02-tools
│ ├───03-generic
│ ├───04-elements
│ ├───05-objects
│ ├───06-components
│ └───07-trumps
├───environments
├───locale
└───public
└───icons
Command | Description | NPM | Yarn | Background command |
---|---|---|---|---|
ng | See available commands | npm run ng | yarn ng | ng |
start | Run your app in development mode | npm start | yarn start | ng serve |
start:es | Run your app in development mode in spanish | npm run start:es | yarn start:es | ng serve -c=es --port 4201 |
build | Build your app | npm run build | yarn build | ng build |
build:prod | Build your app ready for production | npm run build:prod | yarn build:prod | ng build --prod --build-optimizer --aot --stats-json |
build:i18n | Build your multilingual app ready for production | npm run build:i18n | yarn build:i18n | ng build --prod --build-optimizer --aot --stats-json --localize |
test | Run your unit tests | npm run test | yarn test | ng test |
lint | Use ESLint to lint your app | npm run lint | yarn lint | ng lint |
e2e | Run your e2e integration tests | npm run e2e | yarn e2e | ng e2e |
i18n:extract | Extract i18n messages from i18n directives | npm run extract | yarn extract | ng extract-i18n --output-path locale --ivy |
analyze | Open webpack-bundle-analyzer | npm run analyze | yarn analyze | webpack-bundle-analyzer dist/angular-boilerplate/stats.json |