Universal: Resolve router on SSR

[ccaymaz]

Hi,

I am having some issue while SSR. I added 5 seconds delay on "/api/SampleData/WeatherForecasts" and added router resolve on '/fetchdata' link.

When I hit fetchdata link from home page, I wait 5 seconds to see actual fetchdata page. Working correctly. But if I refresh my screen while I am on fetchdata page, I immediately receive content of the fetchdata page and then after 5 seconds, I get the data.

Fetchdata page should wait until "/api/SampleData/WeatherForecasts" return data. I am currently using nguniversal/aspnetcore-engine : beta-2 version for SSR.

My resolver is like that:

@Injectable()
export class FetchDataResolve implements Resolve<any> {

    constructor(
        private http: Http,
         @Inject('ORIGIN_URL') private originUrl: string) { }

    resolve(route: ActivatedRouteSnapshot) {
        return this.http.get(this.originUrl +'/api/SampleData/WeatherForecasts').map(res => res.json());
  }
}

I used it in the app.module.shared.ts like that

.......
            { path: 'fetch-data', component: FetchDataComponent, resolve: { fetchdata: FetchDataResolve} },
.......

And last one is my fetchdata.component.ts

    constructor(
        private route: ActivatedRoute) {
        this.forecasts = this.route.snapshot.data['fetchdata'] as WeatherForecast[];
    }

• [X] bug report
• [ ] feature request
• [ ] support request => Please do not submit support request here, see note at the top of this template.

* **What modules are related to this Issue?**

• [X] aspnetcore-engine
• [ ] express-engine
• [ ] hapi-engine
  ```

[BatsShadow]

It seems like this is not an issue with universal but with router resolvers in general. Both on server side and on client side, the ApplicationRef isStable observable is firing before my http data is resolved.

[BatsShadow]

My latest testing could not reproduce this with a simple observable:

    return Observable.of({ data: 'test' })
      .delay(2000);

So maybe it's somehow caused by Http service?

Is this the right place to report this, or should this be reported in angular/angular?

[PsychicCat]

help! i am experiencing the same issue. it does seem to be something with the http client. i'm using ng-express-engine, not asp.

[Toxicable]

This should be working fine, aslong as you're not running the http calls outside of angular's Zone then they should be "tracked", if you don't know what I mean by that then it shouldn't be an issue.
Closing this for now but if you still have a problem open up another issue with a minimal reproduction, https://github.com/angular/universal-starter/tree/master/cli is a good starting point

[d668]

@Toxicable https://github.com/angular/universal-starter/tree/master/cli is dead. Can we please have at least one working example where universal waits for a http call or return Observable.of({ data: 'test' }) .delay(2000);? There is no docs, all repos are buggy. Quite a mess

[Toxicable]

@intergleam Sure I made a little example here
https://github.com/Toxicable/universal-starter/tree/observable-delay

[d668]

ok i got it

[BatsShadow]

As mentioned above, delay() does not reproduce the issue. The issue seems directly tied to http calls. Rework your example to do an http client .get() to a real website and I suspect you will find it does not work.

For what it's worth, my testing was all using the original HttpModule. I have recently switched to HttpClientModule and have not re-tested to see if it has the same problem.

[Toxicable]

@BatsShadow HttpClient works without issue on Universal. If you have an issue with it then please open a new issue with a a minimal reproduction, we don't maintain closed issues

[BatsShadow]

@Toxicable I can open a new issue, but I'm a bit disappointed that you closed this issue despite the fact that you never tried to reproduce it with the information we provided. Also, I originally asked if this issue was reported on the wrong project and never got an answer.

No worries, just something to think about.

[Toxicable]

@BatsShadow I closed this issue with an explanation of how they should be tracked and explaining that we'd need a minimal reproduction to do anything actionable.
Yes I try reproduce it as shown with the delay and I also tried with a HttpClient called but didn't push that one to git.

Jsut to reiterate; we cant do anything if you don't provide a minimal reproduction.

[Josh1billion]

I had this issue and spent hours debugging it. The problem ended up being that the URL I was passing to http.get() was relative, not absolute. That didn't cause any issues on the browser, but it did cause an issue on the server.

Here's an example, assuming your service has a variable called runningInBrowser.

    var url = "/blah";
    if (!this.runningInBrowser) {
             url = "http://localhost/blah";
    }
    this.http.get(url) // ...

[d668]

I still don't get how do I prefetch data let's say from weather API ?
Can I just use ngOnInit or I have to use TransferState?

[d668]

@Toxicable can you please modify your example repo with a http call to weather APi? many thanks

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

<sub>_This action has been performed automatically by a bot._</sub>