import ES6 modules in Angular2 served by Express

Question

I would like to use ES6 Modules with Angular2 in an app that is served by Node.js and Express.js. However, when I try to load an Angular2/ES6 app in the browser, the following is printed in the FireFox console:

The stylesheet http://localhost:8080/boot.css was not loaded because its MIME type, "text/html", is not "text/css". localhost:8080
SyntaxError: import declarations may only appear at top level of a module vendor.js:1:0
SyntaxError: import declarations may only appear at top level of a module boot.js:1:0

The problem seems to be the result of something missing from the build of the Angular2 app that is done by the Node.js/Express.js server that serves the Angular2 app.

Specifically, the problem emerged after I deleted the entire public app folder from this GitHub AngularJS 1.x sample app and replaced it with a copy of the entire client app folder from this GitHub Angular2 example app . When I then started the Express.js server with nodemon server.js and typed http : // localhost : 8080 into FireFox, the console printed out the errors shown above.

I would like to get the Angular2 app running in the browser so that I can then manually start stepping through the work of re-creating the Node.js routes and resolving other errors one by one in order to get the Angular2 app to work with the Node.js/Express.js server.

What specific changes need to be made so that these initial errors due to ES6 imports are resolved when this Angular2 app is placed inside the public folder of this Node.js/Express.js instance ?

Answer 1

I just check out those two repos, and then do the same thing you mentioned above.

the problem is that the client folder of angular2 is written is ES6 syntax.

I don't think currently we can run this code on the browser without problem and

you can tell from the repo that it uses babel to compile the code

so if you want to use its client code, just make sure you also do the same

compile stuff as it does. I think everything should work

update

What I am trying to say is the angular repo use babel and gulp to help it

transpile the code from ES6 to ES5.

You can run gulp serve under angular2-esnext-starter and it will generate one

new folder called dist my screenshot

copy the client folder under that dist folder to node-todo and remember

rename it to public and you will see everything is ok.

so the hint is copy the gulpfile of angular2-esnext-starter and don't forget

to add more dependencies to your package.json should solve your problem.

my workable node-todo