“Unexpected token import” error with Angular4 + Universal + ng-bootstrap

Hi

So I upgraded to angular 4+ just so that I can leverage the universal package for server side rendering for SEO purposes. I implement that in my existing angular 2+ project by upgrading it to angular 4+ and did all the necessary configuration from https://github.com/evertonrobertoauler/cli-universal-demo/commit/a2610286bd3db5d4f4cce4318d7c220c11963eb6.

There is only one difference I am using ng-bootstrap https://ng-bootstrap.github.io/#/home (v1.0.0-alpha.22). But when I run the node server I get this error for import keyword in ng-bootstrap.


app-ui@0.0.0 start-u-dev /Users/giric/Projects/apnaDoctor/webapp/appUI
ts-node src/server.ts

/appUI/node_modules/@ng-bootstrap/ng-bootstrap/accordion/accordion.module.js:1
(function (exports, require, module, __filename, __dirname) { import { NgModule } from ‘@angular/core’;
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:53:10)
at Object.runInThisContext (vm.js:95:10)
at Module._compile (module.js:543:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object. (/appUI/dist/ngfactory/src/app/app.server.module.ngfa
ctory.ts:18:1)
at Module._compile (module.js:571:32)
at Module.m._compile (/appUI/node_modules/ts-node/src/index.ts:406:23)
at Module._extensions..js (module.js:580:10)
at Object.require.extensions.(anonymous function) [as .ts] (/webapp/appUI/node_mod
ules/ts-node/src/index.ts:409:12)
at Module.load (module.js:488:32)

pm ERR! Darwin 16.6.0
npm ERR! argv “/usr/local/bin/node” “/usr/local/bin/npm” “run” “start-u-dev”
npm ERR! node v7.7.4
npm ERR! npm v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! app-ui@0.0.0 start-u-dev: ts-node src/server.ts
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the app-ui@0.0.0 start-u-dev script ‘ts-node src/server.ts’.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the app-ui package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ts-node src/server.ts
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs app-ui
npm ERR! Or if that isn’t available, you can get their info via:
npm ERR! npm owner ls app-ui
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:


This is what my package.json looks like

{
“name”: “app-ui”,
“version”: “0.0.0”,
“license”: “MIT”,
“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”,
“prestart”: “npm install”,
“postinstall”: “bower install”,
“prestart-u-dev”: “npm install && ng build && ngc”,
“start-u-dev”: “ts-node src/server.ts”,
“prestart-u-prod”: “npm install && ng build –prod && ngc”,
“start-u-prod”: “ts-node src/server.ts”
},
“private”: true,
“dependencies”: {
“@angular/animations”: “^4.0.1”,
“@angular/cli”: “^1.0.0-rc.1”,
“@angular/common”: “^4.0.1”,
“@angular/compiler”: “^4.0.1”,
“@angular/compiler-cli”: “^4.0.1”,
“@angular/core”: “^4.0.1”,
“@angular/forms”: “^4.0.1”,
“@angular/http”: “^4.0.1”,
“@angular/platform-browser”: “^4.0.1”,
“@angular/platform-browser-dynamic”: “^4.0.1”,
“@angular/platform-server”: “^4.0.1”,
“@angular/router”: “^4.0.1”,
“@ng-bootstrap/ng-bootstrap”: “^1.0.0-alpha.22”,
“angular2-toaster”: “^3.0.1”,
“core-js”: “^2.4.1”,
“ng2-webstorage”: “^1.5.1”,
“rxjs”: “^5.1.0”,
“rxjs-es”: “^5.0.0-beta.12”,
“typescript”: “^2.2.2”,
“ui-router-ng2”: “^1.0.0-beta.4”,
“zone.js”: “^0.7.6”
},
“devDependencies”: {
“@types/jasmine”: “2.5.38”,
“@types/node”: “~6.0.60”,
“codelyzer”: “~2.0.0”,
“jasmine-core”: “~2.5.2”,
“jasmine-spec-reporter”: “~3.2.0”,
“karma”: “~1.4.1”,
“karma-chrome-launcher”: “~2.0.0”,
“karma-cli”: “~1.0.1”,
“karma-coverage-istanbul-reporter”: “^0.2.0”,
“karma-jasmine”: “~1.1.0”,
“karma-jasmine-html-reporter”: “^0.2.2”,
“node-sass”: “^4.5.0”,
“protractor”: “~5.1.0”,
“raw-loader”: “^0.5.1”,
“sass-loader”: “^6.0.3”,
“ts-node”: “~2.0.0”,
“tslint”: “~4.4.2”
}
}

Update:
Earlier i removed angular2-toaster, but then i added it again just to make sure it wasn’t just toaster module that is throwing the same error. Turns out, both angular2-toaster and ng-bootstrap threw the same error.

Update 2:
When I run the server using ng server, it works fine, no issues with using ng-bootstrap and angular2-toaster with angular 4+

Any suggestions? Thanks in advance.

2 thoughts on ““Unexpected token import” error with Angular4 + Universal + ng-bootstrap

  1. I’ve just come across the same error, trying to use ng-bootstrap on a CLI app with Server Side Rendering.
    Following the SO link that @pkozlowski-opensource mentioned, the accepted answer there says to “eject”.
    Imo, ejecting shouldn’t be a solution. Maybe if the CLI would offer a possibility to “extend” the config, that would be something else.
    But even so, I believe that this should be fixed on ng-bootstrap side. I mean, the Material library for example doesn’t break SSR… so it is possible.

    I know a lot of libraries haven’t been built with SSR in mind to begin with. A lot of them entered development even before SSR was an option or before SSR became so easy to implement.
    But still, they need to adapt.

    The only viable option for me right now is to start writing my own directives. Definitely not “ejecting”.