Post
Ask Question

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”

Asp.Net Web Application project

Asp.Net Web Application project

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,

Solution explorer

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

Following are the pre-requisites on your machine:

  1. NPM (Node Package Manager)
  2. Angular CLI (Command Line Interface)
  3. TypeScript
  4. 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

TypeScript

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

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

WebAppAngularquickstart-master.zip

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

Solution explorer

Now we have to copy two files named,

  1. json
    This file has a listing of node packages attached to project.
  1. 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.

WebAppAngular

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

Select NO

WebAppAngular

WebAppAngular

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.

Update Package.Json file

Update Package.Json file

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.

Installing packages

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

As restoration is completed you will get the following screen,

WebAppAngular

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

WebAppAngular

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

Angular configuration settings

Angular configuration settings

You get more documentation here.

Index.html file changes:

  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title>Angular QuickStart</title>  
  5.     <!-- Our App Inside /AngApp/ Folder -->  
  6.     <base href="/AngApp/">  
  7.     <meta charset="UTF-8">  
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  9.     <link rel="stylesheet" href="styles.css">  
  10.   
  11.     <!-- Polyfill(s) for older browsers -->  
  12.     <script src="/node_modules/core-js/client/shim.min.js"></script>  
  13.   
  14.     <script src="/node_modules/zone.js/dist/zone.js"></script>  
  15.     <script src="/node_modules/systemjs/dist/system.src.js"></script>  
  16.   
  17.     <script src="/AngApp/systemjs.config.js"></script>  
  18.     <script>  
  19.       System.import('main.js').catch(function(err){ console.error(err); });  
  20.     </script>  
  21.   </head>  
  22.   
  23.   <body>  
  24.     <my-app>Loading AppComponent content here ...</my-app>  
  25.   </body>  
  26. </html>  

System.config.js file changes:

  1. /** 
  2.  * System configuration for Angular samples 
  3.  * Adjust as necessary for your application needs. 
  4.  */  
  5. (function (global) {  
  6.   System.config({  
  7.     paths: {  
  8.       // paths serve as alias  
  9.       'npm:': '/node_modules/'  
  10.     },  
  11.     // map tells the System loader where to look for things  
  12.     map: {  
  13.       // our app is within the app folder  
  14.       'app': 'app',  
  15.   
  16.       // angular bundles  
  17.       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',  
  18.       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',  
  19.       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',  
  20.       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',  
  21.       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',  
  22.       '@angular/http': 'npm:@angular/http/bundles/http.umd.js',  
  23.       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',  
  24.       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',  
  25.   
  26.       // other libraries  
  27.       'rxjs':                      'npm:rxjs',  
  28.       'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'  
  29.     },  
  30.     // packages tells the System loader how to load when no filename and/or no extension  
  31.     packages: {  
  32.       app: {  
  33.         defaultExtension: 'js',  
  34.         meta: {  
  35.           './*.js': {  
  36.             loader: 'systemjs-angular-loader.js'  
  37.           }  
  38.         }  
  39.       },  
  40.       rxjs: {  
  41.         defaultExtension: 'js'  
  42.       }  
  43.     }  
  44.   });  
  45. })(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

WebAppAngular OUTPUT

Happy Coding….


Similar Articles