How to install a specific Angular version
Let’s install different Angular releases in our local machine (works with AngularJS, Angular 2, Angular 4, Angular 5, Angular 6, Angular 7)
In a day to day job as a developer, sometimes we are asked to jump or to work with projects that are using different Angular releases.
This is due to many factors:
- your client, or your company, does not know that there is a newer and more secure Angular version already released or that this is going to be released soon;
- maybe the company is concerned that some libraries or plugins that they are currently using, will not work with the updated Angular version;
- the clients you are working with have not planned yet the most recent Angular update (…and they will never plan it);
- they would like to update the version, but there is no time in their plans to do it because of multiple deadlines they currently have (and they will always have).
The number of Angular releases… And still counting…
Especially now that there are several official releases outside, sometimes this issue is becoming a little bit stressful because you are going to deal with some deprecations or some new features that Angular’s developers have added. Remembering all of them is quite impossible but luckily TypeScript is a language that at least is helping us in finding automatically errors and alerting us when there is something wrong with the code.
The problem is that the lint feature is helpful only if the version you are using locally in your machine is the same as the project you are supposed to work with. Absurdly, it is a waste of time using
HttpClientModule in your local machine and then discover that your client’s project is in Angular 2! 😩
So, here is the question: how to install a previous version of Angular nowadays?
How to install a specific version of Angular?
Let’s start saying that to install/use the first version of Angular (commonly known as AngularJS) you just need to load the specific
1.x version using the the
script tag in the HTML: that’s it. Here there is a very powerful cdn with all the AngularJS releases.
Said that let’s see how to install a previous Angular version locally, starting from version 2 upwards.
Installing a specific Angular 2+ version
The most effective way to install an Angular project is Angular-CLI, as you may know. It gives you the project folder structure, all the basic settings and configurations, the starting test files for the components and the settings for them, the environment’s configurations, etc.
The problem is that Angular-CLI always imply that you use the most recent Angular version, if you install it following its documentation.
The trick that we are going to use is basically installing a specific Angular-CLI version in an empty folder and then use this specific version to create the project instead of the globally installed one.
It seems obvious, but there are few steps to follow to start an Angular project from scratch with a specific Angular-CLI version.
- In a new folder, that will be your “Node JS/Angular-CLI environment folder”, you need to initialize a simple
Node.jsproject with the command
npm initand follow all the steps that the
cliis asking: you do not have to be specific as we are going to delete this file pretty soon, so you can just skip them by pressing “Enter”.
- Install the Angular-CLI version that you need (have a look at the table below to have a quick reference of which version of the CLI is associated to the Angular version that you want to install)
npm install @angular/cli@<specify_angular-cli_version_here>
Just for Angular 2 use the following instead, as the CLI has been renamed after a while (this command will take much longer than the previous):
npm install angular-cli@<angular-cli_version_lower_than_0.1.0>
- Once the CLI has been installed, delete the Node project files except the newly created
node_modulesfolder. This means that you need to remove the
package.jsonfile and any other file or folder that it may has been created except for the
node_modulesfolder (or rename them differently).
With this process we are removing the restriction that is usually raised when you try to create an Angular project inside another one and we are basically creating a specific local Angular-CLI environment.
Note that, by default, the CLI use the local Angular-CLI rather than the globally installed one, so you can still use the latest version elsewhere.
A warning will remind you about this each time you will run any Angular-CLI command.
- Now you can create an Angular project with the command
ng new <project_name>. As said before, the local version of Angular-CLI will instantiate the project.
To confirm that, you will notice a warning and when the process has been completed you can easily check the
package.jsonfile inside the Angular project just created: you should be able to notice that the Angular version used in the newly created project is the one that you are looking for.
- If you want, you may now remove the
node_modulesfolder (the one inside the “environment” folder, NOT the one inside the Angular project).
I usually prefer to leave it there, if for some reason the cli starts having problems or I need to create another project with the same Angular version.
And that’s it! Your newly created project will work with the specific Angular version that you requested to install. 😌
Table with the CLI versions associated to their respective Angular version
║ ║ ║
║ Angular-CLI version ║ Angular version ║
║ ║ ║
║ firstname.lastname@example.org ║ Angular 2 ║
║ @email@example.com ║ Angular 4.0.0 ║
║ @firstname.lastname@example.org ║ Angular 4.2.4 ║
║ @email@example.com ║ Angular 4.4 ║
║ @firstname.lastname@example.org ║ Angular 5.2.0 ║
║ @email@example.com ║ Angular 6.1.0 ║
║ @firstname.lastname@example.org ║ Angular 7.2.0 ║
Even if we all know that it is sometimes impossible, you should always use the most updated version of any software/framework, and you should persuade your clients or your employer to update Angular (in this specific case) as soon as a newer version is officially released.
In any case, this solution wants to help developers in their day to day work when they are struggling to have a compatible environment for their own purposes with specific requirements.