Http requests in universal mode

[angular]

Http requests in universal mode

[d668]

so how do i pre-render a component waiting for an XHR call to complete? (or a db call). I am using following and it doesn't wait

  async ngOnInit() {
    this.message = 'Hello!!';
    var data = await this.http.get('https://api.github.com/users/github').toPromise();
    this.message = data['bio'];
  }

[PatrickJS]

@Bhushan001 remove this line and update your repo to reflect the latest changes
https://github.com/Bhushan001/universal-starter-master/blob/master/src/app/app.component.ts#L20

[PatrickJS]

Hi Jeremy, this is an undocumented feature (as everything else is in the project). On the server you would import HTTP_PROVIDERS from angular2-universal-preview which will correctly include a server version of XMLHttpRequest

server.ts

import {ng2engine, HTTP_PROVIDERS} from 'angluar2-universal-preview';

app.use('/', (req, res) => {
  res.render('index', {
    App,
    providers: [
      HTTP_PROVIDERS
    ]
  });
});

bootstrap.ts

// import {bootstrap} from 'angular2/angular2';
import {bootstrap} from 'angluar2-universal-preview';
import {HTTP_PROVIDERS} from 'angular2/http';
import {App} from './app';


bootstrap(App, [
    HTTP_PROVIDERS
]);

this will work but then you have a problem of waiting until all the http calls are done before rendering on the server. We have a way for this to work but I'm working on improving the developer experience

[jtheoof]

Excellent. I think I'll wait a bit more to use the universal-preview and get back to it when there is more documentation. Thanks Patrick!

[danicomas]

+1 Waiting for that implementation :D

[mohammedzamakhan]

@gdi2290 I did what you have documented here, and it worked fine on the browser, but when I saw the page source, I did not see that it was rendered on server, the data was received on the server side, and then rendered only on client.

[PatrickJS]

@mohammedzamakhan HTTP_PROVIDERS was removed in the beta.0 update so I need to include it back. Keep in mind this feature is a huge problem in other server-side rendering implementation but we're able to solve it simply.

[mohammedzamakhan]

@gdi2290 Keep in mind this feature is a huge problem in other server-side rendering implementation

Can you expand more on this, what exactly do you mean by this, and which framework are you talking about. That would be helpful 😄

Thanks in advance

[zanettin]

+1
@gdi2290 and team: great work! can't wait to see this in "real-world-action"!

[joaogarin]

Hello,

Any follow ups on how to use http with angular universal?

[jon301]

+1
keep up the good work :)

[Bhushan001]

@gdi2290 I tried to do what you suggested above to use httpRequest to read json,but i am still getting the error : ReferenceError: XMLHttpRequest is not defined
I have used dynamicComponentLoader in app.component and inside this child component i have used HTTP_PROVIDERS.
I have done the modifications as mentioned above to server.ts and client.ts
any inputs?

[Bhushan001]

@gdi2290 @jtheoof @danicomas
I tried integrating the above solution in my project but not able to get it work, can anyone help me here? https://github.com/Bhushan001/universal-starter-master

[PatrickJS]

@Bhushan001 you need the full url for the http requests to work on the server

[Bhushan001]

@gdi2290 full url as in http://localhost:3000/people.json?

[PatrickJS]

yup

[Bhushan001]

@gdi2290 @jeffwhelpley @manekinekko could you please have a look at This Repository I tried the above solution but httprequest is still not working.please suggest if I am doing something wrong in order to be able to use http requests in universal.

[PatrickJS]

@Bhushan001 can you update the repo to latest changes https://github.com/angular/universal-starter

[Bhushan001]

@gdi2290 @jeffwhelpley @manekinekko I have updated it to latest repo. Still I am not able to use http request in universal . please have a look My Repo

[Bhushan001]

@gdi2290 @manekinekko @jeffwhelpley should I raise separate issue for this problem?

[jeffwhelpley]

Hey, @Bhushan001 sorry about the delay in response. @gdi2290 is working on stuff that will affect http and other async stuff. We will get back to you tomorrow on this once we work this out.

[joaogarin]

Hello @Bhushan001,

