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?!

Solutions??

Ugh, guess I’ll have to find the Angular 8 version of the learning materials.

OR

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:

npm install @angular/cli

to:

npm install @angular/cli@6

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):

vagrant@ubuntu-bionic:$ npm install @angular/cli
...
vagrant@ubuntu-bionic:$ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.18
Node: 12.13.0
OS: linux x64
Angular: 8.2.13
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
...

Now install the previous version, in my case, I want Angular 6:

vagrant@ubuntu-bionic:~$ npm install @angular/cli@6
npm WARN deprecated fsevents@1.2.9: One of your dependencies needs to upgrade to fsevents v2: 1) Proper nodejs v10+ support 2) No more fetching binaries from AWS, smaller package size
...
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ @angular/cli@6.2.9
...

Now, the default version of Angular will be Angular 6, even when a newer version Angular 8 installed.

vagrant@ubuntu-bionic:~$ ng --version
Your global Angular CLI version (8.3.18) is greater than your local
version (6.2.9). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.2.9
Node: 12.13.0
OS: linux x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

To create a new Angular 6 application, just run ng new like normal:

vagrant@ubuntu-bionic:~$ ng new test6
Your global Angular CLI version (8.3.18) is greater than your local
version (6.2.9). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
CREATE test6/README.md (1022 bytes)
...

Easy, right??

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:

inspiration documentation

Switching back?!

To switch back to Angular 8, I thought installing Angular 8 directly would do the trick, but it did not. :-/

Update package.json

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 following section:

<     "@angular/animations": "^6.1.0",
<     "@angular/common": "^6.1.0",
<     "@angular/compiler": "^6.1.0",
<     "@angular/core": "^6.1.0",
<     "@angular/forms": "^6.1.0",
<     "@angular/http": "^6.1.0",
<     "@angular/platform-browser": "^6.1.0",
<     "@angular/platform-browser-dynamic": "^6.1.0",
<     "@angular/router": "^6.1.0",
<     "core-js": "^2.5.4",
<     "rxjs": "~6.2.0",
<     "zone.js": "~0.8.26"
---
>     "@angular/animations": "~8.2.13",
>     "@angular/common": "~8.2.13",
>     "@angular/compiler": "~8.2.13",
>     "@angular/core": "~8.2.13",
>     "@angular/forms": "~8.2.13",
>     "@angular/platform-browser": "~8.2.13",
>     "@angular/platform-browser-dynamic": "~8.2.13",
>     "@angular/router": "~8.2.13",
>     "rxjs": "~6.4.0",
>     "tslib": "^1.10.0",
>     "zone.js": "~0.9.1"

Use ng update

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.

vagrant@ubuntu-bionic:~/test85$ ng update
Your global Angular CLI version (8.3.18) is greater than your local
version (8.2.2). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
Using package manager: 'npm'
Collecting installed dependencies...
Found 31 dependencies.
    We analyzed your package.json, there are some packages to update:

      Name                               Version                  Command to update
     --------------------------------------------------------------------------------
      @angular/cli                       8.2.2 -> 8.3.19          ng update @angular/cli
      @angular/core                      6.1.10 -> 8.2.14         ng update @angular/core
      @angular/core                      6.1.10 -> 7.2.15         ng update @angular/core
      rxjs                               6.2.2 -> 6.5.3           ng update rxjs

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?!

Conclusion

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 vagrant destory 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 computer.