All geek questions in one place

Add Angular 4 to your ASP.NETCore project

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

Previously, with ASP.NET Core 1.0 and Visual Studio 2015, you could simply add AngularJS (1.xx) to project.json as a dependency, and it would connect to it.

Now, with ASP.NetCore and VS2017, the project.json file has disappeared, and the only documentation I can find is on STARTING an Angular 4 project using the CLI and using the CLI to create a NEW Angular application. I really do not want a new project or have to reorganize everything that I created to provide a service to a separate user interface project. I just want to increase my application using an additional client interface.

Any suggestions?

Update

These questions received a lot of views, and the information helps a little, so I am providing this update.

Visual Studio 2017 ( *.csproj )

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

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

    • Create a VS project.
    • Create an Angular Project via the Angular CLI
    • Setting Details and Settings: Link

Visual Studio 2015 ( project.json )

  • Toolkit: up to version -preview2 - no additional updates, all new .NET Core features will be moved to VS 2017

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

      • Asp.Net Core Product Template Pack
      • Note: I would not support the bad VS plugin, Mads Kristensen works great.
      • Setting Details and Settings: Blog Post

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

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

Notes. There are many other ways to get Angular to work with ASP.Net/.NetCore projects like NPM, Bower, NuGet, etc. I tried to highlight those that are simple and actually work. They also match where Microsoft is heading, according to the Pluralsight blog post above.

+5
source share
4 answers

[I know that you did not specifically ask about it, but simply wanted to share thoughts that are very relevant in my opinion]

I was at the exact same point a few months ago, and I decided to go with angular cli. and I thank God for making this decision. Incomparably more clear, and in fact they put things as they should be: .net core web api backend and a completely separate angular client. just like you would not put your iphone / android application in a VS-solution, there is no real reason to install angular none of them.

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

+6
source

I see how this is confusing, but true. You will need two separate projects. One of them will be the base .net backend server (REST), and the other will be Angular 2 spam. There will be a complete separation.

With AngularJS, you can simply insert the js file into razor mode and call it day. However, with Angular 2/4 and React, it is best to place each project in its own solution. It may seem silly at the beginning, but when you create your api, it can be easily justified by the future, as it can also be consumed by mobile applications, desktop applications, etc.

I know there is an Angular cli powershell dotnet spam wnet service for the .net kernel, but this is really a mess and actually outputs the wrong html, which can be harmful for SEO, etc. It is best, IMO, just use the Angular CLI in a separate project.

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

Hope this helps.

+2
source

It's not entirely clear what you mean by “Add Angular 4 to your ASP.NET core project,” but one way to do this is:

  • Create an Angular 4 project (using angular-cli).
  • Create an ASP.NET base project (using the .NET Core CLI) in the same directory as the Angular project.
  • Adjust the webpack.config.js file (which is part of the angular-cli installation) to automatically insert the attached files into the wwwroot directory (the web package will be responsible for this).

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

+1
source

I worked on Angular 4 (SPA) and .Net core web api. You can check the repository and you can get a better understanding.

I had to find solutions in many areas, such as authentication, authorization, social login, MongoDB etc connector

Hope this saves time for anyone to stumble upon.

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

0
source

Source: https://habr.com/ru/post/1269078/

More articles:


All Articles