You can see here https://github.com/joaogarin/myblog-angular2/blob/master/src/client.ts and here https://github.com/joaogarin/myblog-angular2/blob/master/src/server.ts the server and client.

Mainly important is the usage of

import {ng2engine, REQUEST_URL, NODE_LOCATION_PROVIDERS,NODE_HTTP_PROVIDERS} from 'angular2-universal-preview';

In your server.ts

I think this goes more or less in the direction. The calls are working but like @jeffwhelpley is mentioning there are still some things that are being worked on. So probably better to wait a bit on that.

[jon301]

Hi,

Adding NODE_HTTP_PROVIDERS to my app providers fixed the ReferenceError: XMLHttpRequest is not defined error.

However, the ajax request is still made on the client side after the page load :(
I don't get any errors server side.
Any hints ?

[PatrickJS]

@jon301 that was by design. you can track issue angular/universal#274 for that feature request

[Bhushan001]

@jeffwhelpley @gdi2290 has this issue been resolved?

[PatrickJS]

@Bhushan001 yes I need just need to publish a version

[Bhushan001]

@gdi2290 @jeffwhelpley any inputs on when that version will be releases?

[PatrickJS]

@Bhushan001 the latest release works

res.render('index', {
        directives: [ App ],
        providers: [
            provide(APP_BASE_HREF, { useValue: baseUrl }),
            provide(REQUEST_URL, { useValue: url }),
            ROUTER_PROVIDERS,
            NODE_LOCATION_PROVIDERS,
            NODE_PRELOAD_CACHE_HTTP_PROVIDERS,
        ],
        async: true,
        preboot: true,
});

[jeffwhelpley]

@Bhushan001 can you confirm whether or not it resolves your problem when you get the latest?

[Bhushan001]

@gdi2290 @jeffwhelpley can you throw some light on how to read json file in this,as I know some angular2 only,i am not sure how to go forward on this.because I am still getting xmlhttprequest not defined error after getting the latest.

[jeffwhelpley]

@Bhushan001, can you check in your latest to your repo?

[Bhushan001]

@jeffwhelpley @gdi2290 I have updated my repo for My Repo latest changes. please have a look at it.suggest changes in the code if required.

[PatrickJS]

@Bhushan001 for the server you need a full url for your http calls

[Bhushan001]

@gdi2290 @jeffwhelpley I tried changing path to full url too. I have uploaded my code to this My Repository. can you please have a look at it and suggest edits on that?

[zanettin]

@gdi2290 @jeffbcross do you have any kind of working example on this? I need a working solution till Wednesday for a internal PoC presentation and it would be very nice if I could demonstrate this as well. Thank you very much for you help!

current state -> https://bitbucket.org/zanettin/isomorphic-poc (we just added some basic tests and removed webpack) npm start is still your entry point.

[Bhushan001]

@gdi2290 @jeffwhelpley did u look at my repository? was this issue resolved?

[Bhushan001]

@gdi2290 @jeffwhelpley thank u so much guys..finally this issue has been resolved.though I would like to pass the json externally.is that possible? as I could not find data.json anywhere in the repo.

[vforv]

@gdi2290 could you help me solve this issue on universal-cli:

this will work but then you have a problem of waiting until all the http calls are done before rendering on the server. We have a way for this to work but I'm working on improving the developer experience

http call works fine on server side but problem is rendering... Check this site: http://pushsc.com/show/code/58a885110a58d602a0b99d13

What should I do to fix this on my universal-cli project?

[singhmohancs]

@gdi2290 What is the final solution to this issue? I am still facing the same issue.

[PatrickJS]

if you're using latest version of Angular then it should be good

[singhmohancs]

@gdi2290 I am using this starter only and this uses angular 2.x.

And here is the error

Your help would be appreciated.

[stewones]

+1

[stewones]

@Bhushan001 your repository has been deleted.. please share your result with us. How did you get HTTP to work?

[Toxicable]

If you have an issue with http then I'd suggest opening a new issue.
This one has been closed for a long time now

[stewones]

ok I solved like you said in gitter, just importing HttpClientModule once in app.module

thanks