Angular Universal build prerender error

[kmturley]

• I'm submitting a ...

  • [x] 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: https://github.com/angular/angular-cli/issues/7200#issuecomment-329711848

They say the third-party libraries aren't being built correctly, which means Angular Universal fails: https://github.com/angular/angular-cli/issues/7200#issuecomment-328991769

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? https://github.com/kmturley/ngx-drag-scroll/commit/85194756b2b122dc887befe0f06c4a7e3f3ebce4

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)

[HighSoftWare96]

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?

[HighSoftWare96]

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?

[HighSoftWare96]

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.