Setup Angular 6 Development Environment In Visual Studio 2017 In ASP.NET MVC Step By Step

In this article, we will learn how to Setup Angular 6 Development Environment in Visual Studio 2017 in ASP.NET MVC Step by Step.

In this article, we will learn how to set up an Angular 6 development environment in Visual Studio 2017 without using Angular CLI.

Prerequisites
  • Node.JS should be installed (If it is not installed go to link download and install).
  • NPM should be installed (Run command line to install NPM: npm install -g npm@latest).
  • Visual Studio 2017 should be installed.
Step 1

Open "package.json" file that you have created with the help of the above article.
  1. {  
  2.   "name""angular-quickstart",  
  3.   "version""1.0.0",  
  4.   "description""QuickStart package.json from the documentation, supplemented with testing support",  
  5.   "scripts": {  
  6.     "build""tsc -p src/",  
  7.     "build:watch""tsc -p src/ -w",  
  8.     "build:e2e""tsc -p e2e/",  
  9.     "serve""lite-server -c=bs-config.json",  
  10.     "serve:e2e""lite-server -c=bs-config.e2e.json",  
  11.     "prestart""npm run build",  
  12.     "start""concurrently \"npm run build:watch\" \"npm run serve\"",  
  13.     "pree2e""npm run build:e2e",  
  14.     "e2e""concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",  
  15.     "preprotractor""webdriver-manager update",  
  16.     "protractor""protractor protractor.config.js",  
  17.     "pretest""npm run build",  
  18.     "test""concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",  
  19.     "pretest:once""npm run build",  
  20.     "test:once""karma start karma.conf.js --single-run",  
  21.     "lint""tslint ./src/**/*.ts -t verbose"  
  22.   },  
  23.   "keywords": [],  
  24.   "author""",  
  25.   "license""MIT",  
  26.   "dependencies": {  
  27.     "@angular/common""~5.0.1",  
  28.     "@angular/compiler""~5.0.1",  
  29.     "@angular/core""~5.0.1",  
  30.     "@angular/forms""~5.0.1",  
  31.     "@angular/http""~5.0.1",  
  32.     "@angular/platform-browser""~5.0.1",  
  33.     "@angular/platform-browser-dynamic""~5.0.1",  
  34.     "@angular/router""~5.0.1",  
  35.   
  36.     "angular-in-memory-web-api""~0.3.0",  
  37.     "systemjs""0.19.40",  
  38.     "core-js""^2.4.1",  
  39.     "rxjs""5.0.1",  
  40.     "zone.js""^0.8.4"  
  41.   },  
  42.   "devDependencies": {  
  43.     "concurrently""^3.2.0",  
  44.     "lite-server""^2.2.2",  
  45.     "typescript""~2.1.0",  
  46.   
  47.     "canonical-path""0.0.2",  
  48.     "tslint""^3.15.1",  
  49.     "lodash""^4.16.4",  
  50.     "jasmine-core""~2.4.1",  
  51.     "karma""^1.3.0",  
  52.     "karma-chrome-launcher""^2.0.0",  
  53.     "karma-cli""^1.0.1",  
  54.     "karma-jasmine""^1.0.2",  
  55.     "karma-jasmine-html-reporter""^0.2.2",  
  56.     "protractor""~4.0.14",  
  57.     "rimraf""^2.5.4",  
  58.   
  59.     "@types/node""^6.0.46",  
  60.     "@types/jasmine""2.5.36"  
  61.   },  
  62.   "repository": {}  
  63. }  
Step 2

