Learning Angular: Installing Previous Versions
I’m learning Angular and I want to share my journey on here. I will be writing articles on specific topics in Angular, similar to a course, in a summarized form for me.
This time, I share how I solved the “version dilemma” between the current version of Angular and getting the version of Angular used in the learning materials.
This article will take you six minutes to read, probably less because there are error excerpts
I’m learning Angular again and the materials I am using isn’t up to date with the current version. My Vagrantfile installs the newest version by design, I want it to be on the cutting edge.
Except when I’m trying to follow specific learning materials!
I understand the Angular team increases the version number of Angular with each new release, targeted for a semi-yearly release cycle. Every six months, there is a new release Angular. In a single year, Angular will increase by two versions.
In general, learning materials should be valid, especially at the basics level, right?
Well, for Angular 8, the Angular 6 changes I tried to incorporate didn’t work out easily at first glance. (As I did research into this article, I found my error!)
As I was trying to debug, I wasn’t getting anywhere and this was the first chapter of the learning material! How was I ever going to get through the rest of it without constantly debugging?!
Ugh, guess I’ll have to find the Angular 8 version of the learning materials.
Can I just install Angular 6 instead?
The first solution did not seem appealing as that would mean I cannot learn Angular until the materials are up to date, once the materials are up to date, a new version of Angular would be out (remember, Angular is releasing a new version semi-annually!)
I decided the second solution of seeing how I can install an older version of Angular instead, just to learn.
Installing Specific Version of Angular CLI?
The normal solution I would take to install a previous version an application would be to destroy the vagrant box and update the Vagrantfile to install that exact version.
In this case, installing Angular 6 would require changing the following line from:
Now, when creating a new angular project using:
ng new, I’ll have an
Angular 6 based project.
Reusing Current Angular CLI?
Re-creating a vagrant box is easy, but I’ll need to be back on Wi-Fi to recreate it. Can I reuse the current Angular CLI?? Can the current installer/CLI tool install the previous version? It’s only two version before, right?
There is a way to have the current version of Angular install the
previous version use:
npm install @angular/cli@<version>.
Start with the current version of Angular installed (I have Angular 8 as of writing this article):
Now install the previous version, in my case, I want Angular 6:
Now, the default version of Angular will be Angular 6, even when a newer version Angular 8 installed.
To create a new Angular 6 application, just run
ng new like normal:
Previous Versions of Angular
If you need another version other than Angular 6, you have to install a specific version of the CLI.
Only with Angular 6 has the CLI version and Angular versions matched. If you want an Angular version older than Angular 6, use the table below:
To switch back to Angular 8, I thought installing Angular 8 directly would do the trick, but it did not. :-/
One way to accomplish this is to change the Angular version back to a
newer version is to modify the
package.json file and change the
Another way is to just take the
package.json file from a fresh
Angular install and run:
$ ng update to take the generated
application for an older Angular and update it.
Just start over
At this point, I don’t believe the Angular CLI tool supports going
back and forth between different versions like this. In my testing and
research for this article, I found that Angular 6 was the default,
even when running
$ ng new --version 8 <project name>.
My recommendation is to only install one version of angular other than the default one. If you need to switch back to the newest, it might be easiest (and safest!) to create a brand new install (either a new vagrant box or remove all angular items npm).
Thank goodness I did this in a vagrant box instead of the host computer. Imagine if I needed to be able to develop a real Angular application while learning?!
Using the current version of Angular CLI to install previous versions of Angular is possible when installing that version’s CLI. In my case, I had Angular 8 create Angular 6 projects after installing Angular CLI for version 6.
After playing around with the CLI more, it didn’t feel like there’s a smooth transition between Angular versions. Installing an older Angular CLI to work with it will work in a pinch, I believe the better solution will be to just start fresh, especially with any real production projects.
This underscores a good reason to use vagrant boxes for all
development, even learning. As the guest computer ran into issues with
Angular versions, npm installations, etc. I can run
and start over. If the host computer ran into issues, at worse, I
would have to reformat the drive and rebuild everything on the host