CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-4angular
Nirav Kamani
Nirav Kamani

Reputation: 3272

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

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?

Upvotes: 16

Views: 16821

Answers (4)

Manoj Maharana
Manoj Maharana

Reputation: 145

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'

Upvotes: 0

Jakub Siuda
Jakub Siuda

Reputation: 227

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

Upvotes: 7

Mithun Pattankar
Mithun Pattankar

Reputation: 1372

Also check out the link which includes steps to run.

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

https://github.com/mithunvp/ng2Mvc5Demo

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

Upvotes: 2

Dima Kuzmich
Dima Kuzmich

Reputation: 1326

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.

Upvotes: 12

Related Questions