Check out our Angular Book Series.

How do I get the versions of all installed Node Modules?

I've been working on an Angular project with my team, and we ran into a situation where tests were failing for a couple of team members, but working fine for everyone else. It was infuriating. We decided the issue must be with a version mismatch of some library, as opposed to the test itself.

Node libraries, by definition, have a lot of inner dependencies. How do we get a list of all the top level libraries installed on each user's respective machine? It's easy:


npm list -global -depth 0

The npm list command will give you the list. The `-global` flag will tell you to list all node packages installed globally.

The depth will give us the top level package, but none of the internal dependencies.

Run this and I get something like this:

I only have the Angular CLI installed globally.

To get a list of locally installed libraries, you can just drop out the global flag:


npm list -depth 0

If you want see the full list of dependencies, you can leave out the depth argument entirely.

Using this approach, we were able to determine the differences in installed base of the affected users vs the ones who could still run tests. It was a good first step in debugging the issue.

How do I Fix a TypeScript Version Mismatch when Upgrading to Angular 8

I recently upgraded a project from Angular 6 to Angular 8. I expected, primarily, this to go through with very few issues but did run into one. The Update Angular site gives a lot of great instructions, but they did not all go smoothly.

Specifically when trying to update the angular/core library I was getting an error similar to this:


Error: The Angular Compiler requires TypeScript >
=3.4.0 and <3.5.0, but 3.5.2 was found instead.

Migration can be rerun with "ng update @angular/core -from 7 to -8 --migrate-only"

First the command they said to use to rerun the upgrade failed. I opened up the package.json and saw this:


"typescript": "~3.4.5"

If the package.json tells me node to install 3.4.5, why was a later version installed? It took me a while to figure out what the problem was. The '~' before the version number means it can go higher, and in fact 3.5.2 was installed. I was able to address this by manually specifying a version number:


npm install typescriptg@">
=3.4.0 <3.5.0"

Then I reran the update script and things were solved.

Why can't I install envsub on Windows?

I'm working on an Angular project which has a dependency to envsub. This is a Node project will allows for environment variable substitution when generating files as part of a build process.

Unfortunately, it includes a postinstall hook which always fails on Windows. The error is something like this:


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! envsub@3.1.0 postinstall: test -d .git && cp gitHookPrePush.sh .git/hooks/pre-push || true
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the envsub@3.1.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

The postinstall hook uses the && to run multiple commands and this is not a valid on Windows, but does work on unix style environments such as OSX or Linux.

My solution to getting the project installed was to run it through git bash, although I suspect it would also work on WSL.

This problem has already been solved in the main repo for envsub, the the npm package has not yet been updated.

What do the symbols before the version number in a package.json file mean?

I'm writing this primarily so I don't forget, because I always have to look it up.

Open up a package.json file for any node project you're working on. You'll probably see some lines like this:


"@angular/cli": "~8.0.1",
"karma-jasmine-html-reporter": "^1.4.0",

I borrowed these from a local Angular project I'm working on. The dependencies and devDependencies are a list of key value pairs. The key is the name of the library, and the value is the version number. but, there are symbols before the version number. What do they mean?

First the version number follows a semver syntax. this means the version number follows the format of:


MajorVersion.MinorVersion.PatchVersion

The symbols in front of the version number relate to these types:

  • Tilde (~): Specifies to load the latest patch. So, version 8.0.1 of the Angular CLI may install 8.0.2 or 8.0.5, but will never upgrade to 8.1.
  • Caret (^): Specifies to load the latest minor version. So, for the karma-jasmine-html-reporter, we might install 1.4.1 or 1.5.5 or 1.9.0, but will never upgrade to version 2
  • No Symbol: If there is no Symbol in front of the version number, then the exact version will be installed with no variation.

Those are the most common values I see in package.json, but you can actually do a lot more in the version field including an asterisk (*) to specify any version is acceptable. Or you can use greater than (>) or less than (<) to specify a version greater than or less than the given version number. You can even apply a version range or point to a local path.

There is a lot more to this than I thought.

All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.