Angular

I have decided to start my journey with Angular in the Budget app I want to build. It is simple enough to get me started but also has enough moving parts to make it a good learning tool.

Before I get started, however, I want to make sure I have the latest version of Angular. It is already installed on my machine because I have messed around with it some in the past.

So I opened up a console and typed:

$ ng --version

This showed me I have version 6.0.8 installed on my machine. When I checked for the latest version, I saw that it is 7.0. So I needed to update my version.

I searched for “update angular 6 to 7 globally”, which brought up up this article on AppDividend. However, these instructions didn’t quite work for me.

I followed the instructions to uninstall the Angular CLI by running this:

$ npm uninstall -g angular-cli

However, this did not work. All I saw was:

up to date in 0.03s

I searched for “npm uninstall global not working” and came to this StackOverflow question. While it did not quite answer my question, it did lead me down the correct path.

From the top answer, I ran this command:

$ npm ls -g --depth=0

which gave me this output:

+-- @angular/cli@6.0.8
`-- typings@2.1.1

Now I saw my problem. I needed to uninstall @angular/cli instead of angular-cli. When I did it correctly, I saw this:

$ npm uninstall -g @angular/cli
removed 248 packages in 3.341s

Alright, now that I had the old version uninstalled, installing the new version should not have been hard. Back to the AppDividend article and:

$ npm cache verify
$ npm install -g @angular/cli@latest

And there we have it! Right?

Nope.

> @angular/cli@6.0.8 postinstall C:\Users\***\AppData\Roaming\npm\node_modules\@angular\cli
> node ./bin/ng-update-message.js

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\@angular\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @angular/cli@6.0.8
added 242 packages in 10.904s

Why did it still install the old version? I don’t know. The article says to run this command if the old version is still there:

$ ng update @angular/cli

However, when I run that I get:

Could not find a package.json. Are you in a Node project?

Which is the problem that sent me down this rabbit hole in the first place. I wanted to update Angular globally, not just for a project.

Next I decided to try updating it using npm. Just guessing, I ran this:

$ npm update -g @angular/cli
C:\Users\***\AppData\Roaming\npm\ng -> C:\Users\***\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\@angular\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @angular/cli@6.2.9
added 90 packages, removed 3 packages and updated 12 packages in 12.713s

Progress! Angular has now been updated from 6.0.8 to 6.2.9! But why did it not install that in the first place? I told it to install @latest.

I was really confused. I decided to attempt to install the latest version explicitly instead of through @latest. According to Wikipedia (since I couldn’t find it anywhere else), the latest stable release is 7.2.4

$ npm uninstall -g @angular/cli
$ npm install -g @angular/cli@7.2.4
C:\Users\***\AppData\Roaming\npm\ng -> C:\Users\***\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\@angular\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @angular/cli@7.2.4
added 294 packages in 13.146s

Success! Finally.

I’m still not sure why @latest did not work. But I’m updated to the latest now so I am not going to worry about it.

In my next post, I am going to start building out my Budget project using Angular and VSCode.

The launch of this blog gives me the opportunity to discuss my development environment.

My development environment has not changed much over the 20 years of my career. I started out as an intern in 1998 right around the release of Visual Basic 6. My first job was VB6 using a SQL Server backend.

Since then I moved to C# but continued to work with Visual Studio and SQL Server throughout their subsequent upgrades. Right now my environment looks like this:

Windows (7 at my day job, 10 at home)
Visual Studio (2015 Pro at work, 2017 Community at home) with ReSharper
SQL Server Express (only at home)
SQL Management Studio (again only at home)

I have used this environment to build ASP.NET MVC apps, WPF apps, Windows Forms app, ASP.NET Web Forms apps, and Xamarin mobile apps. While it has served me well, I am wanting to shift towards more of a free/open source environment.

The main reason I want to do this is for app development. As you probably know, you have to have a Mac if you want to build iPhone apps. You can do all the development on another machine but you have to have a Mac of some kind to build, test, or deploy.

I worked on mobile apps at a previous position. The Mac requirement meant I was walking around with 2 machines. I had my Alienware laptop for development and then a low end MacBook Pro for when I needed to test or deploy the iPhone app. I would love to be able to have one machine to do it all, which means I have to find a way to do my development on a Mac.

Luckily Microsoft has really embraced open source over the last few years. This makes it possible for me to stick with C#/.NET while not being tied to Windows anymore.

Here is the development environment I am going to be using for the projects I write about on this blog.

Windows 10 (For now. I will be looking to get a Mac in the near future to fully make the transition.)
VSCode
MySQL

I will use these programs to build .NET Core applications. I am also using this as an excuse to finally learn Angular.

I have tried to make this transition a few times in the past but have been tripped up by a couple things.

No ReSharper in VSCode – I have come to rely on this plugin a lot, which is probably not a good thing. It will probably be good for me to get away from it. I just have to push through the initial frustration.
The command line – It is going to take me some time to get used to doing things through the command line.

These hang-ups are not too much for me to overcome if I just resolve to do it. So that is what I am going to do.

Updating Angular

My Development Environment