Error on server side rendering

[manzonif]

[ *] Bug
[ ] Build issue
[ ] Feature request

Version info

Angular: 8.2.14
Angular CLI: 8.3.23
ngx-countup: "^7.3.0"

Description

On server side, when I try to render or prerender a page that include CountUpModule, I got this error:

exec error node dist/prerender: Error: Command failed: node dist/prerender
D:\angular\node_modules\countup.js\dist\countUp.min.js:1
var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var i,a=1,s=arguments.length;a<s;a++)for(var n in i=arguments[a])Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n]);return t}).apply(this,arguments)},CountUp=function(){function t(t,i,a){var s=this;this.target=t,this.endVal=i,this.options=a,this.version="2.0.4",this.defaults={startVal:0,decimalPlaces:0,duration:2,useEasing:!0,useGrouping:!0,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:""},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.count=function(t){s.startTime||(s.startTime=t);var i=t-s.startTime;s.remaining=s.duration-i,s.useEasing?s.countDown?s.frameVal=s.startVal-s.easingFn(i,0,s.startVal-s.endVal,s.duration):s.frameVal=s.easingFn(i,s.startVal,s.endVal-s.startVal,s.duration):s.countDown?s.frameVal=s.startVal-(s.startVal-s.endV

SyntaxError: Unexpected token 'export'
at Module._compile (internal/modules/cjs/loader.js:891:18)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Module.require (internal/modules/cjs/loader.js:848:19)
at require (internal/modules/cjs/helpers.js:74:18)
at D:\angular\node_modules\ngx-countup\bundles\ngx-countup.umd.js:2:111
at Object. (D:\angular\node_modules\ngx-countup\bundles\ngx-countup.umd.js:5:2)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)

[inorganik]

In #33 someone had the same error. Did you include countUp in scripts? You should just include CountUpModule as described in the README.

If that's not the case please provide more info about how you're including this in your project

[manzonif]

The issue is due to tsc compilation; no problem with webpack.
To reproduce the issue, I forked this angular universal starter, added Countup Module and configured a tsc compilation for the ts server express file.
npm run ssr-tsc

[inorganik]

any way you could post a zipped file of the repo somewhere (minus node modules) so I could take a look at it?

[manzonif]

Why not:
git clone https://github.com/manzonif/angular-universal-starter.git ?

[inorganik]

I've spent a fair amount of time just trying to get the scripts to run on this repo and still haven't seen the countUp error. File paths in server.ts and prerender.ts were messed up and even after fixing those there are still more script errors.

[inorganik]

Ok, I wanted to make sure that this component was compatible with SSR so I created a repo that demos it - https://github.com/inorganik/ngx-countup-with-ssr

It uses ngx-countup in an Angular 8 project with SSR and prerendering. It builds and serves with no errors. Hope this helps.

[manzonif]

I'm sorry for wasting your time, but, as I said, the problem is related to tsc compilation, not webpack:
"tsc -p server.tsconfig.json"

So the correct command was:
npm run ssr-tsc
and not:
npm run ssr
However, it doesn't matter. Thanks for your help.

[inorganik]

No it's ok... I was hitting errors with that command too, but I didn't see the countUp error.

When I run that in your repo I get

> universal-demo@7.0.0 generate:prerender /Users/jamieperkins/Web-projects/GitHub/manzonif-angular-ssr
> node dist-server-express/prerender.js

Error: Cannot find module './dist-server/main.0c90f278407064dcd9f8'

Even though I see the file is there...

The fact that I am able to compile my typescript server code on my ssr demo repo makes me think it is not an issue with ngx-countUp.

Perhaps instead of using that starter project, you could use my ssr demo repo, since it works...

[inorganik]

Ok, so in the above mentioned project demonstrating using this package with SSR and prerendering, I am still not getting any errors, but in a separate project, I started to get the "Syntax error: unexpected token export" error and it is undeniably caused by es6 modules. I tried to make sure all the settings matched in the webpack.config file, tsconfig, etc. but the error still persisted on my other project.

And since I don't know how to reliably configure an angular project with SSR to not get this error when using es6 modules, I changed ngx-countUp to use a UMD packaged version of CountUp.

So now, from version 7.3.2 on, you should not receive this error.

[EliezerB123]

Because the fix for this bug was reverted in 7.3.2, doesn't that mean this bug is still open?

I'm concerned because I plan to use this code on a project that will someday use Angular Universal.