CORS Origin problem in my C# Angular application

I’ve been working on some personal project which is built using angular and C#

The front end is built with Angular and backend (actually API) is built using C#

So technically both project has been deployed in different folders in my case.

Whenever I’m debugging and calling my API which is also running in debugging mode of local environment everything fine.

When I’ve deployed my API in IIS and tried access from angular application which is debugging mode.

I have received the following error in my browsers console as

No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I have started looking solution for this problem. I have started adding various headers in my angular httpclient, nothing works.

Later, found that we have to add access control header in server side. By default angular support and provides all the necessary things we need. So we don’t need to anything in angular application side

Then found a configuration which needs to be done in server side to avoid cross origin problem.

Its pretty straight forward, we have to update our server side configuration with following change. In my case it’s my C# API project web.Config

<system.webServer>
<httpProtocol>
<customHeaders>
<add name=Access-Control-Allow-Origin value=* />
</customHeaders>
</httpProtocol>

<system.webServer>

This one tweak allows us add this custom headers to all our Api requests and provides us to access in cross origin too.

That’s it.

Happy Coding!

Angular 5 Tutorial 02 – Creating Hello World Application

In this post, we are going to discuss how to setup development environment and create an initial angular app using CLI.

Whenever I’m creating a new application, I always prefer some standard folder structure or use file generator like Yeoman.

A quick start tool always helps the developer to save their valuable time and use those time efficient way on improving the quality of the application.

Angular provides us Angular CLI which is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

Using this CLI, we can create apps with a working condition which uses best practices suggested by Angular Team.

To create an Angular application using Angular CLI, all we need is to follow the below steps:

1. Install Node js and npm on your machine.

Visit Node.js web page and download installer. Once you’ve installed nodejs, the npm will get installed along with it.

2. Verify the compatible version

Angular CLI requires the minimal version of node 6.9.x and npm 3.x.x.

We can check the version of node and npm using following commands.

node -v

npm -v

01

3. Install Angular CLI

Run the following command to install Angular CLI globally.

npm install -g @angular/cli

-g flag is used to install the package globally in the npm.

Once we installed CLI globally, we can confirm whether the tool installed successfully by using the following command.

ng -v

 

4. Create a project

Now, creating a project becomes very simple. We have to run following command,

ng new cool-app

  • cool-app is the name of the project.

 

new-app

Once the files has been created, the CLI will start installing npm packages automatically. Wait until the packages getting installed, it will take a bit of time to complete the process.

The folder and file structure will looks as follows

code_ng-app4.png

5. Serve the application

Once the dependencies are installed, traverse to the created projected and serve the application using the following commands.

cd cool-app

ng serve –open

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

Using the –open (or just -o) option will automatically open your browser on http://localhost:4200/.

The default page will gets open with the greeting message.

 

CoolApp.png

 

Stay connected and Keep supporting. 🙂

Happy Coding!

 

In the next post, we can discuss about the architecture of angular application.