Angular Universal build prerender error

[kmturley]

• I'm submitting a ...

  • bug report
  • feature request
  • support request

• Do you want to request a feature or report a bug?
  Bug with your library and Angular Universal build prerender functionality

• What is the current behavior?
  When you run the command:
  npm run build:prerender

it runs:
"generate:prerender": "cd dist && node prerender",

Then fails with the error:

(function (exports, require, module, __filename, __dirname) { import { NgModule } from '@angular/core';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:599:28)
    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.ngx-drag-scroll/lib/ngx-drag-scroll.module (example-site/dist/server/main.js:1927:18)

• provide the steps to reproduce

Either use my demo repo:
https://github.com/kmturley/universal-starter

OR

1. Duplicate the Angular Universal starter project from:
   https://github.com/angular/universal-starter

2. Add your library, following install instructions:
   https://github.com/bfwg/ngx-drag-scroll

3. Run the Angular build command to see the error:
   npm run build:prerender

• What is the expected behavior?
  No error, and to continue building.

• What is the motivation / use case for changing the behavior?
  Otherwise your plugin cannot be used with Angular Universal, which means no static site generation :(

• Please tell us about your environment:

  • MacOS 10.13.6
  • node 8.9.1
  • ng-cli 6.0.0 and tested with 7.1.4
  • angular 6.0.0 and tested with 7.1.4
  • nguniversal 6.0.0 and tested with 7.0.2

• Other information

Looks like other people have had similar problems with Angular Universal and third-party libraries such as yours:
angular/angular-cli#7200 (comment)

They say the third-party libraries aren't being built correctly, which means Angular Universal fails:
angular/angular-cli#7200 (comment)

for example they suggest adding to your package.json

"module": "./quickstart-lib.es5.js",
"es2015": "./quickstart-lib.js",
"typings": "./quickstart-lib.d.ts",

[kmturley]

Approach 1
Patch your plugin root:
npm install @babel/cli @babel/core @babel/preset-env @babel/plugin-transform-modules-umd

Adding a .babelrc file in the root of your plugin folder:

{
  "plugins": [["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }]],
  "presets": ["@babel/preset-env"]
}

Updating your plugins package.json

"main": "./lib-umd/index.js",
"module": "./lib-es5/index.js",
"es2015": "./lib/index.js",
"typings": "./lib/index.d.ts",
"scripts": {
  "build:umd": "babel ./lib/*.js --out-dir ./lib-umd --plugins @babel/plugin-transform-modules-umd",
  "build:es5": "babel ./lib/*.js --out-dir ./lib-es5"
}

Then running the build:
npm run build:es5 && npm run build:umd

And adding to my own project tsconfig.json

"compilerOptions": {
  "paths": { "@angular/*": ["../node_modules/@angular/*"] },
}

But still getting the same error with Angular Universal :(

[kmturley]

Approach 2
Use the Typescript build options for the example project at:
https://github.com/filipesilva/angular-quickstart-lib

So far it seems to be building, but I think i've got some of the paths wrong?
kmturley@8519475

I think it's very close to working!

[kmturley]

I needed a solution working today, so switched to this library instead which supports Angular Universal:
https://github.com/sheikalthaf/ngu-carousel

[levytskyy]

Angular 7, same error:

../ngx-drag-scroll/lib/ngx-drag-scroll-item.js:1
(function (exports, require, module, __filename, __dirname) { import { Directive, ElementRef, Input, HostBinding, Inject } from '@angular/core';
^
SyntaxError: Unexpected token {
at new Script (vm.js:80:7)
at createScript (vm.js:274:10)
at Object.runInThisContext (vm.js:326:10)
at Module._compile (internal/modules/cjs/loader.js:664:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)

[gbertoncelli]

I've solved this problem by converting the package to an ES2015 UMD module with babel and the transform-es2015-modules-umd like this:
babel node_modules/ngx-drag-scroll/lib/ -d node_modules/ngx-drag-scroll/lib/ --presets @babel/preset-env --plugins transform-es2015-modules-umd

[pauloinfotec]

@HighSoftWare96 can you give more details about how install babel and use it with angular 5?

[gbertoncelli]

Here you can find the documentation.
https://babeljs.io/docs/en/

First install Babel then the required plugins. Finally you can run that command.

[bfwg]

@HighSoftWare96 would you like to make a PR to improve the library?

[gbertoncelli]

Yeah I would but you should add the babel script in your package process so it runs automatically each time you change something.. Where should I put that? In the package.json?

[bfwg]

Sorry I totally missed your comment. Yes, that would be in the package.json.