Nov
1
Written by:
Michael Washington
11/1/2016 3:58 PM
Note: This tutorial is part of a series of articles that create a complete Angular 2 application using OData 4 and ASP.NET 4:
- Hello World! in Angular 2 using Visual Studio 2015 and ASP.NET 4 (this article)
- Implement ASP.NET 4 MVC Application Security in Angular 2 Using OData 4
- Tutorial: Creating An Angular 2 CRUD Application Using MVC 5 and OData 4
- Tutorial: An End-To-End Angular 2 Application Using MVC 5 and OData 4
You can create applications in Angular 2 using Visual Studio 2015 running ASP.NET 4.
(Note: the following directions mostly follow the directions on the Angular site)
Step 1 – Visual Studio 2015 Update 3 (or higher)
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_4266c505-d99b-428c-84c2-89c9f3c3147c.png)
Ensure you have Visual Studio 2015 Update 3 (or higher).
You can download the free Visual Studio 2015 Community Edition from:
https://www.visualstudio.com/downloads/download-visual-studio-vs
Step 2 – Install TypeScript 2.0 (or higher)
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_fc41dc8a-9fe0-4771-952a-85e011e1eb8b.png)
Install TypeScript 2.0 (or higher) for Visual Studio 2015 from here: https://www.typescriptlang.org/#download-links.
Step 3 – Install Node.Js and NPM
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_6998d4dc-5f19-4773-a33e-534593e023f0.png)
Install Node.js and the Node Package Manager (NPM) from here:
https://nodejs.org/en/download/
Step 4 – Configure Visual Studio
To avoid problems, we need to configure Visual Studio to use the global external web tools (such as the Node Package Manager).
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_c95d02ac-db64-4402-92ab-6cc5e29a961a.png)
Open Visual Studio.
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_d418641b-190f-4abf-875b-cd218f3e020c.png)
Open Options.
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_13b33cfa-05bb-43b7-bd51-327048fbf236.png)
In the Options dialog, select External Web Tools.
Move the $(PATH) entry above any $(DevEnvDir) or $(VSINSTALLDIR) entries.
Click OK.
Restart Visual Studio (for this change to take effect).
Step 5 – Create The Project
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_65671494-4cd8-472d-8b3a-abdf1e3c51c2.png)
In Visual Studio, select File, then New, then Project.
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_dec678b8-256e-4788-8f52-1f4f044319ee.png)
Create a ASP.NET Web Application (.NET Framework) project.
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_31e77ac0-e047-4ffc-bd9f-3fc1fbd40d46.png)
Create a MVC project.
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_a5cfe322-7258-422b-92e6-d5d3742d81a6.png)
After the project is created and opens, in the Solution Explorer, right-click on the Solution node and select Rebuild Solution.
Step 6 – Download the Angular QuickStart files
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_22c093d1-413f-4196-98d9-4cef25b9c646.png)
Download the Angular Quickstart files from:
https://github.com/angular/quickstart/archive/2.4.0.zip (note they are constantly updating this project so get the 2.4.0 release that is known to work with this tutorial)
Step 7 – Add the Angular QuickStart Files
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_89f3a697-c763-4d06-b079-3466033ed155.png)
Unzip the Angular Quickstart files into a directory.
Select all the files, and copy all the files…
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_c1393c7a-0581-4f90-9442-eef21f6cc83d.png)
… and paste them into the directory that the Visual Studio project is in.
Do this using the Windows file manager not inside Visual Studio.
Step 8 – Add the Angular QuickStart Files to the Project
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_79beb4d9-efa5-46d8-812f-4143b16cda8b.png)
In Visual Studio, in the Solution Explorer, click on the Project node (not the Solution node).
Click the Show All Files button.
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_637c6529-9f5b-4658-996d-0c4edafd8b3f.png)
Right-click on the following folders and files and select Include In Project:
- app folder (answer No if asked to search for TypeScript Typings)
- styles.css
- package.json
- tsconfig.json
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_04cc6304-0a74-4f65-801a-1a507923c58b.png)
Click the Show All Files button again to hide the remaining files.
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_21581564-ecd1-4bdc-bb38-0a4113f0dded.png)
We now need to bring in the other Angular files using the Node Package Manager (NPM).
Right-click on the package.json file and select Restore Packages.
(If you do not see this option, try closing and re-opening Visual Studio, or if you have the Visual Studio Node.js tools installed, uninstall them. You can also use the node command line)
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_019cc974-3bcb-440a-8ebe-3b741ccfde4e.png)
Wait until the packages have been installed (it may take a few minutes).
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_832c7678-4b72-447a-9785-ac809e848ee5.png)
Rebuild the Solution.
Step 9 – Create the Hello World! Application
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Hello-World-in-Angular-2-using-Vis.NET-4_EEDE-image_03a9e1b6-e36e-47bd-b260-5beadf93d86e.png)
Open the file at: Views/Shared/_Layout.cshtml and add the following code to the Head section:
<!-- Angular2 Code -->
<base href="~/">
<link rel="stylesheet" href="~/styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
<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/reflect-metadata/Reflect.js"></script>
<script src="~/node_modules/systemjs/dist/system.src.js"></script>
<script src="~/systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<!-- Angular2 Code -->
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_45729b3d-e7a8-481a-8ebd-87c6e7ed5247.png)
Open the file at: Views/Home/Index.cshtml and replace all the code with the following code:
@{
ViewBag.Title = "Home Page";
}
<div class="jumbotron">
<h1>Angular 2 QuickStart</h1>
</div>
<div class="row">
<div class="col-md-4">
<!-- Angular2 Code -->
<my-app>Loading...</my-app>
<!-- Angular2 Code -->
</div>
</div>
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_f6907bdf-c5eb-4135-ba9c-36012c5800b1.png)
Open the file at: app/app.component.ts and replace all the code with the following code:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>Hello World!</h1>
<h2>{{DynamicValue}}</h2>
`
})
export class AppComponent {
DynamicValue: string =
"Running on IIS with ASP.NET 4.5 in Visual Studio 2015";
}
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_5ea01502-dce7-4000-b8bb-261100781844.png)
Run the project.
![image image](/Portals/0/Blog/Files/1/3293/Windows-Live-Writer-Angular-2_CB4E-image_68373f71-7560-4710-9562-509f8773a31a.png)
The application will display.
Links (LightSwitch Help Website)
Implement ASP.NET 4 MVC Application Security in Angular 2 Using OData 4
Links
Angular 2 Visual Studio 2015 QuickStart
Download Visual Studio 2015 Community Edition (Free)
Resources to Learn Angular 2
Angular 2: Getting Started (Pluralsight – Paid)
Introduction to Angular 2.0 (Microsoft Virtual Academy – Free)
Download
The project is available at http://lightswitchhelpwebsite.com/Downloads.aspx
You must have Visual Studio 2015 Update 3 (or higher) and TypeScript 2.0 (or higher) installed to run the code.
3 comment(s) so far...
(econnreset) If when using NodeJs and you get a "econnreset" error, you can do this:
npm config set registry http://registry.npmjs.org/
See: http://stackoverflow.com/questions/18419144/npm-not-working-read-econnreset
By Michael Washington on
11/29/2016 1:01 PM
|
Very nice tutorial,
possible to do one for setting up ASP.NET 4 and Angular 4? please also include publishing the project to IIS.
thanks!
By mrekoj on
6/9/2017 11:11 AM
|
@mrekoj - See this link for Angular 4: http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/4306/Upgrading-JavaScriptServices-and-PrimeNG-From-Angular-2-to-Angular-4.aspx - See this link for publishing: https://github.com/aspnet/JavaScriptServices/issues/337
By Michael Washington on
6/9/2017 11:13 AM
|