Handle multiple Angular projects with different versions

Everyone who is using npm understands that old projects will fall apart, because versioning drifts

What if we want to check out a newer version of Angular or any other framework. We can’t upgrade our global CLI installation every time, especially when we have restrictions.

I recommend to only install often used packages globally. For the rest we should only install packages locally. This will help us get rid of the trouble with global installed packages dependencies. So, we are not running into versioning problems and can test new versions.

Normally we would install Angular globally and create a project like this:

npm install -g @angular/cli //installs latest version
ng new my-app

// to install specific version
npm install -g @angular/cli@10.0

There are several options to execute the ng binaries with the direct node_modules path or to set it inside the npm script inside the package.json. For a better solution npx comes into the spotlight!

If you want to delete your global CLI version from now on use this:

npm uninstall -g @angular/cli

Using npx to generate your angular project

npx @angular/cli new my-app
// or use this
npx -p @angular/cli ng new my-app

As a result the command above will generate the newest angular version released. Look inside the package.json to validate it, but trust me everything works like a charm.

what if we want to install or test a specific angular version? Therefore we can modify the command like this:

npx @angular/cli@SPECIFIC_VERSION new my-app

Using npx to generate components and start the app

npx ng generate component my-component
// we cant use the 'ng generate component my-component' as we are not having the angular installed globally

npx ng serve 
// we cant use the 'ng serve' as we are not having the angular installed globally