Angular starter for enterprise-grade front-end projects, built under a clean architecture
that helps to scale and maintain a fast workflow.

https://angularboilerplate.vercel.app

Contributing Guidelines · Submit an Issue

• Strict mode.
• Lazy loading.
• Smart and pure components pattern.
• SCAM pattern.
• Self-contained components and encapsulated modules.
• Components types (e.g. component, page).
• Amazing directory structure.
• Unit tests with Jest instead of Karma & Jasmine.
• e2e tests with Cypress instead of Protractor.
• PWA
• Dynamic titles and content meta tags.
• TailwindCSS + Autoprefixer + PurgeCSS setup.
• Dark mode and theme configuration.
• Scalable CSS architecture in favor of TailwindCSS layers.
• Lighthouse reports improved.
• Migration from TSLint to ESLint.
• Run unit tests & lint code on Git Hooks using Husky & validate commit messages using commitlint
• GitHub Actions workflows for code analysis and unit tests.

Types of pages

public: everybody can see them
private: only logged in users can see them

• 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

• footer
• header
• layout

• AuthService
• SeoService
• ThemeService

• 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 the title tag, replace "Angular Boilerplate" with your app name.

• Change paths of the pages:

  Go to src/app/core/utils/router.utils.ts to find all the registered routes inside a config object.

  For example, you could replace sign-in with SignIn, login or iniciar_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 your TailwindCSS configuration:

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

• Set a default theme (First time load)

  Go to src\app\@core\services\theme\theme.config.ts and change the following line of code

  from operating system preference

  export const DEFAULT_BASE_THEME = ThemeList.System;

  to light mode

  export const DEFAULT_BASE_THEME = ThemeList.Light;

  or dark mode

  export const DEFAULT_BASE_THEME = ThemeList.Dark;

There are certain features that you may or may not like to have in your projects, and here's how to remove them:

Husky allows you to easily run scripts on Git Hooks & commitlint validates if a commit message follows a certain convention.

• Remove execution of tests and linting on pre-commit:

  • Go to angular-boilerplate\.husky and remove the npm scripts inside the pre-commit file or the file itself.

• Remove execution of build on pre-push:

  • Go to angular-boilerplate\.husky and remove the npm scripts inside the pre-push file or the file itself.

• Remove conventional commit messages validation:

  1. Go to angular-boilerplate\.husky and remove the command npx commitlint --edit $1 inside the commit-msg file or the file itself.
  2. Remove the file angular-boilerplate\.commitlintrc.
  3. Run the following command:

  npm uninstall @commitlint/cli @commitlint/config-conventional
  

  OR

  yarn remove @commitlint/cli @commitlint/config-conventional
  

• Fully remove Husky & commitlint

  1. Remove the folder angular-boilerplate\.husky.
  2. Remove the file angular-boilerplate\.commitlintrc.
  3. Run the following commands:

  npm uninstall husky @commitlint/cli @commitlint/config-conventional
  

  OR

  yarn remove husky @commitlint/cli @commitlint/config-conventional
  

A GitHub Action workflow is a configurable automated process made up of one or more jobs that will help us to validate if some actions pass before we integrate new code into the repository (E.g., run unit tests on pull-requests or branch pushes).

• Remove CodeQL analysis:

  • Go to angular-boilerplate\.github\workflows and remove the file codeql-analysis.yml

• Remove tests workflow:

  • Go to angular-boilerplate\.github\workflows and remove the file test.yml

TailwindCSS is a utility-first CSS Framework fully customizable & fully tree shakeable. If you want to replace it with another CSS framework or don't want to use a CSS framework at all, you can easily remove it from the project.

1. Remove angular-boilerplate\tailwind.config.js file.
2. Run the following command:

npm uninstall tailwindcss autoprefixer postcss

OR

yarn remove tailwindcss autoprefixer postcss

├───app
│   ├───@core
│   │   ├───directives
│   │   │   └───click-outside
│   │   ├───guards
│   │   ├───interceptors
│   │   ├───pipes
│   │   │   └───bytes
│   │   ├───services
│   │   │   ├───seo
│   │   │   └───theme
│   │   └───utils
│   ├───@shell
│   │   ├───ft
│   │   └───ui (layout components)
│   │       ├───footer
│   │       ├───header
│   │       ├───layout
│   │       └───not-found
│   ├───components (generic shared components)
│   └───pages
│       ├───auth
│       │   ├───pages
│       │   │   ├───forgot-password
│       │   │   ├───forgot-password-email-sent
│       │   │   ├───password-reset
│       │   │   ├───password-reset-failed
│       │   │   ├───password-reset-succeeded
│       │   │   ├───sign-in
│       │   │   └───sign-up
│       │   └───services
│       ├───dashboard
│       ├───home
│       ├───settings
│       │   └───pages
│       │       ├───account
│       │       ├───appearance
│       │       ├───billing
│       │       ├───blocked-users
│       │       ├───notifications
│       │       ├───security
│       │       └───security-log
│       └───user
│           └───pages
│               ├───my-profile
│               └───overview
├───assets
├───environments
└───theme
    ├───01-base
    ├───02-components
    └───03-utilities