Add SSR

[manekinekko]

We should be able to take advantage of the Angular SSR. See docs here.

[tinesoft]

I can take care of this one, if nobody already on it...

[thanhpd]

I'm working on this as well, but there's a problem with api-ai-javascript package. Current JS files in that package are using ES6 syntax (e.g: export * from "./es6/ApiAiClient";) so there will be an error when start Node server

C:\Users\thanh\Source\Repos\angular-search-experience\node_modules\api-ai-javascript\index.js:1
(function (exports, require, module, __filename, __dirname) { export * from "./es6/ApiAiClient";
                                                              ^^^^^^

SyntaxError: Unexpected token export
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.api-ai-javascript/index.js (C:\Users\thanh\Source\Repos\angular-search-experience\dist\angular-search-experience-server\main.js:3117:18)

To solve this we may need to eject webpack config from Angular CLI and applying babel, but I don't think that's a good idea only for an easter egg feature.

[manekinekko]

Thanks @thanhpd for investigating this. You're right, ejecting from the CLI isn't the way to go. We could rather mock out these dependencies when building the SSR. We only care about angular template serialization, no need to run the actual Dialogflow SDK, server side.

[thanhpd]

Update: I overcame this by using babel-cli to transpile node_modules/api-ai-javascript first as a script. I did think about mocking the dependency but IMO using babel presents the minimum change so I went with that option. Please share your thought about this solution as I don't have much experience with SSR. Also, there's an error related to window object with algoliasearch package afterward:

ERROR { Error: Uncaught (in promise): ReferenceError: window is not defined
ReferenceError: window is not defined
    at new AlgoliaService (C:\Users\thanh\Source\Repos\angular-search-experience\dist\angular-search-experience-server\main.js:1001:23)

I believe that the 3rd party libraries should be responsible for SSR compatibility (This is actually this library code). I can work around this limitation in the meantime, so stay tuned.

[manekinekko]

@thanhpd can you push your code to your repo so I can check it out?

[thanhpd]

@manekinekko Here it is: https://github.com/thanhpd/angular-search-experience/tree/ssr It's pretty much still a mess. There are multiple ways to implement SSR (the Angular team is migrating from Webpack to tsconfig solution for server compilation) so there are some leftover dependencies/files I haven't clean up yet.

[manekinekko]

@thanhpd yeah! you shouldn't be messing with webpack config anymore. We've implemented a builder into the CLI (@angular-devkit/build-angular:server) you should be using that instead. Here are some resources:

1. https://github.com/angular/universal-starter
2. my wip/ssr branch: https://github.com/sfeir-open-source/angular-search-experience/commit/470294a6b36d55025c297b4bbd9fed02979de990

[tinesoft]

Ok, i'm stepping down, as it seems you guys have this well under control. 😄 Let me know if i can help otherwise.

Cheers!

[manekinekko]

@tinesoft wanna help out with this one https://github.com/sfeir-open-source/angular-search-experience/issues/11 ?

[thanhpd]

Update: I'm trying to add Firebase functions for SSR feature but it seems api-ai-javascript strikes back again

!  functions[ssrApp(us-central1)]: Deployment error.
Function load error: Code in file index.js can't be loaded.
Is there a syntax error in your code?
Detailed stack trace: /user_code/node_modules/api-ai-javascript/index.js:1
(function (exports, require, module, __filename, __dirname) { export * from "./es6/ApiAiClient";
                                                              ^^^^^^

SyntaxError: Unexpected token export
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:549:28)
    at Object.Module._extensions..js (module.js:586:10)
    at Module.load (module.js:494:32)
    at tryModuleLoad (module.js:453:12)
    at Function.Module._load (module.js:445:3)
    at Module.require (module.js:504:17)
    at require (internal/module.js:20:19)
    at Object.api-ai-javascript/index.js (/user_code/dist-server/main.js:3299:18)

Functions deploy had errors. To continue deploying other features (such as database), run:
    firebase deploy --except functions

Error: Functions did not deploy properly.

AFAIK there's no way to access node_modules on Firebase, so the babel option which is working for a normal server will not work on Firebase Functions. I'm trying other solutions for this, prerendering seems like a good option as the initial loading page does not change over time.