Angular-cli: Universal server bundle is not working properly

[kumaresan-subramani]

Bug Report or Feature Request (mark with an x)

- [ x] bug report -> please search issues before submitting
- [ ] feature request

Versions

@angular/cli: 6.26.0
node: 8.11.3

Repro steps

Follow these steps here:

https://github.com/angular/angular-cli/wiki/stories-universal-rendering

Add Our control to the app.

Build a server bundle.

Test it and you will see the error below.

The log given by the failure

/ng-boilerplate/node_modules/@ngx-translate/core/src/translate.store.js:1
(function (exports, require, module, __filename, __dirname) { import { EventEmitter } from "@angular/core";
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.17 (/ng-boilerplate/dist-server/main.75d7fa7aeab5f9b24f61.bundle.js:1:6560)
at e (/ng-boilerplate/dist-server/main.75d7fa7aeab5f9b24f61.bundle.js:1:149)
at Object.2cGb (/chrillewoodz/ng-boilerplate/dist-server/main.75d7fa7aeab5f9b24f61.bundle.js:1:7952)
at e (/ng-boilerplate/dist-server/main.75d7fa7aeab5f9b24f61.bundle.js:1:149)
at Object.Zq8w (/ng-boilerplate/dist-server/main.75d7fa7aeab5f9b24f61.bundle.js:1:28947)
at e (/ng-boilerplate/dist-server/main.75d7fa7aeab5f9b24f61.bundle.js:1:149)

Desired functionality

Basically the issue here is that node is resolving the wrong module. It's looking inside of the node_modules folder instead of in the vendor file in the server bundle.

Mention any other details that might be useful

[alan-agius4]

Does this happen with the latest version of the CLI? (7.1.2), Also are you using the latest version of @ngx-translate?

Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[kumaresan-subramani]

Hi @alan-agius4 ,

Reproducing steps:

step 1:
clone my repository https://github.com/kumaresan-subramani/angular-universal-sample/tree/master

step 2:
run following commands

npm i

npm run build:ssr

npm run serve:ssr

Finally you will see reported error in console window

[kumaresan-subramani]

Hi,

After running below command,

npm run build:ssr

I will get server-side production build.
if i run that build file using

http-server

command, sample running fine. I suspect that issue occurs because of server.ts

[kumaresan-subramani]

any update on this?

[alan-agius4]

Hi, I'm sorry, but this issue is not caused by Angular CLI. Please contact the author(s) of the @syncfusion project or file an issue on their issue tracker.

It seems that @syncfusion packages are not being bundled properly module and main are not specified in the package.json Ex: https://unpkg.com/@syncfusion/ej2[email protected]/package.json. This is causing the ES5 version of the library to be always picked up even when targeting node.

Kindly see the APF specs for more details: https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview#heading=h.k0mh3o8u5hx

[kumaresan-subramani]

HI @alan-agius4 ,

we have updated our angular package structure as of now we have used ng-packagr to generate our third-party angular packages. but now if we set a target as "es2015" tree shaking not working properly

[kumaresan-subramani]

In details,

in angular 8, if i take prod build it build es5 and es2015 packages. in this case "main-es5.js" has ony imported modules which i mean tree shaking is done well but in "main-es2015.js" has all modules no tree shaking

i have added my build screen shot here

Here is my third-party package structure which is packaged using [email protected]
https://unpkg.com/@syncfusion/ej2[email protected]/

[kumaresan-subramani]

Hi @alan-agius4 , any update on this??

i am using ng-packagr version-1.5.0

it didn't create any es2015 files so that reported issue occurs

[kumaresan-subramani]

HI @alan-agius4 ,

Any update on this?

[alan-agius4]

I strongly recommend to update to the latest version of ng-packager. Since version 1 a lot of things have changed and improve.

[kumaresan-subramani]

HI @alan-agius4 ,

Loves your response
inspired me a lot of ways....
Thanks

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}