Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
agustinhaller opened this issue Aug 4, 2018 · 54 comments
Open

Comments

@agustinhaller
Copy link

@agustinhaller agustinhaller commented Aug 4, 2018

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:

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.

@ionitron-bot ionitron-bot bot added the triage label Aug 4, 2018
@mhartington

This comment has been minimized.

Copy link
Member

@mhartington mhartington commented Aug 6, 2018

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

@adamdbradley adamdbradley self-assigned this Aug 6, 2018
@ionitron-bot ionitron-bot bot removed the triage label Aug 6, 2018
@adamdbradley adamdbradley added this to Backlog 🤖 in Ionic Core via automation Aug 6, 2018
@adamdbradley adamdbradley moved this from Backlog 🤖 to On deck ⚾️ in Ionic Core Aug 6, 2018
@adamdbradley adamdbradley moved this from On deck ⚾️ to In progress 🤺 in Ionic Core Aug 6, 2018
@agustinhaller

This comment has been minimized.

Copy link
Author

@agustinhaller agustinhaller commented Sep 17, 2018

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

@zwacky

This comment has been minimized.

Copy link
Contributor

@zwacky zwacky commented Sep 17, 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.

@abennouna

This comment has been minimized.

Copy link
Contributor

@abennouna abennouna commented Sep 18, 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

@confused-pv

This comment has been minimized.

Copy link

@confused-pv confused-pv commented Oct 15, 2018

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.

@adamdbradley adamdbradley moved this from In progress 🤺 to Backlog 🤖 in Ionic Core Oct 30, 2018
@agustinhaller

This comment has been minimized.

Copy link
Author

@agustinhaller agustinhaller commented Nov 22, 2018

@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

This comment has been minimized.

Copy link
Member

@mhartington mhartington commented Dec 7, 2018

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

This comment has been minimized.

Copy link
Author

@agustinhaller agustinhaller commented Dec 7, 2018

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

@GeoffMahugu

This comment has been minimized.

Copy link

@GeoffMahugu GeoffMahugu commented Feb 19, 2019

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

This comment has been minimized.

Copy link

@jaipresto jaipresto commented Feb 25, 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.

@javebratt

This comment has been minimized.

Copy link

@javebratt javebratt commented Feb 25, 2019

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

@gineign

This comment has been minimized.

Copy link

@gineign gineign commented Mar 21, 2019

When I implement SSR I an error below

TypeError: Cannot read property 'documentElement' of undefined

Is there any progress on this?

@Twois

This comment has been minimized.

Copy link

@Twois Twois commented Apr 19, 2019

Is there any update?

@adamdbradley

This comment has been minimized.

Copy link
Member

@adamdbradley adamdbradley commented May 15, 2019

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.

@liamdebeasi liamdebeasi added this to Backlog 👀 in Ionic Angular via automation May 29, 2019
@clabnet

This comment has been minimized.

Copy link

@clabnet clabnet commented Jul 15, 2019

Me too, same issue.

@samuelfaj

This comment has been minimized.

Copy link

@samuelfaj samuelfaj commented Jul 22, 2019

Waiting for it :D

@lwouis

This comment has been minimized.

Copy link

@lwouis lwouis commented Jul 26, 2019

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

@UTSOURCE

This comment has been minimized.

Copy link

@UTSOURCE UTSOURCE commented Jul 26, 2019

The latest version seems to support ssr

@lwouis

This comment has been minimized.

Copy link

@lwouis lwouis commented Jul 26, 2019

The latest version seems to support ssr

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

@UTSOURCE

This comment has been minimized.

Copy link

@UTSOURCE UTSOURCE commented Jul 26, 2019

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

This comment has been minimized.

Copy link

@limes limes commented Jul 26, 2019

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

This comment has been minimized.

Copy link

@UTSOURCE UTSOURCE commented Jul 26, 2019

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

This comment has been minimized.

Copy link

@berchik berchik commented Jul 26, 2019

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

@UTSOURCE

This comment has been minimized.

Copy link

@UTSOURCE UTSOURCE commented Jul 26, 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

@berchik

This comment has been minimized.

Copy link

@berchik berchik commented Jul 26, 2019

@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

This comment has been minimized.

Copy link

@royanon royanon commented Jul 27, 2019

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

This comment has been minimized.

Copy link

@royanon royanon commented Jul 27, 2019

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

This comment has been minimized.

Copy link

@UTSOURCE UTSOURCE commented Aug 8, 2019

@mhartington Is ssr available?

@RihabRJAB

This comment has been minimized.

Copy link

@RihabRJAB RihabRJAB commented Aug 8, 2019

@mhartington same question :/

@JustasKuizinas

This comment has been minimized.

Copy link

@JustasKuizinas JustasKuizinas commented Aug 12, 2019

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

@UTSOURCE

This comment has been minimized.

Copy link

@UTSOURCE UTSOURCE commented Aug 12, 2019

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

@fpcuriosity

This comment has been minimized.

Copy link

@fpcuriosity fpcuriosity commented Aug 12, 2019

Really looking forward to this. Are there any news?

@mhartington

This comment has been minimized.

Copy link
Member

@mhartington mhartington commented Aug 12, 2019

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

This comment has been minimized.

Copy link

@fpcuriosity fpcuriosity commented Aug 27, 2019

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

@UTSOURCE

This comment has been minimized.

Copy link

@UTSOURCE UTSOURCE commented Aug 27, 2019

A little can't wait

@royanon

This comment has been minimized.

Copy link

@royanon royanon commented Sep 1, 2019

Well... I think we are making progress.

@carolinetanxin

This comment has been minimized.

Copy link

@carolinetanxin carolinetanxin commented Sep 2, 2019

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-1994

This comment has been minimized.

Copy link

@Ashok-raj-1994 Ashok-raj-1994 commented Sep 18, 2019

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 ?

@GeoffMahugu

This comment has been minimized.

Copy link

@GeoffMahugu GeoffMahugu commented Sep 18, 2019

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

@UTSOURCE

This comment has been minimized.

Copy link

@UTSOURCE UTSOURCE commented Sep 25, 2019

@GeoffMahugu I guess the official temporarily stopped the development of this piece. My basis is that the official ssr-related code has not been updated for 2 months, and the ssr branch project has been deleted.

@JustasKuizinas

This comment has been minimized.

Copy link

@JustasKuizinas JustasKuizinas commented Sep 25, 2019

Can we get any official response about the state of SSR?

@mhartington

This comment has been minimized.

Copy link
Member

@mhartington mhartington commented Sep 25, 2019

#15041 (comment)

I gave folks an update here. There's a lot involved with SSR and making sure things work as expected. We will provide more information when we have something to talk about.

@ionic-team ionic-team locked and limited conversation to collaborators Sep 25, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
Ionic Core
  
Backlog 🤖
Ionic Angular
  
Backlog 👀
You can’t perform that action at this time.