Setup Angular With Web Application In Visual Studio

In this article, we will set up an Angular working environment using Asp.Net Web Application project using Visual Studio 2015.

Start Visual Studio 2015 and Select FILE --> PROJECT or Press (CTRL + N)

Select Asp.Net Web Application using Visual C# language.

Create a project called “WebAppAngular”

As you can see we have selected empty. Do not select WebForm, MVC and Web API. Under grouping add folders and core references.

Solution explorer should look like this,

Now switch to basic requirement to set up the environment for Angular.

Following are the pre-requisites on your machine:

NPM (Node Package Manager)
Angular CLI (Command Line Interface)
TypeScript
Visual Studio 2015 / 2017

NPM

Install node from the following site and check your PC's 32-bit or 64-bit status.

https://nodejs.org/en/download/

Angular CLI

For installing CLI you must have NodeJS on your machine.

Command - npm install -g @angular/cli

TypeScript

To install TypeScript go through the following URL

https://www.microsoft.com/en-us/download/details.aspx?id=48593

Now we will go for a quick start and download the ready package from the following URL.

https://github.com/angular/quickstart

In the above screenshot, you can see a green button to download the quickstart ready made setup.

ZIP file named “quickstart-master.zip” download.

Now switch back to Solution Explorer for creating AngApp folder on project root.

Now we have to copy two files named,

json
This file has a listing of node packages attached to project.

json
This file is to check TypeScript code for readability and maintainability and validate the code and keywords of TypeScript.

Now switch back to the downloaded folder of the Angular quick start. In the download folder copy, we have to copy the SRC folder’s files into AngApp folder of the Visual Studio project folder.

While you copy or update you will interact with the following dialog box:

Select NO

Now we setup NPM packages.

Update Package.Json file

Now we update and restore node packages by right-clicking on the file and selecting Restore Packages.

As you click on the RESTORE PACKAGE option on the left bottom side (status bar) you can see the message “Installing packages” as per the screen is given below.

This process can take time, that also depends upon on your NET speed.

As restoration is completed you will get the following screen,

You can check by doing this as mentioned in the following image,

Angular configuration settings

Now switch back to AngApp --> the app folder include all files. For including APP folder files you have to click on "show all files" then right click

You get more documentation here.

Index.html file changes:

<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<base href="/AngApp/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/AngApp/systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading AppComponent content here ...</my-app>
</body>
</html>

System.config.js file changes:

/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': '/node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
'app': 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'systemjs-angular-loader.js'
}
}
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);

After setting the above file now again Restore Packages by right clicking on package.json file.

Build again.

On the browser, you can execute Index.html file - http://localhost:52035/AngApp/Index.html

OUTPUT

Happy Coding….