Post
Ask Question

Angular 6 Development Setup in Visual Studio ASP.NET MVC

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 the "package.json" file that you have created with the help of the above article.

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "build": "tsc -p src/",
    "build:watch": "tsc -p src/ -w",
    "build:e2e": "tsc -p e2e/",
    "serve": "lite-server -c=bs-config.json",
    "serve:e2e": "lite-server -c=bs-config.e2e.json",
    "prestart": "npm run build",
    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
    "pree2e": "npm run build:e2e",
    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
    "preprotractor": "webdriver-manager update",
    "protractor": "protractor protractor.config.js",
    "pretest": "npm run build",
    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
    "pretest:once": "npm run build",
    "test:once": "karma start karma.conf.js --single-run",
    "lint": "tslint ./src/**/*.ts -t verbose"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~5.0.1",
    "@angular/compiler": "~5.0.1",
    "@angular/core": "~5.0.1",
    "@angular/forms": "~5.0.1",
    "@angular/http": "~5.0.1",
    "@angular/platform-browser": "~5.0.1",
    "@angular/platform-browser-dynamic": "~5.0.1",
    "@angular/router": "~5.0.1",
    "angular-in-memory-web-api": "~0.3.0",
    "systemjs": "0.19.40",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "concurrently": "^3.2.0",
    "lite-server": "^2.2.2",
    "typescript": "~2.1.0",
    "canonical-path": "0.0.2",
    "tslint": "^3.15.1",
    "lodash": "^4.16.4",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",
    "@types/node": "^6.0.46",
    "@types/jasmine": "2.5.36"
  },
  "repository": {}
}

Step 2. Find the Angular version "5.0.1" and replace it with version "6.1.0-rc.3". Now "package.json" file would look like as below.

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "build": "tsc -p src/",
    "build:watch": "tsc -p src/ -w",
    "build:e2e": "tsc -p e2e/",
    "serve": "lite-server -c=bs-config.json",
    "serve:e2e": "lite-server -c=bs-config.e2e.json",
    "prestart": "npm run build",
    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
    "pree2e": "npm run build:e2e",
    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
    "preprotractor": "webdriver-manager update",
    "protractor": "protractor protractor.config.js",
    "pretest": "npm run build",
    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
    "pretest:once": "npm run build",
    "test:once": "karma start karma.conf.js --single-run",
    "lint": "tslint ./src/**/*.ts -t verbose"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~6.1.0-rc.3",
    "@angular/compiler": "~6.1.0-rc.3",
    "@angular/core": "~6.1.0-rc.3",
    "@angular/forms": "~6.1.0-rc.3",
    "@angular/http": "~6.1.0-rc.3",
    "@angular/platform-browser": "~6.1.0-rc.3",
    "@angular/platform-browser-dynamic": "~6.1.0-rc.3",
    "@angular/router": "~6.1.0-rc.3",
    "angular-in-memory-web-api": "~0.3.0",
    "systemjs": "0.19.40",
    "core-js": "^2.4.1",
    "rxjs": "6.1.0-rc.3",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "concurrently": "^3.2.0",
    "lite-server": "^2.2.2",
    "typescript": "~2.1.0",
    "canonical-path": "0.0.2",
    "tslint": "^3.15.1",
    "lodash": "^4.16.4",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",
    "@types/node": "^6.0.46",
    "@types/jasmine": "2.5.36"
  },
  "repository": {}
}

Or mouse over on any Angular key or version in "package.json" as below screen.

Version number

Package.json

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

Package installaton

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 the below line of code.

lift<R>(operator: Operator<T, R>): Observable<T>;

as below

lift<R>(operator: Operator<T, R>): Observable<R>;

Now, your "subject.d.ts" file will look like as below.

import { Operator } from './Operator';
import { Observer } from './Observer';
import { Observable } from './Observable';
import { Subscriber } from './Subscriber';
import { ISubscription, Subscription } from './Subscription';

/**
 * @class SubjectSubscriber<T>
 */
export declare class SubjectSubscriber<T> extends Subscriber<T> {
   protected destination: Subject<T>;
   constructor(destination: Subject<T>);
}

/**
 * @class Subject<T>
 */
export declare class Subject<T> extends Observable<T> implements ISubscription {
   observers: Observer<T>[];
   closed: boolean;
   isStopped: boolean;
   hasError: boolean;
   thrownError: any;
   constructor();
   static create: Function;
   lift<R>(operator: Operator<T, R>): Observable<R>;
   next(value?: T): void;
   error(err: any): void;
   complete(): void;
   unsubscribe(): void;
   protected _subscribe(subscriber: Subscriber<T>): Subscription;
   asObservable(): Observable<T>;
}

/**
 * @class AnonymousSubject<T>
 */
export declare class AnonymousSubject<T> extends Subject<T> {
   protected destination: Observer<T>;
   constructor(destination?: Observer<T>, source?: Observable<T>);
   next(value: T): void;
   error(err: any): void;
   complete(): void;
   protected _subscribe(subscriber: Subscriber<T>): Subscription;
}

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 the 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 queries or concerns, just let me know or just put them 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#.


Similar Articles