Angular 6 is out! That’s great, except that the Visual Studio 2017 Angular templates haven’t been updated yet. BUT, all is not lost, because it’s actually (relatively) easy to upgrade. Let’s take a look!

Getting Started

Angular 6 includes a lot of tooling improvements, so it’s worth the upgrade. And thanks to the new ng upgrade command, upgrading your Angular projects has never been easier!

We’re going to start with the “enhanced” project we made in a previous post. You can check that project out here. The steps would be mostly the same if you were to take a stock Visual Studio Angular project.

If you have a more complex Angular project and want to see how difficult it will be to upgrade, you can use the new Angular Update Guide. But be warned! There are still issues with ng update, so the update guide might not work for you.

Installing Angular 6

The first thing we need to do is install the Angular 6 CLI. You can do this globally from the command prompt of your choice:

npm i -g @angular/cli

This gives us the latest-and-greatest Angular CLI. You can verify that you have it installed by running ng -v. You should see something like this:

Upgrading Your Project’s Tooling

We have Angular 6 installed globally, but our project has its own, local copy of the CLI, and that’s still the old version! We need to upgrade that, too! There’s a bit more work we have to do first though…

I’m actually not going to do things the official way. The docs will tell you to upgrade the CLI first. I tried that, but ran into issues. I followed the workaround from this issue instead.

Before you open your Visual Studio solution, navigate to the ClientApp directory of your project using your favorite command prompt.

First, use ng update to update all of your Angular references:

ng update

Next, update rxjs to take care of a dependency issue:

ng update rxjs

Now you can use ng update to update your project’s CLI:

ng update @angular/cli

This will remove your existing .angular-cli.json file, and add a new angular.json file. It will also update a handful of other files, too.

If you have other dependencies, such as Angular Material, you will need to perform some additional steps. The Angular Update Guide should get you pointed in the right direction.

We’re getting there! Now we’re ready to turn our attention to fixing up our project’s integration with Visual Studio 2017.

Fixing the Tasks

The old Angular project template called ng serve and ng build with the extract-css option. That option is no longer valid, so we need to remove it from our npm tasks.

Open your package.json file, and change the entries in the scripts section to remove the obsolete option from both the start and build tasks. You should have something like this after the change:

{
  //snip
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "npm run build -- --app=ssr --output-hashing=media",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  //snip
}

Now the start and build tasks should work again.

Putting it All Together

It should be safe to open everything in Visual Studio now. Task Runner Explorer should be able to run the npm start task without error, and we should be able to go ahead and run our app… You can go ahead and try it, if you want.

But me, I’m a bit skeptical… how will I know for sure that my app is actually using Angular 6?

There are a couple of ways, but here’s an easy one: I can make a small adjustment to the home view so that it displays the current Angular version.

In home.component.ts, I can import VERSION and make its full property available off of the component:

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent {

  version: string;

  constructor() {
    this.version = VERSION.full;
  }
}

Then I can display it in the view:

<h1>Hello, world!</h1>
<p>You are running Angular {{version}}!</p>
<!-- snip -->

Looks like it worked!

Get the Code

So there you have it: upgrading to Angular 6 is easy, though not quite as easy as it should be yet due to issues with ng upgrade. I’m sure those kinks will be worked out, and once they are, it will be easier than ever to stay up to date with the latest and greatest of Angular.

The code for this demo is checked in to the same Github repository that I used before. Feel free to check it out.

Did you find this post useful? Are there other topics you’d like to see me cover on this blog? Please drop me a comment below!