Upgrade Angular 4 app to Angular 5 with Visual Studio 2017

Last month, Angular 5 was released with some code breaking changes. You can refer to this post for the list of changes. I was playing with Angular 5 and as part of this learning process; I thought of upgrading one of my previously created Angular 4 app to Angular 5. You can read my post about creating an Angular 4 application with Visual Studio 2017. This post talks about how to upgrade Angular 4 app to Angular 5 with Visual Studio 2017. The steps given in this post are applicable for Angular 4 apps created using Visual Studio 2017, but some of these steps will also apply to Angular 4 apps created using other ways.

Upgrade Angular 4 app to Angular 5

Configuring Angular with the Visual Studio was never straightforward until a few Angular ready templates introduced in Visual Studio. Similarly, the whole upgrade process also gives the same experience. It is not straightforward and time-consuming as Angular 5 has some code breaking changes. Let’s see this step-by-step process.

First, close all instances of Visual Studio 2017 as in my case the Angular package upgrade didn’t work when the VS was running. NPM could not upgrade the packages. So I suggest you to close VS instances.

Open PowerShell (Make sure to run it as Administrator). You can also use Node.js command prompt. I first tried with Node.js command prompt, but the packages were not updated in VS 2017. Then, I tried with PowerShell and things worked.

Browse to the location of the project and run dir command. You should see package.json file present in the output listing.

Update the Angular packages using the following commands.

npm install -g npm-check-updates

and ncu -u

If you get any error while running these commands, update your node and npm version. You can follow the instructions given in this post to upgrade node and npm.

You should see all the Angular packages are upgraded to Angular 5.

Open your Angular 4 project in Visual Studio 2017 and go to Dependencies-> npm to check the Angular version. The packages should point to Angular 5.

If the packages are still pointing to Angular 4, then delete the package-lock.json and follow the above-given steps again.

As you know, Webpack is used as module bundler by Visual Studio. Webpack uses AotPlugin to compile the Angular 4 apps, now Webpack no longer uses Aotplugin for Angular 5. It now uses AngularCompilerPlugin. You can read more about this here.

So open webpack.config.js and replace all occurrences of AotPlugin with AngularCompilerPlugin.

Open ClientApp/boot.server.ts file and replace the following line of code (line no.22).

const zone = moduleRef.injector.get(NgZone);

with,

const zone: NgZone = moduleRef.injector.get(NgZone);

Switch from Http Service to HttpClient Service. In Angular version 4.3 HttpClient was shipped in @angular/common as a smaller, easier, and more powerful way to make web requests in Angular. The new HttpClient has gotten some great praise from developers, so HttpClient is recommended by the Angular team for all applications, and @angular/http library is deprecated. To update to HttpClient, you’ll need to make the following changes:

Replace HttpModule with HttpClientModule from @angular/common/http in each of the modules.

Inject the HttpClient service.

Remove any map(res => res.json()) calls.

The fetch data component uses HttpModule. It is located at “ClientApp/app/components/fetchdata”. Open the file and replace it with HttpClientModule. The following changes need to be done in the fetchdatacomponent.ts file,
Replace All Http Declarations with HttpClient,

import { Http } from '@angular/http';

with,

import { HttpClient } from '@angular/common/http';

HttpClient provides high-level abstractions for application programming. With Http, the fetch data service code is like:

That’s it. We are done with all the changes required to upgrade the Angular 4 app to Angular 5. We can now run the app to see Angular 5 app in action. You may see the following exception in the browser.

“NodeInvocationException: No provider for PlatformRef!”
To fix this issue, update the webpack to the latest version. Execute the following command in PowerShell to update webpack,

npm install --save-dev @ngtools/webpack@latest

Build the app and run again. You should see app running in the browser. You can verify the Angular version by visiting counter component.

Summary

To conclude, this post takes you through a detailed guide for upgrading Angular 4 app created using Visual Studio 2017 to Angular 5. The main changes are with respect to upgrading Angular packages, changing Angular compiler plugin used by webpack and switching from Http to HttpClient module. The whole process is quite time-consuming and not documented anywhere. It would be ideal to have an automatic upgrade and an option to choose the Angular version while creating the project in Visual Studio to avoid burning the midnight oil.

Thank you for reading. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.

PS: If you found this content valuable and want to return the favour, then

