@ionic/angular 4.beta.0 with Angular Universal (Server Side Rendering) ERRORS

[agustinhaller]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.0.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.0
   @angular-devkit/core       : 0.7.0-rc.1
   @angular-devkit/schematics : 0.7.0-rc.1
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.1
   @ionic/schematics-angular  : 1.0.2

System:

   NodeJS : v8.11.3 (/usr/local/bin/node)
   npm    : 5.6.0
   OS     : OS X El Capitan

Describe the Bug
Ionic 4.beta.0 with Angular Universal (Server Side Rendering) ERRORS

Steps to Reproduce
Steps to reproduce the behavior:

1. Start a fresh @ionic/angular 4.beta.0 project
2. Follow angular-cli story on adding server side rendering to an Angular project
3. Build the @ionic/angular project with ssr suport
4. See errors

Related Code
Right now my tests are tightly coupled with my project's code. I can update this issue with a clean repo if needed.

Expected Behavior
@ionic/angular plays nicely with Angular Universal

Additional Context
Hi I’m opening this issue to expand these recent Twitter threads (thread 1, thread 2) and discuss a bit further the improvements that the @ionic/angular module should have in order to properly support server side rendering ‘the angular way’ with Angular Universal (@nguniversal).
Also expanding discussion about this same topic from issue: #14574

These are the issues I found:

1. The @ionic/angular project structure needs a specific module to wrap all the native related stuff.
The same way Angular recommends having a module specifically for your application when running on the server, I think we need a specific module for all the ionic-native stuff.

Maybe an app.native.module.ts file with the AppNativeModule where we should include all the ionic-native stuff like registering SplashScreen and StatusBar as providers.

2. @ionic/angular not following Angular Universal “gotchas”
When building Universal components in Angular there are a few things to keep in mind.

window, document, navigator, and other browser types - do not exist on the server - so using them, or any library that uses them will not work.

This is the case with the current 4.beta.0 version of @ionic/angular. There are plenty of references to window and document inside @ionic/angular code.
To point out a few:

• ionic/angular/app-initialize.ts
• ionic/angular/router-controller.ts
  In this same file, this line also fails. I don't know if it's because of the await or that you are manipulating the nativeElement directly (instead of using Angular Renderer2).
• ionic/angular/nav-controller.ts

From my perspective I don't see any architectural nor design impediment in @ionic/angular code that could impact in these issues. Following Angular Universal gotchas would do the trick.
Please @mlynch, @mhartington, @manucorporat, @adamdbradley let me know what you think about it and if there's something I'm underestimating about these issues.

[mhartington]

Thanks a lot for the detailed issue report! We'll get this sorted out

[agustinhaller]

@adamdbradley @mhartington
Hi guys, any update on this?

[zwacky]

@adamdbradley posted this some days ago in the Ionic slack:

we’re fixing ssr right now to use puppeteer, which replaces jsdom. A dependency of a dependency of jsdom is what’s causing the issues. So with this transition we’ll have faster prerendering, and what is doing the prerendering is actually chrome, rather than jsdom.

[abennouna]

As a workaround in an 4.0.0-beta.11 app, I used @ng-toolkit/universal as is with some adjustments in the generated server.ts file:

// see https://github.com/angular/universal/issues/830#issuecomment-345228799
import { createWindow } from 'domino';
import { readFileSync } from 'fs';
import { join } from 'path';

const template = readFileSync(
  join('.', 'www', 'browser', 'index.html')
).toString();
const win = createWindow(template);
global['window'] = win;
global['document'] = win.document;
global['navigator'] = win.navigator;

Now the Ionic bootstrap works, and I can see the SSRed code.

I still have many server-side errors due to other browser types / methods notably because of external directives that have the same issues.

Edit: also https://github.com/Angular-RU/angular-universal-starter/blob/master/server.ts

[confused-pv]

Hey Guys,

Any update on this issue. What is the target date for full SSR support. We are waiting for SSR fix to go live with our couple of websites.

[agustinhaller]

@adamdbradley I saw you moved the issue from In progress to Backlog. It would be really nice for the community and people waiting for this feature to expand a little bit what's the current state and what need to be done to finally have SSR support in Ionic 4.

I know the framework is maturing fast and now there are many open fronts (@ionic/react, @ionic/vue not just @ionic/angular anymore) and that leaves some features behind.
But sincerely I believe SSR is paramount for Ionic to position itself as the PWA framework of choice.

[mhartington]

Hey there! Just chiming in to provide an update.

As we're getting closer to RC/final, we're finalizing any major APIs that are required. SSR is still something that we intend to work on supporting, but it there are a few bigger issues that require all of our attention. @agustinhaller I'd gladly accept a PR that improves our SSR story if you make it. Happy to work with you too. Feel free to reach out and I'll lend a hand where I can. mike at ionic dot io.