Add Angular 4 to an ASP.NETCore Project

Question

I want to utilize Angular 4 in my ASP.NetCore 1.1 project, within Visual Studio 2017 (read as: *.csproj file)

Previously with ASP.NET Core 1.0 and Visual Studio 2015, you could simply add AngularJS (1.x.x) into the project.json as a dependency and it would wire itself in.

Now, with ASP.NetCore and VS2017, the project.json file has gone away, and the only documentation I can find refers to STARTING an Angular 4 project by using the CLI and using the CLI to generate a NEW angular app. I don't really want a new project or have to refactor everything I have created to provide a service to a separate UI project. I just want to augment my app with some added client-side UI experience.

Any suggestions?

Update

This questions has been getting a lot of views and the information is of little help so I'm providing this update.

Visual Studio 2017 (*.csproj)

• Asp.Net Core 2.0 + Angular (v2.0~v4.0) :: Use the built in template! Best option IMO.

• Asp.Net Core 1.X + Angular (v2.0~v4.0)

  • Create VS Project.
  • Create Angular Project via Angular CLI
  • Configuration and setup details : Link

Visual Studio 2015 (project.json)

• Tooling: up to version -preview2 - No further updates, all new .NET Core features will be moving to VS 2017

  • Asp.Net Core 1.X + Angular (v2.0~v4.0)

    • Asp.Net Core Template Pack
    • Note: I wouldn't endorse a bad VS Plugin, Mads Kristensen does good work.
    • Configuration and setup details : Blog post

  • Asp.Net Core 1.X + AngularJS (~1.5)

    • Configuration and setup details : Microsoft Tutorial

  • Asp.Net MVC 5 + AngularJS (~1.5)

    • Pluralsight Blog Guide

Notes: There are many other ways to get Angular to work with ASP.Net / .NetCore projects such as NPM, Bower, NuGet, etc. I tried to highlight the ones which are simple and actually work. Also these are in line with the direction Microsoft is moving in, according to the Pluralsight blog post above.

Dick

Answer 1

[i am aware you didn't ask this specifically but just wanted to share a thought which is very relevant in my opinion]

I was at the exactly the same point a few months ago and i decided going with angular cli. and i thank God i made that decision. Uncomparably more clear and it actually put things how they should be: .net core web api backend and completely separated angular client. just exactly the same as you wouldn't put your iphone/android app into VS solution, there is no real reason to put angular one neither.

UPDATE Either use MVC with Razor, OR use Angular as a SPA, and if you use Angular, use the Angular CLI. And if you use angular, feed data into it with asp.net (core) Web Api as a REST backend

Paraffinic

Playing devil's advocate here... but isn't ASP.NET itself a UI layer? I certainly don't handle any of my business logic in there. I don't see the benefit of abstracting away ASP.NETs functionality. Server side and client side validation can and should co-exist on the same layer. – Dick

well, strictly speaking, no. asp.net can also be web api, pure REST. if you're doing asp.net site for UI (so razor or something like that) then you don't need angular as its not spa. on the other hand if you use angular then you don't need razor but asp.net web api REST to feed data into your angular client. – Paraffinic

So essentially, in the scenario I described where I am using Asp.Net MVC / Razor, that Angular is not the right technology. I believe sir, you hit the nail on the head. What do you think would be the right choice? It's looking like ReactJS might be better suited for what I need. – Dick

no no, ReactJS is in the same line here as angular because they are both: SPA (Single Page Applications). My point is that if you go with SPA technology (regardless if its ract, angular or some other) then you don't need razor, obviously. And vice versa. The choice is: either razor (with no angular, react, etc) or asp.net web api + SPA (react, angular or some other [out of which i would recommend angular but that's personal preference]). hope that sheds a bit of light on the topic. – Paraffinic

Got it. I hope. If you want to sum that up in the answer, I would accept it. I think "Either use MVC with Razor, OR use Angular as a SPA, and if you use Angular, use the Angular CLI" is a better answer than trying to fiddle with Angular trying to make it do what it isn't designed to do in my application. – Dick

Good thing I read this though I'm already aware that this is a better approach than putting everything together in ASP.net core project. Another thing you have to deal with when doing this is setting up CORS to your app. – Frederickfredericka

I hear what Adam is trying to say here, but I also see the practical side of what dee zg is suggesting. I think it's reasonable to use AngularJS as a structured scripting language with ASP.NET Razor. I use it this way to ensure the security is server side, and the data is loaded client side with all of the rich client side functionality. – Marbling

