Angular NgRx & Angular Material Starter Project
Switch branches/tags
Clone or download
tomastrajan Merge pull request #393 from hhubik/error-handler
feat(): add UI notification for client and HTTP errors
Latest commit d4b4903 Oct 20, 2018
Failed to load latest commit information.
.github chore: reword how to add yourself as a contributor and add issue temp… Sep 21, 2018
cypress feat(update): update to Angular (and related) 7.0.0 BREAKING CHANGE Oct 18, 2018
e2e feat(settings): add runtime animations toggles Jun 3, 2018
meta-assets docs(readme): add analyze output example Aug 1, 2018
src Merge pull request #393 from hhubik/error-handler Oct 20, 2018
.all-contributors-html.js feat(contributors): add contributor fiona Aug 13, 2018
.all-contributorsrc docs(contributors): add zetsnotdead Oct 16, 2018
.editorconfig feat: project skeleton May 10, 2017
.gitignore feat: add pa11y for accessibility checks (#379) Oct 9, 2018
.pa11yci feat: add pa11y for accessibility checks (#379) Oct 9, 2018
.prettierrc feat(update): update to Angular (and related) 7.0.0 BREAKING CHANGE Oct 18, 2018 chore(ci): fix travis ci deploy script description Apr 11, 2018
.travis.yml chore(ci): update npm version used by ci server May 15, 2018 docs(built_with): added PolTrack project Jul 4, 2018 chore(release): 7.0.0 Oct 18, 2018 chore(docs): add Jan 13, 2018 docs(contributing): enhance commit scope documentation Jul 16, 2018
LICENSE feat: add license file Aug 25, 2017 docs(contributors): add zetsnotdead Oct 16, 2018
angular.json feat(dependencies): update to Angular (and related) 7.0.0 RCs Oct 13, 2018
cypress.json feat(testing): add cypress (#356) Sep 26, 2018
package-lock.json chore(release): 7.0.0 Oct 18, 2018
package.json chore(release): 7.0.0 Oct 18, 2018
server.js feat(dependencies): update to Angular (and related) 7.0.0 RCs Oct 13, 2018
tsconfig.json fix(tsconfig): adjust baseUrl, fixes #220 Jul 22, 2018
tslint.json chore(tslint): remove redundant rules from tslint.json, fixes #391 Oct 18, 2018

Angular, NgRx and Angular Material Starter

by @tomastrajan

license All Contributors code style: prettier Build Status Twitter Follow

intro themes

Table of Content

Getting started

git clone new-project
cd new-project
npm install
npm start

Useful Commands

  • npm start - starts a dev server and opens browser with running app
  • npm run test - runs lint and tests
  • npm run watch - runs tests in watch mode
  • npm run cy:open - opens the Cypress Test Runner in interactive mode
  • npm run cy:run - runs Cypress tests via the cli
  • npm run prod - runs full prod build and serves prod bundle
  • npm run prettier - runs prettier to format whole code base (.ts and .scss)
  • npm run analyze - runs full prod build and webpack-bundle-analyzer to visualize how much code is shipped (dependencies & application)


Make It Your Own

When using this starter project to build your own app you might consider some of the following steps:

  • use search and replace functionality of your favourite IDE to replace anms with <your-app-prefix>
  • rename project in package.json name property and set appropriate version (eg 0.0.0 or 1.0.0)
  • remove / rename context path config -- --deploy-url /angular-ngrx-material-starter/ --base-href /angular-ngrx-material-starter in package.json, this is used to configure url (context path) on which the application will be available (eg.<context-path>/)
  • rename app in src/environments/ files (will be shown in browser tab)
  • delete pre-existing (you will generate your own with future releases of your features)
  • delete, and files as they are relevant only if project is open sourced on Github
  • edit the title and Open Graph metadata properties in index.html
  • remove or adjust links in the footer
  • replace logo in src/assets folder ( currently 128 x 128 pixel png file )
  • adjust colors in src/themes/default-theme.scss
  • create a pull request in the original repository to update file with a link and short description of your project

Continuous Integration

Starter project is using Travis CI for running linters and tests on every commit. Based on your preferences and needs you can either:

  • not use / use other CI server and delete both .travis.yml and
  • create Travis CI account and link it to your projects Github repo and configure build with GH_REF and GH_TOKEN environment variables for automatic deployment of releases to Github Pages


The main goal of this repository is to provide an up to date example of Angular application following all recent best practices in various areas like:

  • @ngrx/store - including reducers, actions, selectors
  • @ngrx/effects - for implementation of side effects like http requests, logging, notifications,...
  • @ngrx/entity - for CRUD operations
  • @ngrx/router-store - to connect the Angular Router to @ngrx/store
  • @ngrx/store-devtools - to enable a powerful time-travelling debugger.
  • @angular/material - material design component library, theming, ...
  • routing
  • testing of all the above mentioned concepts
  • Angular CLI configuration (prod build, budgets, ...)
  • end to end tests - a comparison between Protractor and Cypress

This repository will also strive to always stay in sync with releases of Angular and the related libraries. The nature of the repository is also a great match for first time open source contributors who can add simple features and enhance test coverage, all contributors are more than welcome!

Learning Materials

Articles with content that explains various approaches used to build this starter project.



  • custom themes support (4 themes included)
  • lazy-loading of feature modules
  • lazy reducers
  • localStorage ui state persistence
  • @ngrx/effects for API requests
  • fully responsive design
  • angular-material and custom components in SharedModule
  • Cypress for end to end tests


  • Angular
  • ngrx (or try ngx-model if you prefer less boilerplate)
  • Angular Material
  • Bootstrap 4 (only reset, utils and grids)


  • Blocking at emitting LicenseWebpackPlugin when npm start - try using cnpm instead of npm


Want to start contributing to open source with Angular?

Leave your mark and join the growing team of contributors!

Get started by checking out list of open issues and reading Contributor Guide

Tomas Trajan

💻 📖 ⚠️ 🎨 📝

Tim Deschryver

💻 👀 🤔 📖


💻 ⚠️ 🐛


💻 📖

Muhammad Umair


Phil Merrell


Valery Kharshats

💻 🐛

Neil Pathare


Peter Krieg

💻 🐛


💻 🐛


💻 🌍

Fabien Dehopré

💻 🌍

Matias Iglesias

💻 🌍

Jeremy Kairis

💻 🐛

Iago Andrade

💻 🌍


💻 🌍 🐛

Terry Strachan

💻 ⚠️

Laurentiu Amagdei

💻 ⚠️

Petar Djordjevic


Zachary DeRose

💻 ⚠️


💻 ⚠️

Joost Zöllner

💻 ⚠️

Tomasz Kula

💻 ⚠️ 🐛