Migration guide to Angular 19

Having just done a migration of Angular 16 SSR to Angular 19 SSR, I thought a guide might help others.
This could also be used for other versions of Angular later on (20, 21 etc). But as always it's best to wait a few months AFTER Angular has released their latest version so that all the libraries catchup.

1. Make sure that your current project is all committed into GIT and make a new branch "{your-project}-module-less"

2. Convert to module-less using:

   ng g @angular/core:standalone

   Follow this video = https://www.youtube.com/watch?v=_7kbgMu8XbI&t=55s
   Do each of the 3 steps separately in order.
   You might get "no provider" errors for services. Just add the provided in root for each file.
   You should see all the Imports now being put in place for each component

   - Also follow this video for the additional required way of sorting out lazy loaded modules = https://www.youtube.com/watch?v=VzYRFLnnzkE
   I had to manually remove each sub directory's module file, rename the routing file, export the const and import it differently in the loadChildren. After that process for each sub directory was I then allowed to remove the global shared module.

3. Commit to GIT. Now create a new branch "{your-project}-module-less-control-flow"

4. Convert to Control Flow Syntax using:

   ng generate u/angular/core:control-flow

   This worked for me straight away.

5. Save to GIT

   - Since this is a big enough update I haven't converted over to Signals just yet

6. Next you need to upgrade to Angular 19. Run this for global (doesn't matter which folder you run this command from):

   npm install -g u/angular/cli@19

7. Before the next step, make sure to delete your node_modules folder

8. Now we install locally to your folder:

   npm install @angular/cli@19

9. Commit your changes.

10. Now perform the update:

    ng update @angular/cli@19 @angular/core@19 --force

11. Delete your node_modules again.

12. Now we need to upgrade all your libraries, install this package to manage this:

    npm install -g npm-check-updates

13. Next run this to list out every library which needs the upgrade:

    ncu -u

14. If theres anything to upgrade then perform:

    npm install

15. I noticed as a result of my migration I do NOT get the standard file app.config.ts which is critical for Angular 19. I personally made a brand new Angular 19 project and copied my "app" folder files across. There may be a more elegant way of doing it but I couldn't find it.

16. That should be it! I noticed some other gotchas which other might learn from...

Gotchas!

1. If you have a password protected area which has guards in place you might notice that your login page will flash up briefly before it shows the real authenticated page. Follow this article to place in Server Routes = https://dev.to/this-is-angular/exploring-routes-rendering-modes-in-angular-bjg It's in Developer Preview mode but it works fine for me. So the authenticated pages will need: renderMode: RenderMode.Client

2. Your Resolvers should run fine providing they aren't declared upon your highest access level (as in running business logic upon accessing any page for the very first time). If you DO have a situation like that, then it's important to do the following: - You'll need to convert your Resolver to a normal Service. - Register this file on the app.config file and declare within a provideAppInitializer