Unexpected token import in Angular2 CLI express server.ts

Question

I'm starting an Angular2 Application and I'm setting up my server using express and Angular CLI 1.0.0-beta.25.5

In this kind of file structure:

project root
|-server
  |-server.ts
|-src
  |-app

When I run nodemon server.ts

I get the following error:

imports are working elsewhere in my app though, so I'm not sure what the issue is. I'm also not getting any vs code errors to suggest that any thing was imported incorrectly. Also both express and body-parser have been npm install --saveed as well as the @types/express (--save-dev). What is preventing this import statement form working and how can I correct the issue?

server.ts

import * as express from 'express';
import {Application} from 'express';
import {apiFoods} from './api/apiFoods';

const bodyParser = require('body-parser');
const app: Application = express();
app.use(bodyParser.json());

apiFoods(app);

app.listen(8090, () => {
    console.log('Server is now running on port 8090 ...');
});

what if you try to import express = require('express'); – federico scamuzzi Jan 19 '17 at 22:41 — federico scamuzzi, Jan 19 '17 at 22:41

R. Gulbrandsen · Answer 1 · 2017-01-23T09:54:21.433

3

Either update node to 7.x to get native es6 support or use babel-node with nodemon like this;

nodemon -w --exec "babel-node server.ts"

You can also specify which folders you want to watch for changes by adding a folder name after -w like -w server

To get babel-node to work, you have to install babel-preset-es2015

npm install --save-dev babel-preset-es2015

and create a file named .babelrc next to your package.json file with the following content

{
  "presets": ["es2015"]
}

edited Jan 23 '17 at 09:54

answered Jan 19 '17 at 22:41

R. Gulbrandsen

3,648
1
22
35

Can you clear this up for me: why must I use babel when typescript is already installed? I don't understand the underlying issue. The example that I am mimicking has no `.babelrc` – Nate May Jan 19 '17 at 23:01
this is the repo https://github.com/angular-university/ngrx-course/blob/master/package.json – Nate May Jan 19 '17 at 23:11
.babelrc is the options used by babel when it transpiles the code. you can also add the options on the package file. read more at https://babeljs.io/docs/usage/babelrc/ . Note, it is not needed to transpile the code if you use node v.7, so the author of the code in the repo might have the latest version of node. It might be the reason it works without the options for him, but not you – R. Gulbrandsen Jan 23 '17 at 09:54

score 2 · Accepted Answer · edited May 23 '17 at 12:17

2

The underlying issue here is that the import statement is an ES6 command that is not recognized by node. The solution that I found to use ts-node to transpile my typescript first and then run it.

npm install --save-dev ts-node

and then add a new script to use it in your package.json

package.json

"scripts":{
  "api-server": "./node_modules/.bin/ts-node ./server/server.ts"
}

When you want to execute run:

npm run api-server

To watch using nodemon, I execute (taken from this answer):

nodemon --watch 'src/**/*.ts' --ignore 'src/**/*.spec.ts' --exec './node_modules/.bin/ts-node' server/server.ts

edited May 23 '17 at 12:17

Community

1
1

answered Jan 19 '17 at 23:37

Nate May

3,814
7
33
86

conventionally the `server` folder is placed under `src` next to `app` – bob Jan 20 '17 at 06:13
Note that instead of `./node_modules/.bin/ts-node`, you should be able to just write `ts-node`. This is because the `.bin` directory is automatically checked for you. – aggregate1166877 Nov 25 '22 at 07:25

Unexpected token import in Angular2 CLI express server.ts

2 Answers2