I have a .net 5 web api that consists of a solution with most of projects being .net 5, but two of them are .net framework (v 4.7.2).
The web api works fine when I run it, and referring to .net framework projects is not a problem.
Now I am trying to upload this solution to azure app service using Github actions. The build step works fine, but when publishing, I get the following error:
C:\Users\runneradmin\AppData\Local\Microsoft\dotnet\sdk\5.0.202\Microsoft.Common.CurrentVersion.targets(4288,5):
error : MSB4803: The task "FormatUrl" is not supported on the .NET
Core version of MSBuild. Please use the .NET Framework version of
MSBuild. See https://aka.ms/msbuild/MSB4803 for further details. [path
to my .net framework .csproj]
I am trying to avoid updating the project to .net 5. Is there a way to configure my github actions to be able to publish .net framework projects as well?
I have a .net core 3.0 project with an angular 8 frontend that uses webpack.
I need to enable server side rendering on the angular project for SEO and other indexing reasons but I am not able to get the project to run with server side rendering enabled.
I encounter various errors, see below. But ultimately it would be good if someone could point me in the right direction or let me know if SSR is achievable in .net core 3.0, if not then I can use 2.2 if it means SSR will work.
I have actually been able to get a .net core 2.2 angular SSR project to work but as soon as I do a HTTO get on anything other than the index page through postman, it returns 404 "Cannot get".
Here is the .Net Core 2.2 project I have been able to make work.
Here is one of the tutorials I have followed which uses .Net Core 2.2.
Also, it seems that app.UseSpaPrerendering is now deprecated in .Net Core 3.0, and I cannot find any documentation on how to make SSR work without it.
Here is the main error I encounter when trying to run the test project which I followed the above tutorial to build:
NodeInvocationException: Prerendering failed because of error: Error: The module at main.js does not export a default function, and you have not specified which export to invoke.
There seems to be very little documentation on .net core + angular SSR so any advice would be appreciated.
I followed this article's instructions and it works like a charm for netcore 3.1. It also mentions your NodeInvocationException. According to the author this happens, "when your app starts to run before the Angular CLI server has finished building the app server-side".
It works despite the deprecation warning that you will get for UseSpaPrerendering().
PS: I had also to set the build action for main.server.ts and main.ts. Maybe the author just forgot to mention it.
I have legacy dlls written in .net framework 4.7.1 and I have an Angular 7 web app that was written separately, using a REST API (currently with mock answers).
I want to create a WebAPI (preferably, also in .net 4.7.1) that runs on the same port as the web application, receives the REST requests, uses the 4.7.1 dlls to process the request and responds back.
I'm using visual studio 2019 and IIS Express to run the web app locally.
So far, I've created a new ASP.NET Framework WebAPI project and included the web apps folder content in the project folder.
I tried to follow this guide to make the web app run with the REST API:
https://developer.okta.com/blog/2018/07/27/build-crud-app-in-aspnet-framework-webapi-and-angular
I've added this to Web.config
<add key="owin:AutomaticAppStartup" value="false" />
and this to WebApiConfig.cs:
var cors = new EnableCorsAttribute("http://localhost:4200", headers: "*", methods: "*");
config.EnableCors(cors);
as well as all the steps described in the article (except for the Authentication and DB modeling)
I've configured the projects URL to port 4200, but I'm getting "Server Error in '/' Application. The resource cannot be found." error when I go to http://localhost:8080/, although http://localhost:8080/api/[controller] REST works.
The result I'm looking for is to load the application on URL "localhost:XXXX" with the app.component as the default page and the REST to listen on "localhost:XXXX/api/[controller]" - at least until I'll change the URL for the WebAPI.
Note: The Angular app contains routing within itself too.
How can I manage to do that?
P.S. I managed to do this using ASP.NET Core 2.1 project but due to potential compatibility issues and to avoid Runtime exceptions, I need to run this in a .net 4.7.1 project.
Edit: the end goal is to run both the app and the WebAPI on the same service.
I am unable to find any documentation, or examples, of an ASP.NET MVC Core app running under the full framework. It is supposed to be supported, but as I said I cannot find any documentation of how to configure a project for this, and have not been able to work it out myself.
Has anyone got this working and can provide advice/sample on what needs to be done?
I am able to create/run ASP.NET Core 2.0 project with Full .NET framework 4.6.1, I followed below steps-
Created new project using ASP.NET Core web application under Web category-
On 2nd step, selected Web Application (Model-View-Controller)
csproj looks like this- <TargetFramework>net461</TargetFramework>
My Environment is-
Visual Studio 2017 Community 15.3.3 version
.NET Core 2.0 SDK
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.
[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
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.
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:
Create an Angular 4 project (using angular-cli).
Create an ASP.NET Core project (using .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) 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.
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
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:
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'.
Close VS so that it will not lock the folder for any permission
Navigate to the base path of the project folder.
Run 'ng new DatingApp-SPA'. This will add Angular goodies to the existing DatingApp-SPA project.
Open the solution again on VS.
CREATE A NEW COMPONENT:
Open command prompt and navigate to the project folder
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:
Open command prompt and navigate to the project folder
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