Find the Angular version "5.0.1" and replace with version "6.1.0-rc.3". Now "package.json" file would look like as below,
  1. {
  2. "name": "angular-quickstart",
  3. "version": "1.0.0",
  4. "description": "QuickStart package.json from the documentation, supplemented with testing support",
  5. "scripts": {
  6. "build": "tsc -p src/",
  7. "build:watch": "tsc -p src/ -w",
  8. "build:e2e": "tsc -p e2e/",
  9. "serve": "lite-server -c=bs-config.json",
  10. "serve:e2e": "lite-server -c=bs-config.e2e.json",
  11. "prestart": "npm run build",
  12. "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
  13. "pree2e": "npm run build:e2e",
  14. "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
  15. "preprotractor": "webdriver-manager update",
  16. "protractor": "protractor protractor.config.js",
  17. "pretest": "npm run build",
  18. "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
  19. "pretest:once": "npm run build",
  20. "test:once": "karma start karma.conf.js --single-run",
  21. "lint": "tslint ./src/**/*.ts -t verbose"
  22. },
  23. "keywords": [],
  24. "author": "",
  25. "license": "MIT",
  26. "dependencies": {
  27. "@angular/common": "~6.1.0-rc.3",
  28. "@angular/compiler": "~6.1.0-rc.3",
  29. "@angular/core": "~6.1.0-rc.3",
  30. "@angular/forms": "~6.1.0-rc.3",
  31. "@angular/http": "~6.1.0-rc.3",
  32. "@angular/platform-browser": "~6.1.0-rc.3",
  33. "@angular/platform-browser-dynamic": "~6.1.0-rc.3",
  34. "@angular/router": "~6.1.0-rc.3",
  35. "angular-in-memory-web-api": "~0.3.0",
  36. "systemjs": "0.19.40",
  37. "core-js": "^2.4.1",
  38. "rxjs": "6.1.0-rc.3",
  39. "zone.js": "^0.8.4"
  40. },
  41. "devDependencies": {
  42. "concurrently": "^3.2.0",
  43. "lite-server": "^2.2.2",
  44. "typescript": "~2.1.0",
  45. "canonical-path": "0.0.2",
  46. "tslint": "^3.15.1",
  47. "lodash": "^4.16.4",
  48. "jasmine-core": "~2.4.1",
  49. "karma": "^1.3.0",
  50. "karma-chrome-launcher": "^2.0.0",
  51. "karma-cli": "^1.0.1",
  52. "karma-jasmine": "^1.0.2",
  53. "karma-jasmine-html-reporter": "^0.2.2",
  54. "protractor": "~4.0.14",
  55. "rimraf": "^2.5.4",
  56. "@types/node": "^6.0.46",
  57. "@types/jasmine": "2.5.36"
  58. },
  59. "repository": {}
  60. }
Or mouse over on any Angular key or version in "package.json" as below screen.
 
Angular
Angular
Step 4

After package installation is completed, build your project, you will get a compilation error as below screen.

Angular 

Step 5

Double-click on the first error message it will navigate you at the exact line of code that is causing this error.

Now, change below line of code,
  1. lift<R>(operator: Operator<T, R>): Observable<T>;
as below,
  1. lift<R>(operator: Operator<T, R>): Observable<R>;
Now, your "subject.d.ts" file will look like as below.
  1. import { Operator } from './Operator';
  2. import { Observer } from './Observer';
  3. import { Observable } from './Observable';
  4. import { Subscriber } from './Subscriber';
  5. import { ISubscription, Subscription } from './Subscription';
  6. /**
  7. * @class SubjectSubscriber<T>
  8. */
  9. export declare class SubjectSubscriber<T> extends Subscriber<T> {
  10.    protected destination: Subject<T>;
  11.    constructor(destination: Subject<T>);
  12. }
  13. /**
  14. * @class Subject<T>
  15. */
  16. export declare class Subject<T> extends Observable<T> implements ISubscription {
  17.    observers: Observer<T>[];
  18.    closed: boolean;
  19.    isStopped: boolean;
  20.    hasError: boolean;
  21.    thrownError: any;
  22.    constructor();
  23.    static create: Function;
  24.    lift<R>(operator: Operator<T, R>): Observable<R>;
  25.    next(value?: T): void;
  26.    error(err: any): void;
  27.    complete(): void;
  28.    unsubscribe(): void;
  29.    protected _subscribe(subscriber: Subscriber<T>): Subscription;
  30.    asObservable(): Observable<T>;
  31. }
  32. /**
  33. * @class AnonymousSubject<T>
  34. */
  35. export declare class AnonymousSubject<T> extends Subject<T> {
  36.    protected destination: Observer<T>;
  37.    constructor(destination?: Observer<T>, source?: Observable<T>);
  38.    next(value: T): void;
  39.    error(err: any): void;
  40.    complete(): void;
  41.    protected _subscribe(subscriber: Subscriber<T>): Subscription;
  42. }

Step 6

Now, rebuild your project and run it. Visual Studio 2017 will launch your application in the web browser. If you are getting the message "Hello Angular" in the browser, it means you have successfully created Angular 5 application and development environment as below screen.

Angular 
Step 7 - Done

Congratulations! You have successfully created an Angular 6 development environment in Visual Studio 2017. If you have any query or concern, just let me know or just put in the comment box and I will respond as soon as possible. I am open to discussing anything even silly questions as well. If you have any suggestions related to this article, please let me know and I promise I will improve this article to a maximum level.

Summary

In this article, we have learned how to create an Angular 6 development environment in Visual Studio 2017 in C#.