Running angular from node.js server

javascript html angularjs node.js express

12,151

Solution 1

Looks like your static files (js/css) are not accessible through expressjs, you can check in a browser console if it's 404?

By the way did you add the directory where app.js stored as static in expressjs or is it located in the same directory as index.html?

Something like:

app.use('/js',express.static(path.join(__dirname, 'public/javascripts')));

Alternatively you can add a route to your app.js:

app.get('/js/app.js', function(req, res){
  res.sendFile(__dirname + '/app.js');
});

but it's not recommended, just for the tests.

Solution 2

You are running your node sever.

So, you have mention the path for your static files like js,css.

Define the path for your app.js which include your controller.

Assume your app.js is in public folder within root directory,

then define like this in your route.js

app.use(express.static('public'));

12,151

Author by

Nikhil

I love to create products which solve problems.

Updated on June 13, 2022

Comments

Nikhil almost 2 years
I have following files -

1) index.html

2) app.js (angular controllers here)

3) routes.js (I'm trying to load index.html from here - listening on localhost :3000)

4) index.css

5) node_modules folder

routes.js :
```
var express = require('express'),
    app = express(),
    server = require('http').createServer(app),
    io = require('socket.io').listen(server);

server.listen(3000);

app.use("/node_modules", express.static('node_modules'));        
app.use("/public", express.static('public'));

    app.get('/', function(req, res){
        res.sendFile(__dirname + '/index.html');
    });

io.sockets.on('connection', function(socket){
    socket.on('send message', function(data){
        io.sockets.emit('new message', data);
    });
});
```
When I open index.html file normally by clicking on it from file explorer, it opens fine as expected.

But, when I run routes.js, to fetch the same index.html file, I get the raw HTML without angular effects. Why is this?

Thanks!

EDIT :

I can now access my index.css and app.js from localhost:3000/public/. I used app.use("/public", express.static('public')); in my routes.js.

But now I can only get css included in my page, but still looks like angular is not included. I couldn't see the tabs. Please look at above screenshot of index.html file with tabs.

How can I include angular? Isn't it included from the HTML itself?

index.html -
```
<html>
...
...
<link href="node_modules/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet"> 
<link href="public/index.css" rel="stylesheet"> 

<body>
...
...

<script src="node_modules/angular/angular.js"></script>
<script src="public/ui-bootstrap-tpls-0.13.1.js"></script>
<script src="node_modules/socket.io/node_modules/socket.io-client/socket.io.js"></script>
<script src="public/app.js"></script>

</body>
</html>
```
EDIT : I solved it by including
```
app.use("/node_modules", express.static('node_modules'));
```
in my routes.js file. So now express also uses that folder, so angular files in that folder are used to serve my index.html file. Now, running my localhost:3000/ gives me the expected result. Thanks!
Nikhil almost 9 years

app.js is in the same directory as index.html. I'm trying to include js and css files as you suggested.
Nikhil almost 9 years

Sorry, I coudn't load those files from express and adding app.js also didn't work.
Nikhil almost 9 years

app.js has controllers with empty body. So, adding them or not should not make much difference. I linked css and js files in my HTML, so I think that mustn't be an issue. Correct me if I'm wrong.
teamnorge almost 9 years

So, do you see css files then? Just to be simple, you can make one folder - public, put everything there and specify app.use(express.static(__dirname + '/public')); then all your static files must be accessible from /
Nikhil almost 9 years

I did just as you suggested. Looks like I can't access my public folder as well. Any help? I still get the same HTML page without CSS and angular.
Nikhil almost 9 years

As suggested by@teamnorge.. I used app.use(express.static(__dirname + '/public')); to include my files in /public folder, but to no avail. I also couldn't access my public folder from local host. Please look at my edited question.
RIYAJ KHAN almost 9 years

Please show me your index.html file where you include you script.
Nikhil almost 9 years

Please look at my edit. I included the snippet where I linked those files.
Nikhil almost 9 years

Thanks! I additionally also included my node_modules folder by using app.use("/node_modules", express.static('node_modules')); So, the angular files are now used.