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

Package has been updated withe everything latest, if you find any issues, please report. PRs welcome

Note: Cypress RUN and Code Coverage is disabled from pipeline until officially fixed by Cypress Team

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! 🧑🏻‍💻

| command | What it does? | Thanks to Plugin | | ------------------------- | :------------------------------------------------------------------- | :------------------------------------------------------------------------------- | | npm start | Starts the server in dev mode 🤷🏻‍♂️ | | | npm run lint | Runs ESLint on project | | | npm run prettier | Runs prettier on entire src folder | | | npm run prettier:verify | Runs prettier-check and throws error if fails | | | npm run prettier:staged | Runs prettier on only staged (changed) files | | | npm run final-build | Takes prod build and runs PurgeCSS script | | | npm run prod-test | Takes a final-build deployes on local server and give you url to run | serve | | npm run purgecss | Run PurgeCSS job to reduced style.css size into few kbs | purgecss | | npm run source | Takes a final-build and opens up source-map-explorer view | source-map-explorer | | npm run webpack-analyze | Takes a final-build and opens up webpack-bundle-analyzer view | webpack-bundle-analyzer | | npm run test | Runs all the jests test cases | @briebug/jest-schematic | | npm run test:coverage | Runs all the jests test cases and generate coverage report | @briebug/jest-schematic | | npm run e2e | Opens up Cypress View to run your e2e tests in browser | @cypress/schematic | | npm run e2e:ci | Runs cypress tests in console (used for CI/CD) | @cypress/schematic |

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):

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