Build a CRUD App with ASP.NET Framework 4.x Web API and Angular
This tutorial walks you through building a simple CRUD application in ASP.NET Framework 4.x WebAPI and Angular 6.
rohan dhavale
Connection to the Okta database fails.
pallu
When I make any API call, I get the Chrome error: Failed to load http://localhost:57770/api/sugarlevels: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4200’ is therefore not allowed access. The response had HTTP status code 500.
pallu
I found the reason. I had this:
var cors = new EnableCorsAttribute(“http://localhost:4200/”, “", "”);
When I changed it to:
var cors = new EnableCorsAttribute(“http://localhost:4200”, “", "”);
It worked. The extra ‘/’ was the issue.
NitNeKing
Shouldn’t the line:
Then replace the component handling the ‘’ path with the home component in the routing array in app.component.ts:
read:Then replace the component handling the ‘’ path with the home component in the routing array in app.module.ts:
i.e update app.module.ts vs app.component.ts?
foreveryoung
no private key provided when signing up and creating an Okta app, only the public client ID key is generated !!
foreveryoung
In fact there is no good reason why Angular.IO and other tutorials don’t use good practice and mention app-routing.module.ts as the best place to declare routing from the outset.
foreveryoung
How come your port is 57770, when the tutorial says use 8080 ??
foreveryoung
Server Error in ‘/’ Application.
When I click IIS Express(Google Chrome) button in VS 2017
In Chrome:
The resource cannot be found.
Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.
Requested URL: /
foreveryoung
Vital missing info!!
Boom !! and it works!
I’ve wasted time thanks once again to an online tutorial - ok
MAKE SURE you right-click your API project name in Solution Explorer in Visual Studio and select Properties
Select the Web tab
Then select the radio button that says, "Don’t open a page. Wait for request from an external application.
Now when you run the API, you can hit the api controller method just by typing localhost:8080/api/sugarlevels - you don’t even need an SPA !
Make sure your Angular app has the following config in launch.json (http://localhost:8080 did’nt work)
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fw…
“version”: “0.2.0”,
“configurations”: [
{
“type”: “chrome”,
“request”: “launch”,
“name”: “Launch Chrome against localhost”,
“url”: “http://localhost:4200/”,
“webRoot”: “${workspaceFolder}”
}
]
}
foreveryoung
Great app - it’s running well and the Okta sign-in is really neat.
devduna
How can we publish the API on IIS and the clientside Angular dist folder into a separate folder,
Something like:
rootFolder\API → here it goes the web api publish files (bin, web.config, global.asax and so one)
rootFoolder\client → the Angular deployment files so when I send requests to my API I want to have something like this http://myserver.com/rootFol……
Bogdan Verbenets
How do you specify that ASP.NET FW project should deploy the generated dist folder? It ignores it by default.
Roger Delisle
Why am I getting this error? I’ve done this tutorial 3 times and the results are always the same.
zone-evergreen.js:2845 POST http://localhost:8080/api/sugarlevels net::ERR_CONNECTION_REFUSED
himanshu joshi
Hi I am getting this error : ERROR Error: Replace {youroktadomain} with your Okta domain. how can i resolve it
himanshu joshi
Hi I am getting this error : ERROR Error: Replace {youroktadomain} with your Okta domain. how can i resolve it