Sharing Top Content from the Angular-sphere.

Upgrade Angular 4 app to Angular 5 with Visual Studio 2017 #angular #angular4 #angular5

Upgrade Angular 4 app to Angular 5 with Visual Studio 2017 #angular #angular4 #angular5

  • Last month, Angular 5 was released with some code breaking changes.
  • 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.
  • It is not straightforward and time-consuming as Angular 5 has some code breaking changes.
  • /fetchdata.component.html’ }) export class FetchDataComponent { public forecasts: WeatherForecast[]; public cacheForecasts: WeatherForecast[]; public summaries: any[]; constructor(httpClient: HttpClient, @Inject(‘BASE_URL’) baseUrl: string) { + => { this.forecasts = result; this.cacheForecasts = this.forecasts; }, error => console.error(error)); httpClient.get(baseUrl + => { this.summaries = result; }, error => console.error(error)); } filterForeCasts(filterVal: any) { if…
  • The main changes are with respect to upgrading Angular packages, changing Angular compiler plugin used by webpack and switching from Http to HttpClient module.

Find out how to upgrade Angular 4 app to Angular 5 with Visual Studio 2017. Fix for “NodeInvocationException: No provider for PlatformRef!”

Last month, Angular 5 was released with some code breaking changes. You can refer to 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 app to Angular 5. You can read my post about . 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.

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 command. You…

Upgrade Angular 4 app to Angular 5 with Visual Studio 2017 #angular #angular4 #angular5