Hi, I’m following the first few steps (close VS, open powershell as admin, run `npm install -g npm-check-updates` followed by `ncu -u`, open Visual Studio, check dependencies, if no, then delete package-lock.json and try again), but this doesn’t work.

When I run `npm install -g npm-check-updates` I get a warning that says, “npm WARN npm@3.10.10 had bundled packages that do not match the required version(s). They have been replaced with non-bundled versions. +npm-check-updates@2.14.1″. Then when I run `ncu-u`it will initially say all my packages have been updated to the latest. I’ll open VS2017 and it still shows my packages as being 4.2.5. If I close it and repeat the commands, I get the same warning, and then `ncu -u` always reports “aspnet-webpack ^2.0.1 -> ^2.0.3”.

I have no package-lock.json in the directory where the solution lives. Any ideas? I’ve followed multiple guides and none of them work for me.

Here are the steps to update the VS 2017 dependencies:
– Delete the npm-shrinkwrap.json file. (You cannot see it in VS 2017 until you “show all files”).
– Upgrade Angular to version 5.x in your package.json with the steps mentioned above in that post.
– Add manually the “popper.js”: “^1.12.5” in your package.json (this package is required later in the steps to upgrade angular)
– Run npm install (that will install popper)
– Run VS 2017 solution. (that will update the Dependencies/npm packages in VS 2017)

After these steps, a package-lock.json file will be created. Be sure to delete that file if you have any issue later during package update.

I have followed the steps above (for the mentioned VS+Angular template setup) but it only updates 2 packages for me… I DEFINITELY don’t have the package-lock.json anywhere within the project dir but found the npm-shrinkwrap.json.
I have tried using Node.js command prompt and Powershell (both run as admin) with all instances of VS closed.
Everything seems to run smooth and no errors are reported; the package.json is now showing the latest package versions but the packages under npm folder still restore to the original 4.2*
I’ve removed the contents of the node_modules folder in the proj dir and tried restoring several times… still no joy…

Hi,
When I run the app (debug) the js files are minified and bundled in one file and I see this console message:
The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this environment.

How do I set the mode to development so I get unminified files in debug mode?
(I’m running IIS express because the site needs Windows authorization)
thx!

Robert,
You can change the environment setting in two ways.
1. Right click on Project -> select properties -> navigate to debug tab and set ASPNETCORE_Environment variable value to “Development”.
2. Go to command prompt and navigate to your project directory and execute the following command.
“SET ASPNETCORE_Environment=Development”

Thanks for the post.
Since I made these changes, I lost the ability to set breakpoints in the Typescript code. Every breakpoint now shows an open red circle and says “The breakpoint will not currently be hit. No code has been loaded for this code location”. I had done your last step of upgrading to the latest webpack (even though I didn’t have that exception).

I backed up and did the upgrade again. I checked whether I still had breakpoints after each step. They still worked after I did “npm install -g npm-check-updates” and “ncu -u”.
But after I made the changes to webpack.config.js and boot.server.ts, I got the error on the breakpoint that was set.

Thanks for the suggestion. For now I got around the problem by not switching from Aotplugin to AngularCompilerPlugin. The link you included gets the error “No symbols have been loaded for this document.” I’m getting “No code has been loaded for this code location”. The first suggested solution in that link involved finding which symbols are missing. The second one involved removing a conflict in duplicate file names with mixed case. I had that problem once before and resolved it.

It seems that Core 2.0 builds with an npm-shrinkwrap.json file. This seems to perform the same duties as the package-lock. Interestingly, when I deleted the npm-shrinkwrap and ran npm install after updating the package.json a package-lock.json was built to replace the mpm-shrinkwrap.

@Garnx – I am hitting the same error. The line that it’s failing on in boot.browser.ts is “import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;”. I assume your line “8:0-74” is the same import statement.
Were you able to find a solution or further information?

I am not finding the package-lock.json file. The package.json file points to Angular 5.2.1 but when I open the dependencies folder the node packages are still pointing to 4.2.5. Any help would be appreciated.

The package-lock.json file will be visible only when you click show all files option in solution explorer. It is hidden by default. I also faced the similar problem but deleting the lock file helped me to fix this issue.

Looks like you and I have been playing with the same tools i.e. .Net Core and Angular in 2017.

Well, I recently solved this problem, and I had to use Node v9 and latest NPM to upgrade to Angular5, because somehow Node v5 or v7 were not updating the Angular’s packages to v5. Well, thanks again. Great Post indeed!