DEV Community

Cover image for Build a Simple CRUD App with Angular 8 and ASP.NET Core 2.2 - part 1 - back-end

Build a Simple CRUD App with Angular 8 and ASP.NET Core 2.2 - part 1 - back-end

Martin Soderlund Ek on September 18, 2019

Part 1 - back-end with ASP.NET Core 2.2 and Entity Framework Core Let’s take a look at how to build a CRUD web app using ASP.NET Core 2....
Collapse
 
mattingham3 profile image
Matt Ingham

Hi Martin,

This was such a useful tutorial, thank you! I knew a little Angular and a little ASP.NET and this was perfect for filling the gaps and getting an application up and running.

My only question is why do you only use the DataRepository for the POST/PUT methods and stick with the db context for the GET methods?
Thanks Matt

Collapse
 
cdthomp1 profile image
Cameron Thompson

Hello Martin,

This tutorial is great!

I am, however, getting stuck on the adding the migration section of this tutorial. When I type "Add-Migration Initial" the build starts then fails imminently.

Any ideas on what is causing this?

Thanks again!
Cameron

Collapse
 
dileno profile image
Martin Soderlund Ek

Hi and thanks!

Does the solution build? Do you get any build errors?

I tried reproducing your error and could reproduce it when building an old version of this app (with url slugs actually) and got the same migration error. I also got build errors related to TypeScript and IteratorResult.

Then I used VS Code to run ng build in the ClientApp folder and got the following error:

ERROR in src/app/blog-post-add-edit/blog-post-add-edit.component.ts:8:27 - error TS2307: Cannot find module 'path'.

8 import { delimiter } from 'path';

I simply commented out this section in blog-post-add-edit.component.ts and ran ng build again and then building worked.

I finally ran ng serve (which builds and runs the ClientApp application) and then everything worked fine.

Collapse
 
cdthomp1 profile image
Cameron Thompson • Edited

So after some investigation, I changed line 35 of Startup.cs from "options.UseSqlServer(Configuration.GetConnectionString("BlogPostsContext")));" to "options.UseInMemoryDatabase(Configuration.GetConnectionString("BlogPostsContext")));" This allowed me to skip the section of doing "Add-Migrations Initial"

Collapse
 
dileno profile image
Martin Soderlund Ek

Thanks for sharing!

Installing these packages via Nuget might solve it too:

Microsoft.EntityFrameworkCore
Microsoft.EntityFrameworkCore.SqlServer

Collapse
 
caseygore profile image
caseygore

I followed the tutorial but when I get to doing a post in post man. I get a "Could not get any response" error. Could you elaborate on how to find your exact url and in my post man I have 9 headers and in your example you have 10.

Collapse
 
gavincampbellg2g3 profile image
gavin-campbell-g2g3

Hi Martin,

Thanks for the tutorial.

I encountered an exception though when I tried to run it:
"The CORS protocol does not allow specifying a wildcard (any) origin and credentials at the same time. Configure the policy by listing individual origins if credentials needs to be supported"

This was caused by setting both "AllowAnyOrigin()" and "AllowCredentials()" when setting up the CORS policy. However, when I remove "AllowCredentials()" and run it, it says the page cannot be found.

Any suggestions on how to overcome this? Has this requirement come into play since you wrote this tutorial, if not how did it work for you?

Any help would be greatly appreciated.

Thanks,
Gavin

Collapse
 
bogdanhatis profile image
bogdanhatis

Hi Gavin,

Yes, you need to remove the AllowCredentials() to run the solution. After that build the solution and the first page will be Not found and you need to put /api/blogposts into the url for calling the get all method.

Best regards,
Bogdan

Collapse
 
gavincampbellg2g3 profile image
gavin-campbell-g2g3 • Edited

Hi Bogdan,

Thanks for the help. I had realised my error but hadn't had a chance to come back and update my comment.

Thanks again for your help!

Gavin

Collapse
 
dileno profile image
Martin Soderlund Ek

Thanks for clarifying that, Bogdan!

Collapse
 
denisejames profile image
Denise R James

Martin,

If this is not the best tutorial on how get a back end for a blog, I missed it! Thanks for allowing me to have a backend in less than an hour. Now to the front end!

Collapse
 
dileno profile image
Martin Soderlund Ek

Thank you very much and the best of development luck :D

Collapse
 
jtorres33 profile image
jtorres33

Thank you very much!!! Great Project to me, because It show me step by step how create an Web Api and how use Angular with him.

Collapse
 
hacskoadam profile image
Adam Hacsko

Hi Martin,

Thank you for this awesome tutorial :)

Could you suggest some method or documentation, to implement a basic authentication for the project?

Thanks,
Adam

Collapse
 
dileno profile image
Martin Soderlund Ek • Edited

Hi and thanks - I'd take a look at Okta. developer.okta.com/quickstart/#/an...

Here's another good write-up: jasonwatmore.com/post/2019/06/26/a...

Collapse
 
puckwire1 profile image
puckwire

Why did you keep the dependency to the BlogPostsContext and use it for the Get methods, rather than the Data Repository? Any benefit to doing so?

Collapse
 
moataz_allam profile image
Moataz Allam

awesome tutorial, thanks for your efforts