How To Setup Angular In Visual Studio 2017

Angular 4 is here and it's the right time to learn one of the most popular and powerful JavaScript frameworks. Angular, as you might already know, is one of the most popular JavaScript frameworks for creating web apps. Developed by Google, you can be assured that this powerhouse of a framework is built with speed and purpose.

Ensure you follow the below steps and code snippets to setup the Visual Studio environment to run Angular 4 application.

Create ASP.NET Empty Web application

Download the Angular quick start from GitHub by using the URL https://github.com/angular/quickstart

Make sure Node.js and Typescript latest version is installed in your machine.

Extract the downloaded quick start project sample.

From the downloaded quick start project copy and paste the below files into your Visual Studio solution.

Copy Package.json, src/main.ts, src/systemjs.config.js, src/tsconfig.json to the project's main folder.
Create a folder called “app” in the project where all our Angular data is to be placed.
Copy src/app/app.module.ts and src/app/app.component.ts files from quickstart project to your “app” folder.

Now, right-click the package.json file from your solution and click “Restore Packages” to install all node modules packages.
Once installed successfully, you will get the “node_modules” folder in your solution.
Add Default.aspx file to the solution. In order to initiate the first component in Angular which is probably your app.component use the selector of this component in Default.aspx file like below,
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Angular4_Sample.Default" %>
2. <!DOCTYPE html>
3. <html xmlns="http://www.w3.org/1999/xhtml">
5. <head runat="server">
6. <title></title>
7. < </head>
9. <body>
10. <my-app>Loading Angular app…..</my-app>
11. </body>
13. </html>

In systemjs.config.js file, comment the meta section under packages section like below.

Add the moduleid to all the component which you add like below.
1. @Component({
2. selector: 'my-app',
3. template: `<h1>Hello {{name}}</h1>`,
4. moduleId: module.id
5. })

That’s it. Now, you are ready to run the Angular 4 applications in Visual Studio just by hitting the F5 button like running other applications in Visual Studio.

Hope you find this article useful. If you are looking for any topics that we can cover or have a comment on this blog, you are welcome to let us know via the comments below.