Carousel Unexpected Import with Angular Universal

[jezguitarist30]

Below is the error I get when I run my server.js, everything works well when I removed my component that uses Carousel.

D:\Development\DemoProjects\angularph-universal-app\node_modules\ngx-bootstrap\carousel\slide.component.js:1
(function (exports, require, module, __filename, __dirname) { import { Component, HostBinding, Input } 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.mK+S (D:\Development\DemoProjects\angularph-universal-app\dist\server\main.ac013103ccc455daa776.bundle.js:1:132178)
PS D:\Development\DemoProjects\angularph-universal-app>

[IlyaSurmay]

Could you create a minimal reproduction of this? Sample repo would be enough.
Also want to ask, which version of ngx-bootstrap are you using? universal support was added in 2.0.0-beta.7

[jezguitarist30]

Hi, I have a repo that you can check
https://github.com/jezguitarist30/AngularPH-Universal-Application.git

the Dev Branch is the updated one.

[IlyaSurmay]

Have you added all necessary files like server.ts? because your repo only has a command to build browser and server versions of app (btw they're both build fine)

[jezguitarist30]

I made a separate repo for the build one
https://github.com/jezguitarist30/AngularPH-Universal-Application-Build

[jezguitarist30]

you can see there the server.js and package.json, it is currently working because I temporarily removed the Banner carousel.

[jezguitarist30]

Hi @IlyaSurmay hope you can help me make it work.. I added a new branch "build" where the dist folder with the bundle files, server.js and package.json is available

https://github.com/jezguitarist30/AngularPH-Universal-Application/tree/build

[valorkin]

@jezguitarist30 issue is kinda simple, node.js doesn't support es6 import syntax
so your code (and code imported from ngx-bs) should be compiled with ts before running on node
working sample here: https://github.com/valor-software/ngx-bootstrap/tree/development/scripts/universal

[jezguitarist30]

OH! I see, thanks for the explanation I wouldn't be able to figure this out myself.

[denizcoskun]

@valorkin hi, Thanks for the info. Could you explain a bit more how to compile node_modules in es5? I couldn't find a way to do that?

[jezguitarist30]

@denizcoskun you can check https://github.com/angular/angular-cli/wiki/stories-universal-rendering for a complete guide on how to do that, I just followed all the steps here and mine is now working.

[denizcoskun]

@jezguitarist30 thanks!