SPA & ASP.NET Core – Part 2: Upgrading to Angular 5

Posted on by

This is the second in a series of posts about building Single Page Applications with ASP.NET Core 2.0. In this post, I’ll show you how to upgrade to Angular 5. In the previous post (Part 1: Create a SPA) I showed you how to create a SPA with Angular and ASP.NET Core.

For those of you working with Angular, I’m sure you’ve noticed the template is using 4.2.5. If you’re ready to move to version 5 there are two options;

  1. For existing projects you can upgrade manually, or
  2. For new projects, download the release candidates of the new templates.

In this post, I’ll show you how to manually upgrade an existing project to Angular 5.

Upgrade Steps

  1. Open package.json and update all Angular dependencies to version 5.2.2 as follows: 
    "@angular/animations": "5.2.2",
"@angular/common": "5.2.2",
"@angular/compiler": "5.2.2",
"@angular/compiler-cli": "5.2.2", 
"@angular/core": "5.2.2",
"@angular/forms": "5.2.2",
"@angular/http": "5.2.2",
"@angular/platform-browser": "5.2.2",
"@angular/platform-browser-dynamic": "5.2.2",
"@angular/platform-server": "5.2.2",
"@angular/router": "5.2.2",
"@ngtools/webpack": "1.9.8",
"@types/webpack-env": "1.13.5",
"aspnet-prerendering": "3.0.1",
"aspnet-webpack": "2.0.3",
"awesome-typescript-loader": "3.4.1",
"css-loader": "0.28.9",
"file-loader": "1.1.6",
"html-loader": "0.5.5",
"json-loader": "0.5.7",
"preboot": "5.1.7",
"rxjs": "5.5.6",
"style-loader": "0.20.1",
"typescript": "2.6.2",
"url-loader": "0.6.2",
"webpack": "2.6.1",
"webpack-hot-middleware": "2.21.0",
"webpack-merge": "4.1.1",
  2. Open webpack.config.js and update as follows:
    Update line 4:

    const AotPlugin = require('@ngtools/webpack').AngularCompilerPlugin;

    Update line 20:

    { test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' },
  3. Open webpack.vendor.config.js and update as follows:
    Insert after line 46:

    new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)esm5/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/20357
  4. Ensure you have saved changes to all files, then execute the following commands at the command prompt: 
    npm install
node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js
node node_modules/webpack/bin/webpack.js --config webpack.config.js
dotnet run

If you encounter any issues, reviewing this commit may help you to identify the problem.

Next Steps

In the next post, I’ll show you how to automatically generate client-side services for accessing your Web API.

Thanks for reading, please feel free to post any questions or comments below.