locked
Core : WebAPI and AngularJS RRS feed

  • Question

  • User791773689 posted

    Hello everybody,

    On a Core project I created an Angular JS application, and added a WebAPI server to get data.

    Both run, independently, but not on the same port number.

    Am I supposed to give the full URL somewhere in the configuration to communicate between both ?

    Wednesday, July 31, 2019 6:01 AM

All replies

  • User-1038772411 posted

    Hello, Gluups

    Yes, if you want to connect your webapi project in your mvc or angular js project then must have to configure it. below code just add your mvc or angular project class file and use it as per your reqirement. just change your webapi project port number instead of mine which displayed in below code.

     public static HttpClient WebApiClient = new HttpClient();
    
            static GlobalVariables()
            {
                WebApiClient.BaseAddress = new Uri("http://localhost:5081/api/");
                WebApiClient.DefaultRequestHeaders
                    .Accept
                    .Add
                    (new MediaTypeWithQualityHeaderValue("application/json"));
                WebApiClient.DefaultRequestHeaders.TryAddWithoutValidation("Content-Type", "application/json; charset=utf-8");
            }

    Install : RestApiClinet from your NuGet Package Manager.

    Thanks.

    Wednesday, July 31, 2019 1:03 PM
  • User-474980206 posted
    In the angular application you would configure the url to the web api server. Google for samples of supplying configuration to ng build.

    Wednesday, July 31, 2019 2:20 PM
  • User791773689 posted

    Thank you very much for your reactivity.

    Did you notice any difference, based on whether you develop the WebAPI server first, or after the AngularJS application, within the same project ?

    Thursday, August 1, 2019 7:51 AM
  • User-474980206 posted

    I use react instead of angular. as the react project (like angular) is just one html page, and the MVC project is just webapi and spa services (to host the index.html page and bundled script files). This prevents cross site scripting problems. if you use the .net core spa template it create a folder for the client app and installs the node tools in that folder. 

    I also use swagger so I have a UI to test the webapi independent of the react application.

    typically I write the react code first often mocking the ajax results. when a webapi action is required, I write the action and test with postman/swagger. If its a new application, then typically I'll focus on the data model, then the input UI, then update services, then complex operations. 

    Thursday, August 1, 2019 8:32 PM
  • User791773689 posted

    OK thanks. The client called me for Angular JS and WebAPI, I shall struggle on this this week-end, and maybe I shall have to come and take ideas from this thread.

    AngularJS calls React.js, if I believe the update at the launch of execution.

    So you mean to declare the React reference separately, and it reduces the reference problems between the UI and the data layer ?

    I have to reach a certain level of mastery to propose a technology that the chief of project did not plan, so I should like to begin by being sure of what you mean. In fact, until now I focused on documents about AngularJS (.Net, .Net Core, it is not the same) and WebAPI, and I did not really pay attention to the role of React.

    Thursday, August 1, 2019 9:10 PM
  • User791773689 posted

    Hello everybody,

    This is how I progressed applying you advises.

    I should like to have more precision about where is the best place to put GlobalVariables in a WebAPI / AngularJS project, but in a SPA you can use private heroesurl in export class in the service (as proposed in the Heroes tutorial), which seems to do what it has to do.

    Using that I could pass the URL that returns the data from the WebAPI server.

    Just below I put this :

    /** GET heroes from the server */
    getHeroes(): Observable<Hero[]> {
    const url = `${this.heroesUrl}/getHeroes`;
    return this.http.get<Hero[]>(url)
    .pipe(
    tap(_ => this.log('fetched heroes')),
    catchError(this.handleError<Hero[]>('getHeroes', []))
    );
    }
    
    

    I get an error message in the console, telling there has been a "Http failure response for https://localhost:44323/ ..." followed by "Unknown Error".
    This message in the console includes the URL, and it is clickable. I click on it, and I see the data appearing in a new window.
    So, I passed the correct URL, but it seems there is a problem. One we can fear is an authorization problem, even if it is not confirmed. Any other idea ?
    Any solution ?

    Monday, August 5, 2019 2:40 PM
  • User-474980206 posted

    react,js is alternative to angular.js.

    if you are using angular, then you should be using ng build & ng serve to build / test the javascript files, and the index.html that references the script. you can use variables in the index.html, that the build will set. see the ng cli documentation (I know how this works for the react build, you will need to lookup the angular version).

    Monday, August 5, 2019 4:16 PM
  • User791773689 posted

    OK thanks, this time before "ng serve --open", I tried "ng build", but I am afraid it rescued nothing.

    Monday, August 5, 2019 6:31 PM
  • User-474980206 posted

    if you type ng serve, you are using node express to host the index.html and angular code. in this case your WebAPI will a different website.

    typically in production, your webapi site would host the index.html file and resources (which ng build creates), and thus ajax calls are just relative to the site /api/...

    if you are developing with ng serve (express) you should configure express to reverse proxy to webapi.  you create a proxy.config.json

    {
        "/api":
        {
            "target": "http://localhost:5000",
            "secure": false
        } 
    }

    and specify in:

       ng serve --proxy-config proxy.config.json --open

    you can add this to the project.json scripts so its just

      npm start

    note: if you use asp.net core, you can use the angular template, and spa services will reverse proxy to the express site in development (instead of express reverse proxying to webapi) and host the index.html and the angular project public folder in production. 

    note2: I don't use angular, but rather react, but the tool chains are similar.

    Monday, August 5, 2019 8:21 PM
  • User791773689 posted

    Oh well, I was beginning to sleep, but tested that immediately !

    Well, something must still be missing.

    If I do not put the path to the proxy.config.json I get an error message, so it is recognized, but then it seems pretty ignored : if the path given in the function does give a port the link is done on the same port than the calling page. If I put the full address, as before, I obtain the same result.

    HeroService: getHeroes failed: Http failure response for https://localhost:44323/api/heroes/getHeroes: 0 Unknown Error 

    I wonder what is that 0 at the end of the URL.

    Monday, August 5, 2019 9:02 PM
  • User-474980206 posted

    You should use the browsers debugger to get the network errors and response. First you should use the direct web api url and test we api works. Then you should run express with the proxy and try the url via express proxy Once this is all working, then try the app.

    I assume both sites are localhost and only the ports are different. So with both sites running,you should be able to access the api via either port. You also might want to install postman to do the debugging.

    Tuesday, August 6, 2019 11:53 PM