.Net Core 3.0 Angular SSR Project not running - c#

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.

Related

Scaffolding item error with creating the identity, while I was trying to create an ASP.NET MVC project

I am following a tutorial ("Build real world application using ASP.NET Core MVC, Entity Framework Core and ASP.NET Core Identity") and I am at the point where I need to create the identity as a scaffold item.
However, I seem to be running into an error that has to do with the bootstrap version I'm using, I'm just not sure what to do from here.
"There was an error running the selected code generator: 'The specified bootstrap version '4' is not valid. The valid options are '3,4,5'."
I have updated my code generator but it didn't help.
I've encountered a similar problem. It seems that it is related to the recently released .Net 6. I've solved by switching back to .Net 5 and reinstalling all related packages and executing wizard in this environment. After that I migrated back to the .Net 6
There is a simpler work around. Remove the wwwroot/lib/bootstrap folder (I simply moved it to another holding location temporarily... It doesn't work to simply right click and exclude it from the project).
Do the scafolding and it should work... then put the folder back.
Worked for me...

What is the recommended way to deploy a .NET Core app into Heroku?

I want to deploy an ASP.NET Core 3.1 web app into the Heroku platform.
After searching in google and following a bunch of articles I am still getting an error.
Deploy fails with "[ERROR]: Failed to deploy"
Can someone recommend me the latest working way of deploying a .NET app into Heroku?
You need to use correct heroku build pack for asp.net core.
This build pack maybe helps you.
https://github.com/jincod/dotnetcore-buildpack

azure mobile service not working on xamarin.android

I'm trying to implement Azure Mobile Services in my Xamarin.Forms app.
I'm following this link and it works on iOS but not on Android.
It throws this exception:
MobileServiceInvalidOperationException - "The server did not provide a response with the expected content."
I have tried switching between HTTP and HTTPS but could not get it working.
It works on Android (native) as well, just not on Xamarin.Android
Any help?
Your issue is tracked here, and seems to be because of the following:
we don't support .Net Core 2.1 in the SDK today. Unfortunately, we don't have a workaround today and like Ela said, the we don't have an ETA for a new release or other SDK to use for .Net Core 2.1 compatibility yet, so your only workaround is to stick with .Net Core 2.0 for now.
There seems to be a temporary work around here, by brendanzagaeski to in the call to new MobileServiceClient():
Either pass in an HttpClientHandler instance
Or pass in an instance of AndroidClientHandler
It seems like AndroidClientHandler is the one that works the most often.
Check if "microsoft.azure.mobile.client" is referenced on your project. If not, try installing a lower version of the "microsoft.azure.mobile.client" through nuget package on your project add the using directive and then update the "microsoft.azure.mobile.client" through nuget package.
And update any pending package.

Add Angular 4 to an ASP.NETCore Project

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

Self host Asp.net MVC 4.5.2

I am attempting to self host a Asp.Net 4.5 MVC 5 application. Now after some research it seems this cannot be done with this framework, it would require switching it out for Nancy.
I understand that Asp.Net 5 supports this with Owin. I have been able to convert my MVC project into the new Asp.Net 5 project (with the project.json) and set my runtime version as .net 4.5
"frameworks": {
"net45": {
"dependencies": { }
}
},
This is so I can still use the other .Net 4.5 projects in my solution (otherwise I need to upgrade all of my projects and their dependencies, which some do not support .Net 5 yet). Is there any way to self host like this?
Which Asp.Net 5 build are you targeting in your app? For the RC2 builds the hosting API has changed somewhat and therefore other examples you find online may not work anymore, please see here for more information on that, it also explains how other's are using IIS to self-host so hopefully that will prove useful to you:
Changes to hosting API
It would also be helpful to know which server you're planning on using to self-host your app. Generally Kestrel is used but this should always be behind a Web Server such as Nginx, Apache or IIS, and never exposed directly.

Categories

Resources