Upgrading from Angular 5 to Angular 6

My experience with Angular learns that not every tutorial may work for you, and nothing is documented properly. So I decided to write about my experience upgrading Angular 5 to Angular 6 with the ASP.NET Core Single Page Application (SPA) Template.

At the time of writing this article, version 6.2.7 was the latest. I did not want to upgrade to 7.x just yet.

npm install -g @angular/cli@6.2.7
npm install @angular/cli@6.2.7

All other tutorials seemed to suggest that executing the command below was sufficient, however for me it didn’t do anything.

My ‘angular-cli.json’ wasn’t being converted to ‘angular.json’ at all. Writing ‘angular.json’ manually, is also a very bad way of doing things, so I kept looking. You can always learn more about this file format here.

npm update @angular/cli

Eventually I put something together. Since I was upgrading coming from Angular CLI 1.7.4, what did work for me was:

npm update @angular/cli --from=1.7.4 --migrate-only

Sadly enough, this is not documented anywhere, at least not where I would expect it to be documented. When this is done, upgrade all individual @angular/… packages and their dependencies.

Now if you run ‘ng serve’, you will get the error message below:

InvalidOperationException: The NPM script ‘start’ exited without indicating that the Angular CLI was listening for requests. The error output was: Unknown option: ‘–extractCss’

This is because ng serve no longer supports the –extract-Css option, which you may have already found out.

Now in your ‘packages.json’, you will also have to remove ‘–extract-Css’ from the ‘ng serve’ command.

Last but not least, if your Angular project was created inside an ASP.NET Core project with Visual Studio, you may also need to change:

--bh your-path

To:

--base-href=your-path

Last but not least, you need to upgrade ‘RxJs’ and remove backwards compatibility. Run the following commands:

npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json
npm uninstall rxjs-compat

Then finally, run ‘ng serve’ to verify your project is compiling.