title: "Unexpected token import" error with Angular4 + Universal + ng-bootstrap
body: <p>So I upgraded to angular 4+ just so that I can leverage the universal package for server side rendering for SEO purposes. I implemented that in my existing angular 2+ project by upgrading it to angular 4+ and did all the necessary configuration from <a href="https://github.com/evertonrobertoauler/cli-universal-demo/commit/a2610286bd3db5d4f4cce4318d7c220c11963eb6" rel="noreferrer">https://github.com/evertonrobertoauler/cli-universal-demo/commit/a2610286bd3db5d4f4cce4318d7c220c11963eb6</a>.</p>
  
  <p>There is only one difference I am using ng-bootstrap <a href="https://ng-bootstrap.github.io/#/home" rel="noreferrer">https://ng-bootstrap.github.io/#/home</a> (v1.0.0-alpha.22). But when I run the node server using <strong>npm run start-u-dev</strong> I get this error for import keyword in ng-bootstrap.</p>
  
  <hr>
  
  <pre><code>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.&lt;anonymous&gt; (/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:  
  </code></pre>
  
  <hr>
  
  <p>This is what my package.json looks like</p>
  
  <pre><code>{  
    "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 &amp;&amp; ng build &amp;&amp; ngc",
      "start-u-dev": "ts-node src/server.ts",
      "prestart-u-prod": "npm install &amp;&amp; ng build --prod &amp;&amp; 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"
    }
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Update 2:
  When I run the server using <strong>ng server</strong>, it works fine, no issues with using ng-bootstrap and angular2-toaster with angular 4+</p>
  
  <p>Any suggestions? Thanks in advance.</p>