Angular2 + Express.js running on the same port?

[Kyle Thomas]

Is it possible to start up node and have both run on the same port?

[Zlatko Đurić]

On Thursday, May 12, 2016 at 6:30:31 PM UTC+2, Kyle Thomas wrote:

Is it possible to start up node and have both run on the same port?

 

Node app as a backend API and the angular app as a frontend? Yeah, relatively simple, if you let Node serve your angular stuff. Look up express.static() middleware - tell node/express to serve static files from the angular's directory.

[Kyle Thomas]

When I do that I get:

> cd server && node index.js

info: Express server listening on 3001, in development mode
GET /node_modules/systemjs/dist/system.js 304 11.320 ms - -
GET /node_modules/es6-shim/es6-shim.js 304 8.689 ms - -
GET /node_modules/angular2/bundles/angular2-polyfills.js 304 10.217 ms - -
GET /node_modules/systemjs/dist/system.src.js 304 7.976 ms - -
GET /node_modules/rxjs/bundles/Rx.js 304 3.869 ms - -
GET /node_modules/angular2/bundles/upgrade.dev.js 304 2.991 ms - -
GET /node_modules/angular2/bundles/angular2.dev.js 304 1.407 ms - -

And in my browser it doesn't seem to load the Angular2 files:

[Zlatko Đurić]

Oh, well, that's because you didn't build your Angular app for deployment.

Try running "npm build" if you're using one of the more popular packs. Then you'll get a "dist/production" directory or something similar - _that_ is the folder you need to serve.

(Or at the very least, look in your angular app for a folder "tmp", there might be a runnable app.)

Basically, your compiled and built index.html should source the systemjs, then systemjs can take over and build from there. If you use "npm serve", the gulp task or whatever is serving the app does this on the fly for you. 

As long as your index.html doesn't run by simply opening the "index.html" file directly in chrome, you cannot serve this angular app - not with Node, but also not with nginx or apache or whatever. The build process needs to do all of its stuff first.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/6cdW6_n0zeg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Zlatko

[Kyle Thomas]

I can run express by itself by issuing:

npm run server

which does:
"server": "cd server && node index.js"

This opens express on port 3001

When I run the application (client) which is stored in /client I use:

npm run go

which does:
"go": "concurrent \"npm run tsc:w\" \"npm run serve\" "

This opens up the application on http://localhost:8080/#/

I modified the express app.js to use the /client static files so that it would go in there and open up the index.html, but when I do that it throws the errors above.

Since all the files in /client run already would I still need to instantiate a build process?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

[Zlatko Đurić]

You're still running the code through the compiler on that "npm run go" script, that's the tsc:w part.

The point is, you still can't simply open that index file as a file in chrome, you have to go to a different "server", the one on port 8080. You could get node and express to run typescript compiler (tsc) for you, but a better practice is to actually build the scripts and serve like that.

You may have that task; what do you get when you run "npm run"?

And since it all looks connected, you may already have stuff prepared for you - did you use some kind of boilerplate for the project?

[Kyle Thomas]

This application started as a yoeman - generator-angular-fullstack and uses grunt, but since I'm converting it over to NG2 i'm running a hybrid with the upgradeAdpater so I can run both. The yeoman generator was running everything through the .tmp.

I guess I'll look into seeing if I can modify the Grunt script to serve everything up.

[Kyle Thomas]

When I run everything through the Grunt build process I get this:


​

[Zlatko Đurić]

Ok, that is a good progress. You now have a broken app that you can serve. All you need to do is fix the build process.

Now, the error bellow suggests many things, but I would bet on version changes. There were a lot of breaking changes during Angular2 beta issues - almost each new beta release brought along breaking changes.

In any case, I think you should fix the grunt task so that when you "grunt build" or "npm build" or similar, you need to be able to open the file by simply pointing the browser to file:///path/to/index.html. Once you get to that point, you can simply point express static to that folder.

But go ahead and post more details when you're stuck, maybe somebody's met the same errors as you have and has a solution.

Zlatko

[Kyle Thomas]

I was able to get it running using the latest packages with Gulp.

Thanks for the assistance in answering all my noob questions.

Cheers Zlatko!

[Krishna D]

http://stackoverflow.com/questions/37559853/angular-2-rc-with-express-server-instead-of-lite-server/

I've just asked in stackoverflow and got some solution from it