We started receiving requests for teaching an advanced Angular workshop. My colleague Anton and I started preparing the courseware and are planning to offer such a workshop this fall. Below is a draft of this course outline, which will start with refactoring and upgrading the ngShop app that we’ve  created for one of our Intro to Angular courses.  Please take a look at the draft below, and if you see some topics that should be added to this workshop, please leave comments to this blog. Thank you!

Advanced Angular Course (draft)

1. Using UI libraries: Angular Material and PrimeNG

   1. Adding @angular/material package to the ngShop application
   2. Configuring custom theme / SCSS
   3. Laying out component with @angular/flex-layout library
   4. Programmatically changing UI layouts with MediaQueryList
   5. Combining Angular Material 2 and the PrimeNG UI components

2. Modularizing Angular application:

   1. Minimizing the initial app payload by splitting it into modules
   2. Lazy-loaded modules and preloaders
   3. Adding new Admin module to ngShop
   4. Configuring a lazy-loaded route for Admin module
   5. Configuring route resolvers

3. Application Security with JWT

   1. Intro to JWT-based authentication
   2. Adding a JWT-based Login page
   3. Authorizing access to the Admin module via route guard
   4. Adding JWT token to the HTTP requests required authorized access
   5. Handling Unauthorized errors

4. Dynamically adding components to your app

   1. Creating a dynamically configurable  Dashboard page
   2. Dynamically adding components with ComponentFactoryResolver
   3. Dynamically adding components with

5. Advanced work with Forms

   1. Creating custom form controls. ControlValueAccessor.
   2. Splitting complex forms into multiple Angular components
   3. Validating form groups
   4. Refactoring the Checkout page of ngShop
   5. Adding an inventory page with a data grid

6. End-to-end testing with Protractor

7. Production deployment

   1. Customizing Webpack build configuration and  ng eject
   2. Building Angular application on the Continuous Integration server
   3. Running tests on CI
   4. Automatic deployments to the nginx server
   5. Configuring HTTPS
   6. Combining multiple Angular apps under a single domain
   7. Server-side rendering with Angular Universal

8. Refactoring ngShop to introduce state management  with ngrx

   1. Benefits of  unidirectional data flow
   2. Managing state with @ngrx/store
   3. Time-travelling debugging with @ngrx/store-devtools
   4. Using  HTTP APIs with @ngrx/effects library
   5. Integration with the router via @ngrx/router library