Introduction

[00:00:00]
>> Alex Okrushko: Hello everyone. Welcome to Frontend Masters Advanced Angular course. I'm here, Alex Krushko, happy to see you. So what do we go over the advanced course? We're building on things we learned already in the Angular fundamentals course by Mark Texson and also intermediate Angular that by truly yours. So what we're going to learn today is some more advanced techniques. We're going to look at the SSR, we're going to look at the other performance optimizations in modern Angular, we're also going to touch on advanced components and state management.

[00:00:44]
So the takeaways that you should have by the end of the day is we're going to learn again new next gen rendering and the performance improvements that Angular brought in the recent releases. We're going to be focusing mostly on Angular 21, that's the latest release at the time of the recording. I'm going to look at some advanced UI patterns and more dependency injection techniques, we're going to touch on RxJS a little bit, especially in the concurrency race conditions, which I think is truly where RxJS shines and becomes invaluable part of Angular.

[00:01:24]
We're going to look at the enterprise state management, of course, signal store is a big new shiny thing, very popular in the enterprise or even other smaller Angular applications. And we'll touch on testing as well with Vitest, which became the new default test, tester for Angular 21. So, about me, quickly, I'm going to reintroduce myself, 17+ years in software engineering, I've led teams across many companies like Google, Cisco, and Snowflake.

[00:02:05]
I've been part of a core team of NgRx for a while now. Google developer expert in Angular, and again, I love sports and mentorships. This course is the continuation of what we've been learning in intermediate Angular, and we're going to be building on top of it, doing some changes, improvements, and advanced techniques. It's structured with 5 modules, each has multiple steps in them.

[00:02:36]
I'm going to go over each module. I do encourage coding along with me, because I feel like that's the best way to learn, and this is where you might run into the questions that I'll be very happy to answer during the course, and we're going to do all the code reviews as well. So these slides are at this link, again, there's not a lot in the slides, but you can still have them if you want to, the project code is, also there's a link for the project code, but hold on again, if you are coming for the Angular advanced from scratch, give me a second, I'm going to show you how to best handle the code.

[00:03:24]
We do need the latest Node installation, Angular CLI, your favorite editor, and once you download the code and install the code, it will also prompt you to install Angular Language Service, which I highly recommend is a big helper for code assist in IDE with Angular. So we're working with Angular version 21.0.3, this is the latest version as the time of recording. If you don't have a project yet, go to the project that I shared, and make your own fork first.

[00:04:05]
I very much encouraged to make your own fork first so you can commit code as well as you complete exercises. When you do the fork, make sure you uncheck to copy the main branch only, because then you'll get all the tags that come with it as well. Tags help us navigate the code. If you don't want to do that, you can just copy my repo as well, clone it, but you won't be able to push any changes into this.

[00:04:44]
Once you get the code, please check out the tag D2M1. This is the beginning of the advanced Angular course. If you were working in the intermediate Angular, then you should be all up to speed after you completed all those courses, so you don't have to submit, commit, check out any other branches, but if you're new, this is the, oh, you want to start fresh. You can check out the D2M1.

[00:05:15]
You do need to install with a force flag, because we Angular 21 was just recently released, there are some still dependencies that are expecting Angular 20, so Force will make sure that you can copy and install all the latest things and you do install everything, and then, npm run dev will start your frontend and backend. So if you do run the npm run dev, you should see something like this in your localhost 4200, this is the current state of the application.

[00:05:47]
I'm going to go over the application again, just to see where we are right now and what's the code structure is for this.