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

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

[agustinhaller]

@mhartington would love to contribute. I'm pretty busy right now, but as soon as I become available will definitely get on this.

[GeoffMahugu]

Have tried adding both @nguniversal and @ng-toolkit/universal and both cases come up with this error TypeError: t.matchMedia is not a function among other errors. Please let us know of any updates or progress in server side rendering ionic4

[jaipresto]

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.

[javebratt]

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

[gineign]

When I implement SSR I an error below

TypeError: Cannot read property 'documentElement' of undefined

Is there any progress on this?

[Twois]

Is there any update?

[adamdbradley]

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.

[BluebambooSRL]

Many thanks @adamdbradley for the update. I wonder to know if I compile an IONIC+Angular project with IONIC-cli v5. I would have the same performance than using and compiling under Stencil.

[UTSOURCE]

Next release of @Ionicframework will use @stenciljs one: https://github.com/ionic-team/ionic/commit/b40f7d36d5802251a0b44a7dd2599f19dbe977d5 … Smaller/faster components, and using Constructible Stylesheets 💎

[IgneButene]

Thanks for the update @UTSOURCE, I am really looking forward to this, to improve the SEO of my PWA. :) Also for things like sharing Ionic pages on social media, so it could load the images from the page.

[salmoro]

I am running on the recent "@ionic/angular": "^4.6.0" (stencil one) and still ngUniversal has errors due to some references to window:

var NAMESPACE = 'ionic';
var win = window;

[berchik]

@salmoro You might need to wait until Ionic 4.7.0

[salmoro]

@berchik What makes you think it'll be fixed in 4.7.0?

[berchik]

@salmoro various remarks by Adam Bradley on twitter and github

[mhartington]

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

[royanon]

can't wait ;)

[UTSOURCE]

can't wait ;)

[BluebambooSRL]

@mhartington nice!

[stephane-segning]

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

Really nice ! Waiting it for production ready app 😃

[clabnet]

Me too, same issue.

[samuelfaj]

Waiting for it :D

[lwouis]

Angular 8 support was announced yesterday. Any ETA for SSR support in ionic? :)

[UTSOURCE]

The latest version seems to support ssr

[lwouis]

The latest version seems to support ssr

Could you please describe what steps you took to integrate SSR into your Ionic app?

[UTSOURCE]

The latest version seems to support ssr

Could you please describe what steps you took to integrate SSR into your Ionic app?

https://angular.io/guide/universal

[limes]

The latest version seems to support ssr

I don't think so. After installing the latest version and the command

npm run build:ssr && npm run serve:ssr

it's showing up

dist/server/main.js:143275 const win = window; ReferenceError: window is not defined

[UTSOURCE]

The latest version seems to support ssr

I don't think so. After installing the latest version and the command

npm run build:ssr && npm run serve:ssr

it's showing up

dist/server/main.js:143275 const win = window; ReferenceError: window is not defined

I also found this problem when I tested it, or wait for the official reply.

[berchik]

@UTSOURCE server-side applications can't reference browser-only global objects like window & document. You have to managed that in your code.

[UTSOURCE]

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

[berchik]

@UTSOURCE then it must be coming from one of the packages of ionic/webpack, we need to wait for someone from the Ionic team to reply.

[royanon]

I am not sure if that's related, but for some of my project using pure angular. If there is something use window object, I need to make a fake object by using domino library in order to make ssr work. const template = readFileSync(join(DIST_FOLDER, PROJECT_NAME, 'index.html')).toString(); const win = domino.createWindow(template);

Let's wait for an official answer.

[royanon]

Try for a few hours, even window is mock, it still give error of const win = window; ReferenceError: window is not defined, did try with a blank ionic project. Seems something is loading window object with no checking on isPlatformBrowser. Anyone know how to use hydrate with IonicServerModule ?

[UTSOURCE]

@mhartington Is ssr available?

[RihabRJAB]

@mhartington same question :/

[JustasKuizinas]

SSR still doesnt work with ionic, I get ReferenceError: window is not defined

[UTSOURCE]

@jaapjanfrans Yes, it can't be used, but I see that ionic has submitted code about ssr.

[fpcuriosity]

Really looking forward to this. Are there any news?

[mhartington]

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.

[fpcuriosity]

Hi! Any news on this? Thanks for your work!

[UTSOURCE]

A little can't wait

[royanon]

Well... I think we are making progress.

[carolinetanxin]

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.

cannot wait any more! Any news about this?

[ashok-raj-3]

Have tried adding both @nguniversal and @ng-toolkit/universal and both cases come up with this error TypeError: t.matchMedia is not a function among other errors. Please let us know of any updates or progress in server side rendering ionic4

@GeoffMahugu .Have you solved this error ?