This boilerplate comes with bunch of preconfigured stuffs and best practises to help you kickstart your project easier & quicker...

If you do like this project, do leave a 🌟 ! 😊

Sample Demo 🚀 (only shows that Tailwind, Material components are integrated)

make sure you have node and npm installed on your system before running below commands

• Run npx ng-new-app your-app-name
  (if you don't have npx, Run - sudo npm i ng-new-app -g then ng-new-app your-app-name)
• Read instructions carefully after its successful, refer readme if any doubt.
• Runng serve

Well, you might have noticed badges on top 😉, but keep on reading for detailed summary 🍷

• Project Structure inspired form Rik De Vos's blog - tl:dr 3 main modules

  • CoreModule - only to be imported in Appmodule

    • Auth Guard with basic check

    • Basic Auth service (Refer model in model folder & change accordingly)

      • login
      • refreshtoken
      • storetoken
      • getTokens
      • logout

    • A broadcaster service included which listens to your key:value pair of events anywhere in app. Here is how to use to share data across modules,components

      • constructor(private _broadcatser: BroadcasterService) {}

      • to broadcast and listen anywhere

        this._broadcatser.broadcast('mykey', 'myvalue');
        
        // to listen inside any component inject service there and do simply below
        
        /* use this service with takeUntil from rxJS and local Subject &
         * destroy in OnDestroy to prevent memory leaks
         */
        
        this._broadcatser.listen('mykey').subscribe({
            next:(data) => console.log(data) // your broadcasted value
          })
        }

  • FeatureModule - all lazyloaded pages/modules goes here

    • before-login modules
    • after-login modules

  • SharedModule - folder with bunch of SCAM (Single Component Angular Module) modules only to be shared globally and imported in feature modules

    • Can have customcomponents, pipes, directives as SCAM pattern (sample scam component as independent module included: recommended rather than creating big shared module)
    • CustomPipes, Directives, Components, Models, Validators folders to organise
    • index.ts provided for shared.module.ts (to organise imports only for items to include inshared.module.ts)

  • annotations @shared, @feature, @core added in tsconfig.json for easy import

• HTTP Request Interceptor 👀️

  • in service.ts use endpoints without baseurl as e.g '/action/endpoint'
  • request cloner
  • header modifier
  • success and error handler
  • refresh token handler (inspired from Rich Franzmeier's blog)

• Tailwind and post-build PurgeCSS Configuration 😍

  • Tailwind configuration with font, theme and other properties (refertailwind.config.js)
  • Note: Tailwind's own purgecss only takes care of tailwind classes, for overall application, post-build purgecss is best (I will write an article explaining why)

• Angular Material Component & CDK integrated 😎

  • Material theme starter pack included, just change colors,font inside_mat_*.scss files

• Superpowerd with Jest for unit testing and Cypress for e2e testing (instead of karma and protractor). Special Thanks to contribution by @sjetha for this and eslint integration.

• ESLint integrated as recommended by Angular

• Prettier configured (with resolved conflicts between ESLint) - no VS extension being used by team? run command to check if follows rules/ run prettier on all in one go! Thanks to @deekshithrajbasa for this ✌🏻

• Global route-loader progressbar on top like github, using ngx-loading-bar package

• Self-XSS warning for use of console on prod build. Inspect & Check console here

• Icons and Typography (CDN links - index.html) 🤓

  • Angular Material Icons added
  • Default Poppins, OpenSans font integrated

• pollyfills (for safari) 'web-animations-js' added for animations support inside @Component decorator

• Local source analyzing tools webpack-bundle-analyzer and source-map-explorer, Local prod-build deploy and test with purgecss

Thanks goes to these wonderful people (emoji key):

Pranav Sarda 💻 📝 📖 💡 🎨

Shafiq Jetha ⚠️ 💻

Deekshith Raj Basa 💻 💡

This project follows the all-contributors specification. Contributions of any kind welcome!