feat(engine): update engine & add transfer mechanism

[MarkPieszak]

• Major bug fixes
• Update engine (publishing to Npm soon, will be removed from project shortly)
  • Engine will be at @ng-universal/aspnetcore-engine soon.
  • Engine now auto compiles JIT to AoT, only does AoT rendering, if JIT is provided it will compile it and try to save it in a cache to be reused in later cycles. For Prod it will already have everything AoT compiled so it will skip that step automatically.
  • Engine also features a createTransferScript that will create the window TRANSFER_STATE that will automatically get pulled down and reused.
  • Only use HttpTransfer for GETs that are CRUCIAL during a pageload, ones you don't want "flickering" and being re-ran on the Client side.
• Added HttpTransfer mechanism
• Added REQUEST injectionToken (soon will be part of engine)

Fixes #170 #169 #158

[borgotecnologia]

Hello Mr Pieszak
I do not know what I'm doing wrong, but I cannot provide a value in Browser coming from the server.
In your example 'Request', it doesn't have the values coming from the server only document.cookie. How could I try to pass data from the server and provide in browser? I do not have the window.TRANSFER_CACHE in the BrowserAppModule yet or I need other solution to this ?.

[MarkPieszak]

The browser only will see REQUEST, do you mean you want the RESPONSES object? I should probably add that in there as well. As for Request, the browser side wouldn't see anything as its server only.

You can just add it in the customData as you see in the HomeController, then pass it through the transferData object added onto global in main.server.

[borgotecnologia]

I just clone your git and made my exemple.

Please find for bacon.

We have the controller with customData, mainServer with provider and I can access this value in server-app, but in mainBrowser I can't access this data to provide it. How can I access in browser-app.

What I need to do?

Desktop.zip
Desktop.zip

[borgotecnologia]

I just clone your git and made my exemple. Please find for bacon. We have the controller with customData, mainServer with provider and I can access this value in server-app, but in mainBrowser I can't access this data to provide it. How can I access in browser-app. What I need to do? ​ bacon.zip <https://drive.google.com/a/borgotecnologia.com.br/file/d/0Bz6XSPtmKPyfR052a0NCT2lsMHM/view?usp=drive_web> ​ Em 17 de abr de 2017 8:14 PM, "Mark Pieszak" <[email protected]> escreveu: The browser only will see REQUEST, do you mean you want the RESPONSES object? I should probably add that in there as well. As for Request, the browser side wouldn't see anything as its server only. You can just add it in the customData as you see in the HomeController, then pass it through the transferData object added onto global in main.server. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#179 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHBuIHzJOObgqAgIPJ6jNWsUp1-aABwzks5rw_I8gaJpZM4M9zMx> .

[MarkPieszak]

Can you upload it to a repo on github so I can take a look at what you mean?

If you passed in the HttpContext Response from the .NET side you just need to provide an InjectionToken the same way REQUEST does, but grab it from the TransferState class and populate the Token. (So you're essentially grabbing it all from the window).

I can try to get an example of the Response in there eventually don't have much time the next few days though.

[borgotecnologia]

Thanks ,
I got to use the transfer. But when trying to use the provider in a service, I received the following message:

No provider for Injection Token BACON.

I tried this:

bacon
export const BACON = new InjectionToken('BACON');

temporary-aspnetcore-engine
-import { BACON } from '../app/shared/constants/bacon';
provide: BACON, useValue: options.request.data.bacon

main.server
{ provide: BACON, useValue: params.data.bacon }

main.server.aot
{ provide: BACON, useValue: params.data.bacon }

browser-app.module
provide: BACON, useFactory: (getBacon)
export function getBacon() {
return { settings: window['TRANSFER_CACHE'].bacon };
}

app.module
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [Http, [ORIGIN_URL],[BACON]]
}
}),

bacon.service
@Injectable()
export class Bacon implements IBacon {
constructor(
@Inject(BACON) private bacon: Object ) {
console.log('here is my delicious bacon', this.bacon)
}

app.module
{ provide: 'IBacon', useClass: Bacon }

There is a bug or I'm doing something wrong?

[chrisjmccrum]

@MarkPieszak adding custom data seems fairly tedious at the moment. I'm trying to follow the breadcrumb trail but I'm having the same issues as @borgotecnologia "No provider for InjectionToken". Is there anyway you can add a section to the readme that show's a sample of adding new custom data starting from the controller all the way down the chain? Maybe just a list of each file name and an example of what was altered/added ?

[MarkPieszak]

Hey @chrisjmccrum sure that's a great idea. There's a lot of improvements we could add in the future, without a doubt!

As a thought, and I'm wondering what you guys think, but maybe it'd be a good idea to automatically (let the engine) populate the transferData for you from anything you pass in from .NET.

Cliffnotes for the transfer data: (I'll clean this up and add it to the README soon as well)

It depends on which workflow you're trying to do, but there are several ways to pass things around, depending on which direction or where you're coming from.

HomeController has Data that's being passed into it as well (right now, by default it's required that you pass in the HttpContext Request and other things), you could also just add things directly from .NET here as well, just add them to the class.

You can see this very first part happening here: HomeController

After that, the data gets passed into main.server.ts file (and it's AoT sister). This is the file that's invoked within a Node process, as this is where we're serializing the application to a String.

You can see the additional data added to response.globals.transferData here: main.server.ts

Now, we come back full circle to the HomeController, as Prerenderer.RenderToString() has finished: HomeController set ViewData for TransferData

So we just went, .NET -> Node (serialize the app) -> .NET

Now we run through the Razor views, and we set our ViewData["TransferData"] at the bottom of our _layout, and all of your items are located on the window object under TRANSFER_CACHE.

return `<script>window['TRANSFER_CACHE'] = ${JSON.stringify(transferData)};</script>`;

I'll fix up the readme a bit more, I think someone was saying it should be TRANSFER_STATE, but I'll get back to you on that!

Hope that at least helps so it makes a little more sense for now! Let me know.

[chrisjmccrum]

I think the automation would be a great addition. We could just add as many custom properties to that model as needed but you handle the "auto-magic plumbing" into angular. I'll try to pick through your comment and see if it makes more sense - if not, i'll wait for the dumbed down readme updates lol. Thanks again for your hard work on this!