user791134 user791134 - 1 year ago 105
Node.js Question

AngularJS code not showing on Localhost for Node.JS app

I have built a Node.JS app (meaning I wrote my own HTTP server within the the main JS file, which works as it should with the rest of the application). The HTML and CSS renders as it should within localhost. Even JQuery works (with the source file imported via CDN). However, I have tried adding very basic AngularJS within the Index.html page and the AngularJS refuses to show (anywhere) in my localhost. It should be showing the number "3", but does not.

This is my Index.html page with the angular code:

<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="/css/home.css">
<script src="/node_modules/angular/angular.js"></script>
<script src="/node_modules/angular-route/angular-route.js"></script>
<body ng-app>
<p>AngularJS code: {{ 1 + 2 }}</p>
<div class="hm-container">
<h1 class="hm-title">Some text</h1>

The console log message in chrome says:

"Failed to load resource: the server responded with a status of 404 (Not
Found) http://localhost:3000/node_modules/angular/angular.js"

The Index.html page renders the Angular code correctly only as a standalone isolated HTML page (without the CSS) when tested within my Brackets text editor browser preview and when tested as a stand alone HTML file using the HTTP-Server module. It correctly shows the number "3". So I know my angular code itself is not the issue here. In my localhost the HTML page does not show the number "3", nor does it even show "{{ 1 + 2 }}". It simply reads: "AngularJS code:" with the rest of the HTML and CSS etc.

Even importing the AngularJS source file via CDN, or downloading the AngularJS source file from Angular's site, instead of from NPM does not make any difference. I have played with the directory structure as well per some of your recommendations, with no luck. So I know it is not the file path of the Angular source file which is the issue.

I have been stuck on this for too many days, have lost sleep, and foregone all other activities all because of this, so If any of you can give me your input as to what is going on and how to resolve this issue, I would be extremely grateful!!! :)

Answer Source

Alright, this is how I solved the issue. It was a server-side issue as I had originally suspected. Within the main Node.JS file (typically either named server.js or app.js) the following is needed:

you will most likely already have this part...

    var express = require('express'),
        app = express();

Then immediately after the above code block skip a few lines and add...

    app.use(express.static(__dirname + '/views'));

Apparently this is how Express knows where to serve your JS files. The 'views' folder is where my HTML pages are. You may have them in a folder named 'public'.

The solution to the following link is what helped me solve the issue: AngularJS Code not working with NodeJS

I will add that this is definitely strange to me in that JQuery works by importing it's source file via CDN WITHOUT THE ABOVE CODE CHANGE, yet Angular would not work via both a locally downloaded Angular source file OR via the Angular CDN! If I ever figure out why this is so, I will be sure to update this answer. If any of you Angular, Node, Express experts know why this is so, please enlighten us all!

Hopefully this helps someone running into a similar issue. A big thanks to the two of you that tried to help me solve this weird issue. Your time and input was greatly appreciated!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download