Compatibility with Angular 5

[DenisLaboureyras]

Hello,

Thanks for your awesome plugin, I've used it for 3 months now and it works like a charm.
I've tried today to upgrade my app to Angular 5, I managed to do it on my client config, but the server build is throwing me a lot of errors (see below).
Am I doing something wrong or do you plan on upgrading your module to Angular 5 ?

Kind regards,
Denis

ERROR in ./node_modules/angular-ssr/build/application/compiler/ngc/create.js
Module not found: Error: Can't resolve '@angular/compiler-cli/src/path_mapped_compiler_host' in '/home/data/app/node_modules/angular-ssr/build/application/compiler/ngc'
@ ./node_modules/angular-ssr/build/application/compiler/ngc/create.js 4:34-96
@ ./node_modules/angular-ssr/build/application/compiler/ngc/compiler.js
@ ./node_modules/angular-ssr/build/application/compiler/factory.js
@ ./node_modules/angular-ssr/build/application/compiler/index.js
@ ./node_modules/angular-ssr/build/application/index.js
@ ./node_modules/angular-ssr/build/index.js
@ ./src/angular/main.server.ts
@ ./src/angular/main.server-ssr.ts

ERROR in ./node_modules/angular-ssr/node_modules/@angular/cli/models/webpack-configs/production.js
Module not found: Error: Can't resolve '@angular/service-worker/build/webpack' in '/home/data/app/node_modules/angular-ssr/node_modules/@angular/cli/models/webpack-configs'
@ ./node_modules/angular-ssr/node_modules/@angular/cli/models/webpack-configs/production.js 74:43-91
@ ./node_modules/angular-ssr/node_modules/@angular/cli/models/webpack-configs/index.js
@ ./node_modules/angular-ssr/node_modules/@angular/cli/models/webpack-config.js
@ ./node_modules/angular-ssr/build/application/compiler/webpack/config/cli.js
@ ./node_modules/angular-ssr/build/application/compiler/webpack/config/index.js
@ ./node_modules/angular-ssr/build/application/compiler/factory.js
@ ./node_modules/angular-ssr/build/application/compiler/index.js
@ ./node_modules/angular-ssr/build/application/index.js
@ ./node_modules/angular-ssr/build/index.js
@ ./src/angular/main.server.ts
@ ./src/angular/main.server-ssr.ts

ERROR in [at-loader] ./node_modules/angular-ssr/build/application/compiler/ngc/resource-resolver.d.ts:1:10
TS2305: Module '"/home/data/app/node_modules/@angular/compiler-cli/index"' has no exported member 'ModuleResolutionHostAdapter'.

ERROR in [at-loader] ./node_modules/angular-ssr/build/platform/document/tokens.d.ts:1:10
TS2305: Module '"/home/data/app/node_modules/@angular/core/core"' has no exported member 'OpaqueToken'.

ERROR in [at-loader] ./node_modules/angular-ssr/build/platform/module/tokens.d.ts:1:10
TS2305: Module '"/home/data/app/node_modules/@angular/core/core"' has no exported member 'OpaqueToken'.

ERROR in [at-loader] ./node_modules/angular-ssr/build/platform/platform.d.ts:2:22
TS2420: Class 'ServerPlatform' incorrectly implements interface 'PlatformRef'.
Property '_injector' is missing in type 'ServerPlatform'.

[lpmusicon]

Hey,
I'm getting different error on ng5 using static rendering:
`/mnt/c/Users/user/Documents/GitHub-Projects/myproject/node_modules/angular-ssr/build/platform/document/tokens.js:3
exports.TemplateDocument = new core_1.OpaqueToken('TemplateDocument');
^

TypeError: core_1.OpaqueToken is not a constructor
at Object. (/mnt/c/Users/user/Documents/GitHub-Projects/myproject/node_modules/angular-ssr/build/platform/document/tokens.js:3:28)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at Object. (/mnt/c/Users/user/Documents/GitHub-Projects/myproject/node_modules/angular-ssr/build/platform/document/container.js:3:16)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)`

After some reading, I think this is due to deprecation of OpaqueToken in Angular5

[anvial]

I've the same problem, is there any solution of this issue?

[lpmusicon]

@anvial If your app really depends on this SSR package I'd consider staying on ng4. However, if you can use dynamic prerendering in node you should definitely check out angular/universal package

[DenisLaboureyras]

I've finally gave up this package in favor of angular/universal, the result is great. I think they solved a lot of problems with angular 5 and universal. For example they add a server side DOM with Domino, which is quite useful, also transfer state between servers and browsers...

But it took me 2 days to do it, I had to solve a lots of stuff to make it work properly.

[seanmavley]

@DenisLaboureyras Great. You have any write-up about your steps?

[lpmusicon]

@seanmavley Are You looking for static or dynamic prerendering?

[DenisLaboureyras]

@seanmavley I don't have write-up on the subject but I will give you some advices :)

First, the best starter I found is this one:
https://github.com/Angular-RU/angular-universal-starter
the comments are in russian so it's kind of hard on what's going on but the code in this starter is really great.

Then the first big issue I encountered is that I couldn't make my app work with a full build done with webpack. The reason is that you need the factories to launch the server and as far as I know you can't produce them with webpack. So I had to configure a part of the build with angular-cli :/

I had to restructure my code a little, with a "core" module with main features of the app, and 1 browser and 1 server module for specific stuffs. The starter mentioned above has a great structure.

I manage after that to build my code, but ran into different issues. First I had a very specific problem with an infinite loop because in the server render the app was not stabilizing (because of setTimeout in my code...)
The other problems were mostly about DOM, you can resolve them by disabling some modules in server mode, or you can use domino to simulate some variables such as document or window.
This file was really useful, they add some global variables with domino:
https://github.com/Angular-RU/angular-universal-starter/blob/master/server.ts

And finally the magic works :)

After that, I've begun to add server state transfer, preboot, shared cache, ...

Hope it helps.

[monoflash]

There, in plain Russian, it's written: "The official example on the english language: https://github.com/angular/universal-starter"

Who does not know Russian, welcome: https://github.com/angular/universal-starter