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

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.

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

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