This is quiz.service.ts
import { Injectable, } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Injectable()
export class QuizService
{
readonly rootUrl = 'http://localhost:4200';
constructor(private http : HttpClient)
{
}
insertParticipant(name: string, email: string)
{
var body = {
Name : name,
Email: email
}
return this.http.post(this.rootUrl + '/api/InsertParticipant',body);
}
}
I get this error:
Failed to load Resource : the server responded with the status 404(Not Found) in console in Angular 5
I think its the url issue is there.
My angular version details
Angular CLI : 1.7.4
Node : 12.13.0
OS : win32 * 64
Angular : 5.2.11
I think the url is having the navigation problem.
How to solve the error?
What is the proper way to route the url in angular 5.2?
as I can see you don't have backend and try to send a requests into your .ts file (mayby I'm wrong).
But if it's true, you need a server with backend api to make http requests (it can be a server on your local machine or it can be remote server) and you need a method that will process your request.
Request will be look like this your_server_url/api/insert_participant.
Also you can you use https://www.npmjs.com/package/angular-in-memory-web-api to emulate CRUD operations without servers api. It intercepts Angular Http and HttpClient requests that would otherwise go to the remote server and redirects them to an in-memory data store that you control.
Related
Suppose I have an echo HTTP service written in Ballerina as follows:
import ballerina/http;
service / on new http:Listener(9090) {
resource function post echo(#http:Payload json payload) returns json {
return payload;
}
}
How can I write unit test the behavior of the echo resource method?
You can write unit tests for an HTTP service using the Ballerina HTTP client.
Place the tests inside the tests directory inside your Ballerina project.
Following is an example test:
import ballerina/http;
import ballerina/test;
#test:Config {}
function testService() returns error? {
http:Client httpClient = check new("http://localhost:9090");
json requestPayload = {message: "hello"};
http:Request request = new;
request.setPayload(requestPayload);
json responsePayload = check httpClient->post("/echo", request);
test:assertEquals(responsePayload, requestPayload);
}
Here, we send a payload and get it back using an HTTP client, and then check whether the echo service sends back the same payload.
When running the tests, the service will be started automatically. You don't have to run them manually.
I am using QAF Webservice support for API automation. I have a case where a GET request has a body present. If I pass the request as either using properties file or xml file, on executing I am getting 404 not found response. If the GET request does not have a body present, it works fine in that scenario without any issues. But not with GET request having a body. Upon debugging, found that jersey client API at the end changes the request from GET to POST if a GET request has a body. Please let me know on how to handle this scenario using QAF WebService.
Thanks,
You can use apache HttpClient that will allow to have body with get request. In order to use apache HttpClient, you need to provide implementation of RestClientFactory and register using property rest.client.impl.
Here is the sample code from the qaf users group.
package qaf.example.tests;
import org.apache.commons.httpclient.HttpClient;
import org.apache.commons.httpclient.MultiThreadedHttpConnectionManager;
import com.qmetry.qaf.automation.ws.rest.RestClientFactory;
import com.sun.jersey.api.client.Client;
import com.sun.jersey.api.client.ClientHandler;
import com.sun.jersey.api.client.config.ClientConfig;
import com.sun.jersey.client.apache.ApacheHttpClient;
import com.sun.jersey.client.apache.ApacheHttpClientHandler;
import com.sun.jersey.client.apache.config.DefaultApacheHttpClientConfig;
/**
* #author chirag
*
*/
public class ApacheClientProvider extends RestClientFactory {
#Override
protected Client createClient() {
MultiThreadedHttpConnectionManager connectionManager = new MultiThreadedHttpConnectionManager();
connectionManager.getParams().setConnectionTimeout(5000);
connectionManager.getParams().setSoTimeout(1000);
connectionManager.getParams().setDefaultMaxConnectionsPerHost(10);
HttpClient httpClient = new HttpClient(connectionManager);
ApacheHttpClientHandler clientHandler = new ApacheHttpClientHandler(httpClient);
ClientHandler root = new ApacheHttpClient(clientHandler );
ClientConfig config = new DefaultApacheHttpClientConfig();
Client client = new Client(root, config);
return client;
}
}
In order to use it, register your class using rest.client.impl property, in above case:
rest.client.impl=qaf.example.tests.ApacheClientProvider
I have a custom application developed standalone using angular 4 and bootstrap version 3.
I do build a custom application using angular-cli using 'ng build' command.
I want to integrate this application with cumulocity.
Can someone suggest the approach to integrate this application with Cumulocity considering this standalone application need to work standalone as well and within cumulocity as well?
I want to follow cumulocity brandings also. (I can modify my less files to use Cumulocity variables)
You can simply to the ng build, zip everything in the dist folder and then upload it as a custom application. The application will then run in the context of your Cumulocity tenant.
To connect to the REST endpoints of Cumulocity (documentation) you need to configure basic auth with your username and password. If you are using the ng2 http client you can do that the following way:
import {Injectable} from '#angular/core';
import {Http, Headers} from '#angular/http';
#Injectable()
export class ApiService {
constructor(private http: Http) {}
call(url): Observable<any> {
let username: string = 'username';
let password: string = 'password';
let headers: Headers = new Headers();
headers.append("Authorization", "Basic " + btoa(username + ":" + password));
return this.http.get(url, {headers: headers})
}
}
However, remember that you should not write the username and password fixed into the application because everyone could read it then. Better is to use a form to authenticate the user and only use it in the context of your Single Page Application.
For branding, you can find the defined less variables in the examples.
I've created a FirebaseService in my Angular2 app as follows:
#Injectable()
export class FirebaseService {
public initialize(): void {
var config = {
apiKey: "xxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxx",
databaseURL: "https://xxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxx",
};
firebase.initializeApp(config);
}
}
However when I attempt to call initialize() I get the following error in the browser console.
VM438:1 Uncaught SecurityError: Blocked a frame with origin "https://xxxxxx" from accessing a frame with origin "http://localhost:3000". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.
This suggests that I need to be serving my Angular app from a https server. Given that I'm a newbie and developing and serving my Angular app locally using Express, what is the best way round this?
Do I need to go and learn how to set up https with express, or can I somehow get round this and get back to the https part of my self tuition later?
Lately I've been playing around with AngularJS and Java EE 6. I've build an webservice with Jersey and deployed the project on Glassfish. Because I needed some kind of authentication and an OAuth implementation or an JDBCRealm seemed overkill I decided to just create a session if the user successfully logged in.
#POST
#Path("/login")
#Produces({MediaType.APPLICATION_JSON})
#Consumes({MediaType.APPLICATION_JSON})
public Response login(LoginDAO loginData, #Context HttpServletRequest req) {
req.getSession().invalidate();
loginData.setPassword(PasswordGenerator.hash(loginData.getPassword()));
User foundUser = database.login(loginData);
if(foundUser == null) {
return Response.status(Status.CONFLICT).build();
}
req.getSession(true).setAttribute("username", foundUser.getUsername());
return Response.ok().build();
}
#GET
#Path("/ping")
public Response ping(#Context HttpServletRequest req) {
if(req.getSession().getAttribute("username") == null) {
return Response.ok("no session with an username attribute has been set").build();
}
return Response.ok(req.getSession(true).getAttribute("username")).build();
}
This seems to work alright, if I post to /login from Postman or from a basic jQuery webpage deployed on glassfish I do get the correct username back and a session has been placed. If I then send a GET request to /ping I do get the username back from which I logged in.
I've an AngularJS application deployed on a node.js webserver which needed to login. Because this server is on another port its on another domain and I had to go through the pain of enabling cors. I did this by building a container response filter which sets the response headers.
public class CrossOriginResourceSharingFilter implements ContainerResponseFilter {
#Override
public ContainerResponse filter(ContainerRequest creq, ContainerResponse cresp) {
cresp.getHttpHeaders().putSingle("Access-Control-Allow-Origin", "http://localhost:8000");
cresp.getHttpHeaders().putSingle("Access-Control-Allow-Credentials", "true");
cresp.getHttpHeaders().putSingle("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
cresp.getHttpHeaders().putSingle("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With");
return cresp;
}
}
This did made it possible for me to send different types of HTTP requests from AngularJS to Java EE 6 application deployed on glassfish.
The problem is that when I send a POST request from AngularJS to the /login method, a session is created and I do get my username back. But when I send a GET request to the /ping method I get the "no session with an username attribute has been set" notice.
I believe this has to do with cross domain prevention and that I've to set the withCredentials tag when I send a xhr request. I've been trying to do this in AngularJS but haven't found out how to do this.
function LoginCtrl($scope, $http) {
$scope.login = function() {
$http.post("glassfish:otherport/api/login", $scope.credentials).
success(function(data) {
console.log(data);
}).
error(function(data, error) {
console.log(error);
});
};
};
And in another controller:
$scope.getUsername = function() {
$http.get("glassfish:otherport/api/ping", {}).
success(function(data) {
$scope.username = data;
}).
error(function() {
$scope.username = "error";
})
}
I've tried to set withCredentials is true
$http.defaults.withCredentials = true;
This however didn't solve my problem. I also tried to send it with every request in the config parameter but this didn't solve my problem either.
Depending on the version of AngularJS you are using you might have to set it on each $http.
Since 1.2 you can do:
$http.get(url,{ withCredentials: true, ...})
From 1.1.1 you can globally configure it:
config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.withCredentials = true;
}]).
If you're using an older version of Angular, try passing a config object to $http that specifies withCredentials. That should work in versions before 1.1:
$http({withCredentials: true, ...}).get(...)
See also mruelans answer and:
https://github.com/angular/angular.js/pull/1209
http://docs.angularjs.org/api/ng.$http
https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS?redirectlocale=en-US&redirectslug=HTTP_access_control#section_5
just an update to #iwein anwser, that we can now set in config itself
config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.withCredentials = true;
}]).
https://github.com/angular/angular.js/pull/1209
(available only after unstable version: 1.1.1)
In 1.2 version, this doesn't work for me:
$http({withCredentials: true, ...}).get(...)
if I read the doc, the shortcut method should take the config object
$http.get(url,{ withCredentials: true, ...})
$http is a singleton, That's the only way to mix in a same application requests with and without credentials.