angular-material-starter-template (ng-new-app 🍄)

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

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

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

How to get started?

Make sure you have node.js latest stable & @angular-cli 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

and

ng-new-app your-app-name

• Read instructions carefully after its successful, refer readme if any doubt.
• change package.json for project, version & author details
• Runnpm start and start coding 😉

What's inside the boilerplate?

Keep 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

• [new✨] Pre-commit husky hook, run whatever command you want before git commit. By default prettifying changed/staged files and running lint is enabled, you can comment out run tests too. Refer .husky/pre-commit file for this operations. This helps you maintian same quality across team workspaces.

• [new✨] Test-coverage report and its workflow (github action). Check index.html in generated coverage folder. Thanks to @sapatgit for adding this and @sjetha for improvising it with best solution.

There is a command for everything you need! 🧑🏻‍💻

Plan

Under auth-login-page branch, there is a sample login page designed. Looking for contributors to build signup, forgot password pages and integration with Firebase with a minimal configuration to change for any new project. PRs welcome✌🏻. Look for project/issues tab.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Pranav Sarda 💻 📝 📖 💡 🎨

Shafiq Jetha ⚠️ 💻 🚧

Deekshith Raj Basa 💻 💡

Saptarshi Majumdar 📖 💻

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