Ngx-bootstrap: Unexpected token import with Angular Universal

[scurk1415]

First of all I would like to point out that this is not a duplicate of #2369 or #3073.

My problem happens when i want to prerender the page without an express server. To reproduce my issue, you can follow the AppShell tutorial on https://blog.angular-university.io/angular-app-shell/ and add a component (in my case Carousel).

\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:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:607:28)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.mK+S (C:\test2\my-app-shell\dist-server\main.6cb4de858ba3489fa696.bundle.js:1:15786)
    at t (C:\test2\my-app-shell\dist-server\main.6cb4de858ba3489fa696.bundle.js:1:220)
    at Object.hQx7 (C:\test2\my-app-shell\dist-server\main.6cb4de858ba3489fa696.bundle.js:1:9172)
    at t (C:\test2\my-app-shell\dist-server\main.6cb4de858ba3489fa696.bundle.js:1:220)
    at Object.Ub9p (C:\test2\my-app-shell\dist-server\main.6cb4de858ba3489fa696.bundle.js:1:2300)
    at t (C:\test2\my-app-shell\dist-server\main.6cb4de858ba3489fa696.bundle.js:1:220)
    at Object.or6l (C:\test2\my-app-shell\dist-server\main.6cb4de858ba3489fa696.bundle.js:1:15926)

[NickvdMeij]

Same issue here, but then when using the popover module.

/var/make-it.business/backend-application/node_modules/ngx-bootstrap/popover/popover.config.js:1
(function (exports, require, module, __filename, __dirname) { import { Injectable } from '@angular/core';
^^^^^^

SyntaxError: Unexpected token import
    at new Script (vm.js:51:7)
    at createScript (vm.js:136:10)
    at Object.runInThisContext (vm.js:197:10)
    at Module._compile (internal/modules/cjs/loader.js:618:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
    at Module.load (internal/modules/cjs/loader.js:566:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
    at Function.Module._load (internal/modules/cjs/loader.js:498:3)
    at Module.require (internal/modules/cjs/loader.js:598:17)
    at require (internal/modules/cjs/helpers.js:11:18)

here is my package.json:

{
  "name": "angular-cli-universal",
  "description": "Angular cli app with angular universal server side rendering example.",
  "version": "0.1.0",
  "author": {
    "name": "Joe Jordan Brown",
    "email": "[email protected]"
  },
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/joejordanbrown/angular-cli-universal"
  },
  "bugs": {
    "url": "https://github.com/joejordanbrown/angular-cli-universal/issues"
  },
  "keywords": [
    "angular",
    "angular cli",
    "angular universal",
    "express",
    "server side rendering",
    "ssr"
  ],
  "scripts": {
    "config": "ts-node ./scripts/set_env.ts",
    "start": "npm run config -- --environment=dev && ng serve --disable-host-check=true --host=0.0.0.0 --public-host=admin.make-it.test --environment=dev --poll=250 --watch=true",
    "build": "npm run config -- --environment=prod && ng build --prod --aot --build-optimizer && ng build --prod --aot --build-optimizer --app 1",
    "test": "ng test --watch=false",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "5.2.9",
    "@angular/cdk": "5.2.4",
    "@angular/common": "5.2.9",
    "@angular/compiler": "5.2.9",
    "@angular/core": "5.2.9",
    "@angular/forms": "5.2.9",
    "@angular/http": "5.2.9",
    "@angular/material": "5.2.4",
    "@angular/platform-browser": "5.2.9",
    "@angular/platform-browser-dynamic": "5.2.9",
    "@angular/router": "5.2.9",
    "@angular/service-worker": "5.2.9",
    "@nguniversal/express-engine": "5.0.0-beta.8",
    "@ngx-meta/core": "5.0.0",
    "angular2-cool-storage": "3.1.5",
    "aos": "^2.1.1",
    "classlist.js": "^1.1.20150312",
    "codemirror": "^5.37.0",
    "compression": "1.7.0",
    "core-js": "2.4.1",
    "enhanced-resolve": "3.3.0",
    "express": "4.15.3",
    "flexboxgrid": "^6.3.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "2.0.8",
    "intl": "^1.2.5",
    "ngx-bootstrap": "^2.0.4",
    "ngx-editor": "^3.3.0",
    "roboto-fontface": "^0.8.0",
    "rxjs": "5.5.7",
    "web-animations-js": "^2.3.1",
    "zone.js": "0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.7.3",
    "@angular/compiler-cli": "5.2.9",
    "@angular/language-service": "5.2.9",
    "@angular/platform-server": "5.2.9",
    "@types/jasmine": "2.5.53",
    "@types/jasminewd2": "2.0.2",
    "@types/node": "8.0.17",
    "codelyzer": "4.2.1",
    "dotenv": "^4.0.0",
    "jasmine-core": "2.6.4",
    "jasmine-spec-reporter": "4.1.1",
    "karma": "1.7.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "5.1.2",
    "ts-node": "3.3.0",
    "tslint": "5.5.0",
    "typescript": "2.4.2",
    "yargs": "^8.0.2"
  }
}

[valorkin]

It's always the same issue , js files are using es6 import export to ease treeshaking.
Use nodejs 8+ and all should be fine

[NickvdMeij]

@valorkin If it's always the same issue, perhaps you should put NodeJS 8+ as a prerequisite in the documentation?... Then people would know this beforehand and never encounter this issue

[tcdoorn]

I'm currently having this issue as well. I'm using node version 9.10.0. Also tried using version 10.1.0, which still resulted in the error above.

[valorkin]

it complains about import export in js files, all depends on your build configuration
not on ngx-bootstrap

[NickvdMeij]

@valorkin then please explain what is wrong so we can fix it. So far, all modules i've included in my project worked fine out of the box, yours is the only one giving trouble. Don't just rub it off as "It's always the same issue", but explain what is going wrong <3

[scurk1415]

This is not a node problem, cause i am not using node (at least not directly, maybe angular uses it). All i wanted to do is create an app-shell for my app. No node server is required for that.

[randallmeeker]

https://github.com/angular/angular-cli/issues/7200

[yunier0525]

This fix the issue for me

npm update ngx-bootstrap