This article explains how to use the latest version of Angular with Visual Studio 2017 everytime. And also, it shows the options for using different versions of Angular with each project.
We know that there are a lot of templates available in Visual Studio 2017 to create a new project with Angular and .NET Core. Obviously, these templates are great and very helpful. These templates deserve much appreciation.
However, for some developers, using a template/extension becomes a limitation or boundary and he/she stops thinking beyond this boundary, which is not useful for the developers. So, in this article, I am going to show you that we should not wait for any template or extension in Visual Studio to use the latest version of Angular.
Let’s try to understand it step-by-step and explore the options available for creating Angular App with Visual Studio 2017.
Option 1: Create an Angular App with .NET Core API in Visual Studio 2017 with inbuilt template
Step 1 - Open Visual Studio 2017.
Step 2 - Go to File >> New >> Project… (Ctrl + Shift + N).
Step 3 - Select “ASP.NET Core Web Application”. in the “New Project” window and provide other details.
Step 4 - Click "OK" button to continue.
Step 5 - Select "Angular Template" and click the "OK" button.
More detailed information can be found here.
Have a look at the “package.json” file.
“package.json” file complete code
- {
- "name": "WebApplication32",
- "private": true,
- "version": "0.0.0",
- "scripts": {
- "test": "karma start ClientApp/test/karma.conf.js"
- },
- "devDependencies": {
- "@angular/animations": "4.2.5",
- "@angular/common": "4.2.5",
- "@angular/compiler": "4.2.5",
- "@angular/compiler-cli": "4.2.5",
- "@angular/core": "4.2.5",
- "@angular/forms": "4.2.5",
- "@angular/http": "4.2.5",
- "@angular/platform-browser": "4.2.5",
- "@angular/platform-browser-dynamic": "4.2.5",
- "@angular/platform-server": "4.2.5",
- "@angular/router": "4.2.5",
- "@ngtools/webpack": "1.5.0",
- "@types/chai": "4.0.1",
- "@types/jasmine": "2.5.53",
- "@types/webpack-env": "1.13.0",
- "angular-router-loader": "^0.8.2",
- "angular2-template-loader": "0.6.2",
- "aspnet-prerendering": "^3.0.1",
- "aspnet-webpack": "^2.0.1",
- "awesome-typescript-loader": "3.2.1",
- "bootstrap": "3.3.7",
- "chai": "4.0.2",
- "css": "2.2.1",
- "css-loader": "0.28.4",
- "es6-shim": "0.35.3",
- "event-source-polyfill": "0.0.9",
- "expose-loader": "0.7.3",
- "extract-text-webpack-plugin": "2.1.2",
- "file-loader": "0.11.2",
- "html-loader": "0.4.5",
- "isomorphic-fetch": "2.2.1",
- "jasmine-core": "2.6.4",
- "jquery": "3.2.1",
- "json-loader": "0.5.4",
- "karma": "1.7.0",
- "karma-chai": "0.1.0",
- "karma-chrome-launcher": "2.2.0",
- "karma-cli": "1.0.1",
- "karma-jasmine": "1.1.0",
- "karma-webpack": "2.0.3",
- "preboot": "4.5.2",
- "raw-loader": "0.5.1",
- "reflect-metadata": "0.1.10",
- "rxjs": "5.4.2",
- "style-loader": "0.18.2",
- "to-string-loader": "1.1.5",
- "typescript": "2.4.1",
- "url-loader": "0.5.9",
- "webpack": "2.5.1",
- "webpack-hot-middleware": "2.18.2",
- "webpack-merge": "4.1.0",
- "zone.js": "0.8.12"
- }
- }
You can see that it is using Angular Version 4.2.5 which is apparently not the latest one. However, it has been considered as the most stable version and that's why provided with the default template.
Option 2 - Creating Angular 5 App with Visual Studio 2017
You may want to try some new features of Angular 5; then you can use a template like “Angular5TemplateCore” to create a new Angular 5 app with .NET Core API.
You can visit here for more details. Now, open the “package.json” file and have a look at the Angular version.
You can see in the “package.json” file that it is using the version of Angular as “^5.0.0”.
package.json complete code
- {
- "name": "Angular5TF4",
- "version": "0.0.0",
- "license": "MIT",
- "scripts": {
- "ng": "ng",
- "start": "ng serve",
- "build": "ng build",
- "test": "ng test",
- "lint": "ng lint",
- "e2e": "ng e2e"
- },
- "private": true,
- "dependencies": {
- "@angular/cli": "1.5.0",
- "@angular/compiler-cli": "^5.0.0",
- "@angular/language-service": "^5.0.0",
- "@types/jasmine": "~2.5.53",
- "@types/jasminewd2": "~2.0.2",
- "@types/node": "~6.0.60",
- "codelyzer": "~3.2.0",
- "jasmine-core": "~2.6.2",
- "jasmine-spec-reporter": "~4.1.0",
- "karma": "~1.7.0",
- "karma-chrome-launcher": "~2.1.1",
- "karma-cli": "~1.0.1",
- "karma-coverage-istanbul-reporter": "^1.2.1",
- "karma-jasmine": "~1.1.0",
- "karma-jasmine-html-reporter": "^0.2.2",
- "protractor": "~5.1.2",
- "ts-node": "~3.2.0",
- "tslint": "~5.7.0",
- "typescript": "~2.4.2",
- "@angular/animations": "^5.0.0",
- "@angular/common": "^5.0.0",
- "@angular/compiler": "^5.0.0",
- "@angular/core": "^5.0.0",
- "@angular/forms": "^5.0.0",
- "@angular/http": "^5.0.0",
- "@angular/platform-browser": "^5.0.0",
- "@angular/platform-browser-dynamic": "^5.0.0",
- "@angular/platform-server": "^5.0.0",
- "@angular/router": "^5.0.0",
- "@ngtools/webpack": "1.8.0",
- "@types/webpack-env": "1.13.0",
- "angular2-template-loader": "0.6.2",
- "aspnet-prerendering": "^3.0.1",
- "aspnet-webpack": "^2.0.1",
- "awesome-typescript-loader": "3.2.1",
- "bootstrap": "3.3.7",
- "css": "2.2.1",
- "css-loader": "0.28.4",
- "es6-shim": "0.35.3",
- "event-source-polyfill": "0.0.9",
- "expose-loader": "0.7.3",
- "extract-text-webpack-plugin": "2.1.2",
- "file-loader": "0.11.2",
- "html-loader": "0.4.5",
- "isomorphic-fetch": "2.2.1",
- "jquery": "3.2.1",
- "json-loader": "0.5.4",
- "preboot": "4.5.2",
- "raw-loader": "0.5.1",
- "reflect-metadata": "0.1.10",
- "rxjs": "5.4.2",
- "style-loader": "0.18.2",
- "to-string-loader": "1.1.5",
- "url-loader": "0.5.9",
- "webpack": "2.5.1",
- "webpack-hot-middleware": "2.18.2",
- "webpack-merge": "4.1.0",
- "zone.js": "0.8.12"
- },
- "devDependencies": {
- "@angular/cli": "1.5.0",
- "@angular/compiler-cli": "^5.0.0",
- "@angular/language-service": "^5.0.0",
- "@types/jasmine": "~2.5.53",
- "@types/jasminewd2": "~2.0.2",
- "@types/node": "~6.0.60",
- "codelyzer": "~3.2.0",
- "jasmine-core": "~2.6.2",
- "jasmine-spec-reporter": "~4.1.0",
- "karma": "~1.7.0",
- "karma-chrome-launcher": "~2.1.1",
- "karma-cli": "~1.0.1",
- "karma-coverage-istanbul-reporter": "^1.2.1",
- "karma-jasmine": "~1.1.0",
- "karma-jasmine-html-reporter": "^0.2.2",
- "protractor": "~5.1.2",
- "ts-node": "~3.2.0",
- "tslint": "~5.7.0",
- "typescript": "~2.4.2",
- "@types/chai": "4.0.1",
- "chai": "4.0.2",
- "karma-chai": "0.1.0",
- "karma-webpack": "2.0.3"
- }
- }
Option 3 - Always Use Angular Latest Version with Visual Studio 2017
As shown in “option 2”, we can create an Angular 5 app with Visual Studio 2017 very easily, but the latest version of Angular has been announced as “6.0.0-beta.2”. The version mentioned is available while writing this article. You may get an upper version of Angular while using it.
Let’s create a new Angular app which will use the Angular Version “6.0.0-beta.2”, i.e., the latest version.
Follow the same steps as of “Option 1: Create an Angular App with .NET Core API in Visual Studio 2017 with inbuilt template” to create a new Angular App.
Open “package.json” file.
Start updating each package version in “package.json” file as shown in the below screenshot. Visual Studio will automatically suggest you that what is the latest version of a particular package, so you do not need to search anywhere or ask from someone. You can do all these changes by yourself and trust me it is straightforward. Following is a screenshot for the suggestion provided in Visual Studio.
Replace the earlier version “4.2.5” with "^6.0.0-beta.2". and upgrade other packages as well.
Once version upgrade is done then re-run the application. Following is a screenshot from the comparison window of the changes made to use the latest version of angular packages.
You may have noticed that I am using "^6.0.0-beta.2" instead of "6.0.0-beta.2" because we do not know that what should be the exact version for a specific package which is compatible with another package. However, if you wish you can use the exact version match.
package.json Complete code after update
- {
- "name": "WebApplication35",
- "private": true,
- "version": "0.0.0",
- "scripts": {
- "test": "karma start ClientApp/test/karma.conf.js"
- },
- "devDependencies": {
- "@angular/animations": "^6.0.0-beta.2",
- "@angular/common": "^6.0.0-beta.2",
- "@angular/compiler": "^6.0.0-beta.2",
- "@angular/compiler-cli": "^6.0.0-beta.2",
- "@angular/core": "^6.0.0-beta.2",
- "@angular/forms": "^6.0.0-beta.2",
- "@angular/http": "^6.0.0-beta.2",
- "@angular/platform-browser": "^6.0.0-beta.2",
- "@angular/platform-browser-dynamic": "^6.0.0-beta.2",
- "@angular/platform-server": "^6.0.0-beta.2",
- "@angular/router": "^6.0.0-beta.2",
- "@ngtools/webpack": "^1.10.0-beta.3",
- "@types/chai": "^4.1.2",
- "@types/jasmine": "^2.8.6",
- "@types/webpack-env": "^1.13.5",
- "angular2-router-loader": "^0.3.5",
- "angular2-template-loader": "^0.6.2",
- "aspnet-prerendering": "^3.0.1",
- "aspnet-webpack": "^2.0.3",
- "awesome-typescript-loader": "^3.4.1",
- "bootstrap": "^4.0.0",
- "chai": "^4.1.2",
- "css": "^2.2.1",
- "css-loader": "^0.28.9",
- "es6-shim": "^0.35.3",
- "event-source-polyfill": "^0.0.12",
- "expose-loader": "^0.7.4",
- "extract-text-webpack-plugin": "^3.0.2",
- "file-loader": "^1.1.6",
- "html-loader": "^0.5.5",
- "isomorphic-fetch": "^2.2.1",
- "jasmine-core": "^2.9.1",
- "jquery": "^3.3.1",
- "json-loader": "^0.5.7",
- "karma": "^2.0.0",
- "karma-chai": "^0.1.0",
- "karma-chrome-launcher": "^2.2.0",
- "karma-cli": "^1.0.1",
- "karma-jasmine": "^1.1.1",
- "karma-webpack": "^2.0.9",
- "preboot": "^6.0.0-beta.1",
- "raw-loader": "^0.5.1",
- "reflect-metadata": "^0.1.12",
- "rxjs": "^5.5.6",
- "style-loader": "^0.20.1",
- "to-string-loader": "^1.1.5",
- "typescript": "^2.7.1",
- "url-loader": "^0.6.2",
- "webpack": "^3.10.0",
- "webpack-hot-middleware": "^2.21.0",
- "webpack-merge": "^4.1.1",
- "zone.js": "^0.8.20"
- }
- }
Actually in “package.json” file we can use provide a package version in 3 ways
- Exact Match
- Match the Most Recent Major Version (1.x.x)
- Match the most recent minor version (1.2.x)
Versioning of a software
Now, build and re-run the application. Following is the screenshot of the running application after the update which is using Angular Latest version i.e. “6.0.0-beta.2”.
Summary
In this article, we learned about the following things
- How to always use the latest version of Angular with Visual Studio 2017.
- Use default template and another online template to create Angular App.
- Use a different version of the Angular package with the different applications as per your requirement.
I have also attached the source code of complete project with latest updated version. You can go through my other Angular articles as well. Given below are the links for the same.
Persius FlatulaPosted Jun 3, 2018, 3:31 PM
I don't think you actually explained: "How To Always Use Angular's Latest Version With Visual Studio 2017". You only showed how to change it manually.
Johnny SandairePosted Apr 30, 2018, 9:05 AM
I have a DOT.NET 2.0 App with a SQL Database that runs an online Store. How would you recommend I use Angular to generate reports with charts from the Store data?
Sagar Pandurang KapPosted Feb 7, 2018, 10:24 PM
Very nice article......