Setup Angular 5 Development Environment In Visual Studio 2017 In ASP.NET MVC

In this article, we will learn how to set up an Angular 5 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.

Please follow the steps given in the article ("Setting Up Angular 4 Development Environment In ASP.NET MVC And Web API") for initial Angular 4 setup and we will upgrade it in Angular 5 in few steps.

 

Step 1

Open "package.json" file that you have created with the help of the above article.

 

Step 2

Find the Angular version "4.3.4" and replace with version "5.0.1". 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": "~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 3

Go to your project and click on "Restore Packages" as below screen.

 

Step 4

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

 

 

 

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,

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 re-build your project and run. Visual Studio 2017 will launch your application in the web browser. If you are getting the message "Hello Angular" in browser, it means you have successfully created Angular 5 application and development environment as below screen.

 

Step 7 - Done 

 

Congratulations!  You have successfully created an Angular 5 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 5 development environment in Visual Studio 2017 in C#.