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

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:

Start a fresh @ionic/angular 4.beta.0 project
Follow angular-cli story on adding server side rendering to an Angular project
Build the @ionic/angular project with ssr suport
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: https://github.com/ionic-team/ionic/issues/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.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 25
Comments: 55 (9 by maintainers)

Most upvoted comments

Stencil 1.0.0 addresses this directly and will allow Ionic components to be SSR’d. We do not have a specific date yet but this is a top priority and actively being worked on.

+25

adamdbradley on May 15, 2019

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.

+18

confused-pv on Oct 15, 2018

Just to update everyone here, we’ve been slowly making progress here. It’s involved a lot of moving parts (on angular and Ionic) to make this possible, so I appreciate everyone being patient with this.

https://twitter.com/mhartington/status/1160941457131356164

We will have more updates (probably a blog too?) to go over SSR soon.

+16

mhartington on Aug 12, 2019

Hey all! We are indeed making progress with this and have been testing things out. We’ll be hopefully shipping this soon

+15

mhartington on Jun 30, 2019

Is there any update?

+11

Twois on Apr 19, 2019

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

+10

agustinhaller on Nov 22, 2018

@mhartington same question 😕

RihabRJAB on Aug 8, 2019

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.

mhartington on Dec 7, 2018

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

abennouna on Sep 18, 2018

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

zwacky on Sep 17, 2018

@mhartington Is ssr available?

UTSOURCE on Aug 8, 2019

I think Adam is working on it, close to see something pushed: https://twitter.com/adamdbradley/status/1099418644637982722

javebratt on Feb 25, 2019

When I implement SSR I an error below

TypeError: Cannot read property 'documentElement' of undefined

Is there any progress on this?

gineign on Mar 21, 2019

@Ashok-raj-1994 Naah had to change the application architecture to Angular only but pretty sure they’ll have a solution soon

GeoffMahugu on Sep 18, 2019

@salmoro various remarks by Adam Bradley on twitter and github

berchik on Jun 30, 2019

Is there any progress on this? I’ve tried several different hacks to get this to work - all of which result in the need for more hacks, and more, and more. This is a gaping hole in the Ionic Framework and is undoubtedly harming uptake. I’ve built a large app with Ionic and now realise I can’t do SSR (with Angular Universal). Would really appreciate any news, or other solutions from those in a similar situation.

jaipresto on Feb 25, 2019

@berchik I created a new empty project, and then still can’t, I get an error. const win = window; ReferenceError: window is not defined

UTSOURCE on Jul 26, 2019