@AdamVincent I think you are dancing around the fact that neither approach is great, which gives rise to future hope in Blazor. blazor.net – Crispy

Answer 2

I can see how this is confusing, but dee zg is correct. You're going to want two separate projects. One will be the .net core backend api (REST) and the other will be the Angular 2 spa. There will be a complete separation.

With AngularJS, you could just drop in the js file into a razor view and call it a day. However, with Angular 2/4 and React, it's best to host each project in it's own solution. This might seem silly at the beginning, but when you build out your api, it can be easily future proofed by having the capability of also being consumed by mobile apps, desktop apps, etc.

I know there is a dotnet spa services angular cli powershell command for .net core, but it is really kind of a mess and actually outputs invalid html that could possibly be detrimental to SEO, etc. It's best, IMO, to just use the angular CLI in a separate project.

When it comes to production, you'll host the .net core api and the angular 2 projects separately.

Quianaquibble

Answer 3

It’s not totally clear to me what you mean by "Add Angular 4 to an ASP.NET Core Project", but one way to do this is the following:

1. Create an Angular 4 project (using angular-cli).
2. Create an ASP.NET Core project (using .NET Core CLI) in the same directory as the Angular project.
3. Adjust the webpack.config.js file (which is part of the angular-cli installation) in order to automatically put bundled files in the wwwroot directory (webpack will be responsible for this).

On my blog, I have a detailed tutorial demonstrating this approach.

Aerodontia

Hi Anton! I see that you recently had some of your answers deleted by the community because they were little more than links to off-site content. I'm glad to see that you have addressed that problem now. This answer is much better because it contains the important parts in the answer itself. Unfortunately, I have one other small nit to pick. :-) Looking at the linked page, it seems to be something that you've published or are affiliated with. Since you didn't disclose your affiliation, the community flagged this as spam. – Propositus

I dismissed that flag and edited in the required disclaimer, because this does seem like a genuine attempt to contribute. However, please try to keep this in mind in the future. We have a page on this in our Help Center that you should probably read. All the best! – Propositus

Thanks, Cody! And sorry for the inconveniences. Will do better next time. – Aerodontia

Thanks for the answer Anton. At the time of the OP, there was little to no information surrounding this. With some help from the other answers and some messing around I've pretty much come up with the same solution. Bleeding edge indeed. – Dick

Answer 4

I have been working on a Angular 4(SPA) and .Net core web api. You can check out the repository and you might get a better understanding.

I had to find solutions to many areas like authentication, authorisation, social login, MongoDB connector e.t.c

Hope this would save time for someone stumbling on this.

https://github.com/Sathya-B/Angular-.NetCore-MongoDB

Loopy

Answer 5

I am using Angular 6 and ASP.NET CORE 2.1 but this might work on Angular 4.

CREATE A NEW ANGULAR PROJECT IN VS2017:

1. Create a new Web App in VS. The folder name should not contain '.' since Angular will not accept it. For example: DatingApp-SPA. And then select 'Blank'.
2. Close VS so that it will not lock the folder for any permission
3. Navigate to the base path of the project folder.
4. Run 'ng new DatingApp-SPA'. This will add Angular goodies to the existing DatingApp-SPA project.
5. Open the solution again on VS.

CREATE A NEW COMPONENT:

1. Open command prompt and navigate to the project folder

2. Run the command:

   ng generate component component-name-with-lowercase

This will generate the .html, .spec.ts, .ts, .css files and update the app.module.ts

CREATE A NEW SERVICE:

1. Open command prompt and navigate to the project folder

2. Run the command:

    ng generate service _component-name-with-lowercase_
   

This will generate the .ts and .spec.ts by default in the \app folder. We can move these files on another folder like \app\_services

Munafo

Hey thanks for sharing @Judyll. This question and accepted answer is certainly out of date. There is one major flaw with your proposal. Simply generating an Angular 6 app inside a VS Project folder is not enough. I would highly recommend checking out the current .NET Core SPA template which has been updated and works quite well compared to year ago .NET Core learn.microsoft.com/en-us/aspnet/core/client-side/spa/… – Dick

Thanks @AdamVincent for suggestions. In my personal experience, haven't experience some major flaw yet but I will read your suggested documentation on using .NET CORE SPA templates and see what I can find. Thanks once again! – Munafo

Included in the SPA templates is also boiler plate code, which tells .NET that it is now responsible for handling a SPA e.g, app.UseSpa() also, you probably also want to tell VS2017 / VS Code how to package your angular app into the .NET Core app (usually, via a task runner such as Grunt/Gulp or Webpack etc.) – Dick