Google+

Saturday, April 18, 2020

How to solve the error "No directive with exportAs set to ngForm" while using Angular 7

In this article we review how to solve the error "No directive with exportAs set to ngForm" while using Angular 7.
While declaring a variable on the View, to reference the Template Driven Form that we designed there, we would face an error , at the moment Angular tries to assign the ngForm Directive to the template variable.
The error just states "No directive with exportAs set to ngForm":





How to solve the error "No directive with exportAs set to ngForm" while using Angular7


The cause of the error is quite simple. Indeed, the error message states the problem specifically : "No directive with exportAs set to ngForm".
Remember that ngForm is a Directive . Also, you know that if you code a Directive, you must decorate it with the "export" word.  Therefore, Angular has not found the corresponding Directive, to bind it to the Template.
In other words : "I could'nt find an ngForm directive with an 'export' definition".

So that we do is to open the Module where your Component was declared, let's say the app.module for example, and IMPORT there the FormsModule class, which is in '@angular/forms' :




The FormsModule class, as stated in its definitions, has as its objective to "Exports the required providers and directives for template-driven forms".


After you add this module in the "imports" section, delete and add again the Template variable, and the error will dissapear.

That's All!!! 
Enjoy Angular.....

      by Carmel Schvartzman

כתב: כרמל שוורצמן

Tuesday, April 7, 2020

Solved : Preflight Request CORS error : "The requested resource does not support http method 'OPTIONS'"

In this article we review how to solve the Preflight CORS error "The requested resource does not support http method 'OPTIONS'".
Are you confronted to this error ? :


For several CORS requests, the browser sends a previous request, named "preflight request", before it sends the actual request for the resource.
It is not enought to use the standard CORS (Cross Origin Resource Sharing) on web.config , in order to solve the problem.
Here you can see the web.config settings, usually arranged to solve the problem :







How to solve the Preflight CORS error "The requested resource does not support http method 'OPTIONS'" using Angular7



The issue appears while crossing domains, and relates to POST, PUT, PATCH, and DELETE methods:
here you can see several requests , also from the Angular 7 app, as from POSTMAN :








As said, it is not enought to set the web.config to CORS.
Now,  usually the browser sends a previous request to the request that you are sending, named "preflight request", before it sends the actual request for the resource. This Preflight request is of OPTIONS type.
If the response headers do not allow the required HTTP METHOD, the browser do not send it.

The problem is, the WebApi app has not an action to process the Preflight OPTIONS request :



That is what the error is trying to say us.

So, just write an action for OPTIONS verb, that only responds an "OK", as this :



Now try again. Send a request. The breakpoint will show the OPTIONS request being processed :



Immediately after, the intended request is taken care of:





That solves this issue.
Have a good day :-)

Enjoy Angular.....

      by Carmel Schvartzman

כתב: כרמל שוורצמן