Skip to main content
Angular2 Setup with MVC4 in Visual Studio

Angular2 Setup with MVC4 in Visual Studio

AngularJS (commonly referred to as “Angular” or “Angular.js”) is a complete JavaScript-based open-source front-end web application framework mostly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.

Step 1: Install node and npm in your machine by downloading from the below link https://nodejs.org/en/download/

After installing check whether it has installed or not by opening command prompt type below commands

$ Node –v

$ Npm – v

If it installed it will show which version it has installed.

Step 2: Create a new MVC4 project with Visual Studio

Download the files from one drive link and add the below files to your project root folder.

https://1drv.ms/f/s!Alczce9o13HwaTebas4JMPHSAF8

MVC4 project with Visual Studio

Step 3: Close your project solution and take the project location path:

In my case this is my project location path “E:\MVC-Angular4\MVCAngular4\MVCAngular4”

In the command prompt switch it to project folder directory

Angular 4

Install Angular 2 and all its dependencies to your project by typing the below command

$ npm install  – then press enter

Angular 2

It will install npm package and typings package to your project path.

In case if you get any proxy related errors during installation add the below command before execution npm install in the command prompt.

$ npm config set proxy http://proxy:8080 then click on enter then npm install command.

Still if you face any proxy related issues for typings add the below file to your project location in the root folder.

.typingsrc file
{
"proxy":"http://proxy:8080",
"rejectUnauthorized": false
}

Once it installed successfully it will create two folders in your project location they are “node_modules” and “typings” don’t include those files into your project.

Then open your solution and replace the below file under view->shared->_Layout.cshtml.

<!DOCTYPE html>
<html lang="en">
    <head>


        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />

    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
  <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/reflect-metadata/Reflect.js"></script>
    <script src="/node_modules/systemjs/dist/system.src.js"></script>
    <script src="/systemjs.config.js"></script>
 
    <!-- 2. Configure SystemJS -->
   
    <script>
        System.import('app').catch(function (err)
        {
            console.error(err);
        });
    </script>


        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
                </div>
                <div class="float-right">
                    <section id="login">
                        Hello, <span class="username">@User.Identity.Name</span>!
                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

In this file if you observe we have imported all the library files and configured startup folder called “app”

Then go to view->Home->index.cshtml page and add the tag with angular selector name say “my-app” <my-app>Loading</my-app>.

Index.cshtml

@{
    ViewBag.Title = "Home Page";
    <my-app>Loading</my-app>
}
@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>
                <h2>@ViewBag.Message</h2>
            </hgroup>
            
        </div>
    </section>
}

Step 4: Create a folder called “App” in your project root folder

Folder App

Then add the below typescript files under app folder: app.component.ts

 

import { Component } from ‘@angular/core’;

@Component({

selector: ‘my-app’,

template: `<h2>Hello {{name}}<h2>`,

})

export class AppComponent  { name = ‘Angular2’; }

app.module.ts

import { NgModule }      from ‘@angular/core’;

import { BrowserModule } from ‘@angular/platform-browser’;

import { AppComponent }  from ‘./app.component’;

@NgModule({

imports:      [ BrowserModule ],

declarations: [ AppComponent],

bootstrap:    [ AppComponent ]

//   declarations: [ CoursesComponent,AuthorsComponent,AutoGrowDirective ],

//    bootstrap:    [ CoursesComponent,AuthorsComponent ]

})

export class AppModule { }

main.ts

import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;

import { AppModule } from ‘./app.module’;

platformBrowserDynamic().bootstrapModule(AppModule);

Step 5: Then go to command prompt and add the below command

“Npm start” then press enter it will start the npm

Angular Js

Then click on F5 or execute your project it will show the app like below with “Hello Angular2”.

Angular 2

Note: We can’t debug type script code in Visual Studio and we therefore need to use Opensource VS code.

Conclusion:

Many developers prefer Visual Studio as a developer tool and prefer to use Angular 2 for building web applications. By following this blog you can set up and run Angular 2 app in Visual Studio.

Venkataramaiah N

Venkataramaiah N

Venkataramaiah works with Trigent Software as Senior Software Engineer. He has nearly six years of experience in .Net platform and .Net technologies.

11 thoughts on “Angular2 Setup with MVC4 in Visual Studio

  1. We are a group of volunteers and starting a new scheme in our community. Your website offered us with valuable information to work on. You have done an impressive job and our whole community will be thankful to you.|

  2. whoah this blog is great i love studying your posts. Keep up the great work! You know, a lot of people are looking round for this information, you could aid them greatly. |

  3. You’re so awesome! I don’t believe I’ve read through something like that before. So wonderful to find somebody with a few original thoughts on this subject matter. Really.. thank you for starting this up. This web site is something that’s needed on the web, someone with a little originality!|

Leave a Reply

Your email address will not be published. Required fields are marked *

forty + = 48