Introduction

Workshop: Enterprise Angular applications with NgRx and Nx

Building enterprise Angular applications is not easy and when you need to share code between multiple Angular mobile or web applications it is even harder. If you are about to kick off or are in the middle of a large application in Angular this workshop will prepare you to tackle implementing the best project structure and patterns using Nx workspaces and NgRx state management patterns.

In this workshop we walk through a thorough introduction into using ngrx, an RxJS powered state management library for Angular applications, inspired by Redux. We will use Nx or Nrwl Extensions an open source toolkit for enterprise Angular applications. nx is designed to help you create and build enterprise-grade Angular applications with proven project structure and patterns.

You will learn to use Nx to create a monorepo creating one or many Angular applications with a robust code sharing system using nx workspaces and shared libraries.

We will build and test an Nx application implementing ngrx actions, reducers, effects, entity adapters, router-store, onPush change detection and a single immutable data structure called the store.

We will look at common patterns for structuring your applications state by feature and how to deal with splitting up related data into multiple reducers. Then will we will look at how to create selectors to combine multiple slices of state from the store.

By the end of this workshop you will have built a working Nx and ngrx application you can extend into an enterprise application. You will also walk away with the source code and the course material. So join me and bring your laptops to this workshop where you will get to code along as we build and learn to make awesome Angular applications.

Day 1

• Angular mono repo architecture with the CLI and Nx workspaces

• Building shared Nx libraries with ngrx

• Redux and nrgx principles

• Angular fundamentals including components, routing, services and forms

Day 2

• Entity State adapter

• Splitting up related data into multiple reducers

• Creating ngrx selectors

• Router actions and effects

• Building and deploying you Nx application

• Unit and e2e testing

Prerequisites This workshop is for developers with at least a basic understanding of JavaScript and HTML. You do not need angular v2+ experience to attend this course but it is recommended to have done at least the beginner's tutorial on angular.io or equivalent. This course briefly covers the fundamentals of angular components, services, routing and modules but moves onto talking about using them with ngrx and Nx workspaces and enterprise patterns for the majority of the workshop.

Computer Setup:

• Visual Studio Code

• A command line Git client

• NodeJS (Latest stable version)

• Angular CLI

If you get stuck we can help you on the day but it helps to have this already installed.