Setup ASP.NET MVC 4 or 5 project with Angular 2

Question

I am learning angular 2 with Typescript.

I am using following resource. QuickStart with Angular 2

Now from there and other examples i found that they telling to create package.json file that lists all dependencies for project.

I think creating this package.json file and listing all dependency packages this kind of structure is followed in .NetCore Project.

In MVC 4 or 5 we have packages.config file which lists although packages that we are going to use.

I am not saying we can not use package.json file when we have package.config file.

But is there any simple way to integrate Angular 2 with typescript in MVC Webapplication project using NUGet Packages and get started?

If not available please let me know how can i setup Angular 2 with type script in ASP.Net MVC 4 or 5?

I would instead recommend you look into VSCode for the Angular 2 side of things. It's much faster and long term will work better with Angular 2 if only due to the constant release cadence. You can already see improvements around working with React. You can get pretty far into your client development before you even need to open up VS to build your back end. — Shane Courtrille
– Shane Courtrille, Commented Jul 21, 2016 at 18:20
Well, I have found a great start for Angular 2 and ASP.NET MVC here. Current our project is migrating from Angular 1 to Angular 2 has the same question on how we setting up the project structure. mithunvp.com/using-angular-2-asp-net-mvc-5-visual-studio — trungvose
– trungvose, Commented Oct 18, 2016 at 2:15

Dima Kuzmich · Accepted Answer · 2016-07-18 06:34:03Z

12

+50

As you said, in ASP.NET MVC application you have a package.config file. This file holds the information about NuGet packages you've installed in your app. This file is related to the server-side packages.

package.json file is related to a front-end part of your app. It also holds list of packages that you've installed in your app. This time npm packages. It also holds information about your app and more. You can read more about it here.

You can't mix those files and you don't want to. Firstly, those files have different format (XML and JSON). In addition, as I said before, they hold information about different parts of your application. Lastly, and this is my personal opinion, when you create application with rich UI and use Angular2, it'd be better to split the parts of your app into 2 different projects. One of them with Web APIs and the second with the UI part only. With such structure, you will no need for packages.config in UI project and no need for package.json in Web API project.

For you last question, you can start with here. You also can take a look on this sample app.

answered Jul 18, 2016 at 6:34

Dima Kuzmich

1,35611 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nirav Kamani Over a year ago

You are saying that i can not integrate Angular 2 in MVC 4 or MVC application?

Dima Kuzmich Over a year ago

That's not what I'm saying. Of course you can do it. I don't like this approach, but you definitely can do it. Anyway, if you choose to integrate Angular2 into ASP.NET MVC, you should stay with two package files.

Nirav Kamani Over a year ago

Yes that i already know. Can you provide me any example or sample that is implementing my approach. It would be really helpful. Thanks.

Jakub Siuda · Accepted Answer · 2016-10-03 13:50:30Z

7

In order to run Angular 2 in an ASP.NET MVC 4.5 (VS 2015):

1) install Node.js (at least 4.4.x), npm (at least 3.x.x) and TypeScript for Visual Studio 2015 (VS -> Tools -> Extensions and Updates -> Online). You may check your version of node and npm by running the following in the terminal: "node -v" and "npm -v".

2) copy the QuickStart files (everything what quickstart-master constains, not the folder itself) into your project (to the folder containing the .csproj file) - you can download the QuickStart files from: https://github.com/angular/quickstart

3) In the Solution Explorer click "show all files" (probably the third icon from the right, just above the search bar). Select the following files/folders and include them in the project:

app folder (answer No if asked to search for TypeScript Typings)
styles.css
index.html
package.json
tsconfig.json
typings.json

4) In Visual Studio, right click on "package.json" and select "Restore Packages" - this will install all of the packages defined in the package.json into your project.

The result of this operation is the same as running "npm install" in your project location from the terminal.

Probably there'll be some warnings in the Output window - ignore them. A new folder called "node_modules" will be generated (you need to refresh the Solution Explorer to be able to see it) - advice is not to include this folder in the project.

5) In the tsconfig.json file, next to "compilerOptions" add the following:

"compileOnSave": true

as shown below

{
  "compilerOptions": {
    ...
  },
  "compileOnSave": true
}

Restart Visual Studio.

6) In Visual Studio, right click on "index.html" and click "Set as Start Page".

As a reference, here's the official documentation for running Angular 2 (quickstart) in ASP.NET 4.x (Visual Studio 2015): https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html

edited Oct 3, 2016 at 13:50

answered Oct 3, 2016 at 9:41

Jakub Siuda

2271 gold badge6 silver badges15 bronze badges

2 Comments

RyeGuy Over a year ago

Solid answer! However for step 3 I do not quite know how this is done. I cannot find the .csproj in Solution Explorer. Also I do not know how copy all the files from the extracted zip into the .csproj. Is their a cmd command for this?

Jakub Siuda Over a year ago

@RyeGuy Did you create an asp.net mvc project beforehand? In VS15 you need to go to: File -> New -> Project -> (on the left hand side) Web -> ASP.NET Web Application (.NET Framework). Then set the name, the template (in the next screen; I used MVC) and click OK. To copy the files you can simply use the File Explorer and copy just like any other files in the system.

Mithun Pattankar · Accepted Answer · 2016-07-21 10:50:32Z

2

Also check out the link which includes steps to run.

You need to include package.json (Angular 2 gets installed using NPM)
Run NPM install
Run the GULP tasks
Run F5 to see results.

https://github.com/mithunvp/ng2Mvc5Demo

As its already accepted still it will be alternate way to get started

answered Jul 21, 2016 at 10:50

Mithun Pattankar

1,3721 gold badge8 silver badges12 bronze badges

Comments

Manoj Maharana · Accepted Answer · 2017-12-05 06:54:24Z

If You want to install Angular4 on nuget package manager console you can use Install-Package Angular4 -Version 1.1.0 and follow these steps:

Angular 4
*********

Prerequisites
`````````````
1. Download and Install Node js
2. Install Visual studio 2015 update 3 or above
3. Download and Install TypeScript 2.6.1 for Visual Studio 2015 (https://www.typescriptlang.org/#download-links)

Follow the steps to install package.
````````````````````````````````````
1. Create an new project with empty template and include dependencies for MVC and WebApi to the project
2. Install the package using command 'Install-Package Angular4 -Version 1.1.0'

Follow the steps after package installation
```````````````````````````````````````````
1. Open Node.js Command Prompt
2. Navigate to project location(use commands such as pushd,cd etc)
3. Run the command 'npm install'

Collectives™ on Stack Overflow

Setup ASP.NET MVC 4 or 5 project with Angular 2

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related