Universal: Angular Universal Common Module doesnt work with aspnetcore-engine

[naveedahmed1]

• I'm submitting a ...

- [x ] bug report

• What modules are related to this Issue?

- [x ] aspnetcore-engine
- [ x] common module

Since the intro page of Angular Universal Common Module says "This is the common Angular Universal module that is common across server-side rendering app irrespective of the rendering engine." I assume it should also work with aspnetcore-engine.

I tried adding it to my aap, but it seems that it doesn't work. Though it doesn't break the app as with that case mentioned in https://github.com/angular/universal/issues/832 , but the requests are executed twice, once on server and then again on client.

[naveedahmed1]

I think the issue here is again due to ServerTransferStateModule , though the docs about Angular Universal Common Module doesn't mentioned that we are also required to import ServerTransferStateModule. But looking at the code it seems that we must import it and after you import ServerTransferStateModule, its break the app.

[MarkPieszak]

Somehow adding ServerTransferStateModule breaks the server-render completely, it's on my radar, just need some time to investigate it further.

This is the same issue as #832

[grundera]

I've investigated that ServerTransferStateModule breaks server-side rendering because it adds a hook to BEFORE_APP_SERIALIZED providers.
I've tested it by making a simple module with the BEFORE_APP_SERIALIZED provider and importing it in the same place as the ServerTransferStateModule.

The issue is related to aspnetcore-engine because it also adds a hook to BEFORE_APP_SERIALIZED in extraProviders. express-engine doesn't add a hook a it works with it.

[naveedahmed1]

I think aspnetcore-engine would be deprecated soon, the new upcoming template from Microsoft, won't need it. Have a look at https://github.com/aspnet/JavaScriptServices/issues/1288#issuecomment-346003334

[devel112]

Possible cause

ServerTransferStateModule version 5.1.3
https://github.com/angular/angular/blob/5.1.3/packages/platform-server/src/transfer_state.ts

aspnetcore-engine version 35bfc51 on Oct 11, 2017
https://github.com/angular/universal/blob/master/modules/aspnetcore-engine/src/main.ts

ServerTransferStateModule.serializeTransferStateFactory() appends to doc.body while aspnetcore-engine only checks in doc.head for scripts.

Also maybe a possible race condition using BEFORE_APP_SERIALIZED since ServerTransferStateModule.serializeTransferStateFactory() and aspnetcore-engine's extracting of scripts uses BEFORE_APP_SERIALIZED and to get the state scipt aspnetcore-engine's needs to trigger after ServerTransferStateModule.serializeTransferStateFactory()

If a version of renderModuleFactory could return a Domino document that would make aspnetcore-engine not need to use BEFORE_APP_SERIALIZED.

I tested that state transfer works in template:
https://github.com/MarkPieszak/aspnetcore-angular2-universal/tree/angular-5.0-WIP (updated to angular 5.1.3)
using a modified version of aspnetcore-engine:
https://github.com/devel112/universal/commit/d877214825bd3f564c4ff49f775795b70d45d96a

[stephenlautier]

@devel112 I'm trying also to get this working, and pretty much almost came to you're the conclusion as well. One thing I noticed is that when registering ServerTransferStateModule the universal BEFORE_APP_SERIALIZED doesnt get registered, hence thats why it doesnt work

I still dont get exactly why when registering the ServerTransferStateModule the other doesnt work. If I register another multi: true BEFORE_APP_SERIALIZED, along with the universal internal (which both are in the extraProviders they work.

If a version of renderModuleFactory could return a Domino document that would make aspnetcore-engine not need to use BEFORE_APP_SERIALIZED.

Ideally in my opinion, instead of just the HTML it should return the moduleRef, so you can use the injector from outside

[KhalipskiSiarhei]

@stephenlautier, @devel112 Is the mentioned above modified aspnetcore-engine fixed the issue or not?

[stephenlautier]

I haven't tried exactly the mentioned solution, but more or less it should work. Ideally, for the .net we return the state as an object instead of embedding it as script and add it to the globals

[devel112]

@MarkPieszak Proposal: Change strategy from mangling AngularCompiler output to aspnet supplying an index.html file/code that AngularCompiler weaves the app into?

[devel112]

Fixed in #889

[CaerusKaru]

Please keep in mind that this won't actually be resolved until the new packages have been published, which should be imminent.

[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.

_{_This action has been performed automatically by a bot._}