Http requests in universal mode

[jtheoof]

This is not really an issue, more of a noob's question. How to perform http requests in universal mode.
I'm trying to follow the current documentation.

app.ts:

import {Component} from 'angular2/angular2';
import {Http, HTTP_PROVIDERS} from 'angular2/http';

@Component({
    selector: 'app',
    viewProviders: [HTTP_PROVIDERS],
    template: `
    <div>
        <h1>Hello, {{ name }}!</h1>
    </div>
    `
})
export class App {
    public people: any;
    constructor(http: Http) {
        http.get('people.json').map((res: any) => res.json()).subscribe((people: any) =>
            this.people = people
        );
    }
}

But the code is actually run in the server, and therefore nodejs is unhappy of XMLHttpRequest not being present (which is normal since running this code by the universal bootstrap).

ReferenceError: XMLHttpRequest is not defined
    at BrowserXhr.build (app/node_modules/angular2/src/http/backends/browser_xhr.js:17:60)
    at Observable._subscribe (app/node_modules/angular2/src/http/backends/xhr_backend.js:34:35)
    at Observable._subscribe (app/node_modules/angular2/node_modules/@reactivex/rxjs/dist/cjs/Observable.js:134:28)
    at Observable.subscribe (app/node_modules/angular2/node_modules/@reactivex/rxjs/dist/cjs/Observable.js:103:29)
    at new App (app/built/client/app.js:15:78)

[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