Trying Out Angular 18 Without Touching Your Current Projects

While building on an Angular 17 codebase, I wanted to test the new capabilities Angular 18 brings to the table. The challenge was doing so without jeopardizing projects already in production or under testing. A few obstacles stood in the way:

  • Global CLI: My system had Angular CLI 17 installed globally.
  • Node.js Version: Angular 18 demanded Node.js 18.19 or newer.
  • Zero Impact: The existing Angular 17 projects had to remain completely untouched.

Using Node Version Manager (NVM):

My solution was to employ a Node Version Manager (NVM). This tool lets you keep multiple Node.js versions installed and switch between them easily, which is perfect for projects with different requirements. The setup process went like this:

  1. Install NVM: The official NVM repository provides clear instructions for getting it installed here.

  2. Get Node.js 18+: With NVM in place, I ran the command

nvm install latest
Enter fullscreen mode Exit fullscreen mode

That fetched the latest Node.js release, which was version 22.4.1 at the time.

Building an Isolated Workspace:

After that, I set up a dedicated folder to house my Angular 18 test projects. Keeping this separate guarantees no accidental interference with the rest of my work.

Local Installation of Angular 18:

For the project-specific Angular 18 setup, I executed the following:

npm install @angular/cli@latest
Enter fullscreen mode Exit fullscreen mode

There's no -g flag there. This places the latest Angular CLI (18.1.0 back then) into the current folder only, leaving the global setup alone.

Unexpected Hurdle:

Angular 17 (Global installation)

Running ng new practice-project didn't work as expected; it still fell back to the global CLI version 17. The solution lies in using npx.

Node Package Executor (npx) to the Rescue:

The beauty of npx is that it runs npm packages without requiring a global install. This became my way to force the locally installed Angular 18 CLI into action for creating a new app. The magic command looks like this:

npx @angular/cli@18 new my-angular-18-project
Enter fullscreen mode Exit fullscreen mode

To confirm the setup, I check with ng version

Angular 18 (Local configured)

Finally, Exploring Angular 18:

Once all dependencies finished installing, a fresh Angular 18 app (my-angular-18-project) was ready. This setup gave me the freedom to dive into Angular 18’s features, like the new @let syntax, while my other projects continued to operate as usual.