/angular-boilerplate

👾 Angular starter for big front-end projects that maintain a clean architecture that helps scale and keep a fast workflow.

Primary LanguageTypeScriptMIT LicenseMIT

Angular Boilerplate

This is a clean, intuitive, and fast starter project which contains a robust, maintainable, scalable, and agile architecture, allowing the developer to focus on the business logic and not on Front-end architecture matters.

The project’s main vision is to go for the path of free choice, this means the development is driven to go for the less opinionated solution and hoping for the developer who uses it to don’t have to change anything and use almost everything.

Something that highlights this project is that it gives flexibility to the developers that are using it to make different choices depending on their needs, which is very handy if you want to use this from a very small project to a really big one, and we will see this a little better on the next section.

Before continuing, it’s important to clarify that all the coding on this project is based on the standards, conventions, and good practices of every language that is used.

Main features

What comes for default

  • Works amazing on Angular >= 9
  • Angular 9+ components types (e.g. component, page, modal).
  • Smart and dumb components pattern.
  • Model adapter pattern.
  • Dependency injection pattern.
  • Lazy loading.
  • Route personalization with a PathMap class.
  • Docker file, .dockerignore, and Nginx configuration.
  • SEO friendly with dynamic titles and content meta tags.
  • Global error handler.
  • Generic type-safe HTTP service.
  • Requests caching.
  • Generic partial UI modules instead of having everything in one big, and heavy shared module.
  • The default preprocessor is SCSS but it can be easily changed.
  • Scalable CSS architecture with ITCSS.
  • Core module for generic singleton services.
  • Shared module for pipes and directives.
  • roll-up exports with barrel technique.
  • Webpack bundler analyzer ready to use.
  • Lighthouse metrics improved to the maximum.

Optional ones

The optional features are separated into different branches for each one.

  • (optional) Authentication scheme based on roles, JWT interceptor, role guard, auth guard, and no-auth guard.
  • (optional) Redux pattern with NgRx.
  • (optional) PWA (Progressive web app).
  • (optional) Angular Universal for SSR.
  • (optional) i18n to handle the app in multiple languages.
  • (optional) Custom strategy to preload lazy loaded modules.
  • (optional) Preload lazy loaded modules with intersection observer using quicklink.

Demos

If you only want the architecture it's completely fine, but you can also have a starter real-world application demo that takes this template repository and extend it to its template.

Arquitecture

Quickstart