2

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">
    <head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
    <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>
    </head>
    <body>
    <body ng-app>
    <p>AngularJS code: {{ 1 + 2 }}</p>
    </body>
    <div class="hm-container">
    <h1 class="hm-title">Some text</h1>
    </div>
    </body>
    </html>

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!!! :)

Improve this question
2
  • It looks like you are mixing up the web root with project root. The path to Angular needs to be relative to the location of your index.html. Put your index.html in the same directory as the node_modules directory and it should work. Commented Jan 13, 2016 at 3:44
  • Thanks for your input Jason, I have followed your advice, but unfortunately, this does not solve the issue. It again, only works when run as an isolated HTML file. Commented Jan 13, 2016 at 4:46

3 Answers 3

Reset to default
4

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!

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

well, you know... the cdn url is external, not on your server. so how is it strange that you don't need to change your server to reference it?
Argh! Man you never posted your server code to start with but then again the problem would not have been there if you followed what everyone suggested. But in the end I'm glad that you have helped yourself. Best of luck for future. Keep Coding.
@KevinB You would think, but its strange because even with using Angular CDN (which is external) it was not working, until I referenced what I did on the server.
@GandalftheWhite I really appreciated your help nonetheless!
0

There is problem obviously in attaching Angular JS to your index. You have already said that you even tried attaching through CDN. 

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">

<h1> {{1+2}} </h1> 

</div>

</body>
</html>

This works, I have checked. Try to integrate your stuff in this code. And follow Jason's suggestion to attach angular js from your system only. Keep the angular js file within the same folder.

Improve this answer

9 Comments

Thanks for your input Gandalf, I have followed your advice, but unfortunately, this does not solve the issue. It again, only works when run as an isolated HTML file (regardless of where the angular source file is or when the directory structure has changed). I believe the problem appears to be coming from the server side, since the Chrome log console throws a 404 resource not found for Angular, even though the angular exact angular same source file is read correctly by the exact same html file when in isolation and renders correctly. Am stumped!
server side? When on console you see a 404 for some file, it simply means that specific file wasn't accessed. Did you use the HTML I have given above, even that isn't working?
I don't think here we have anything to do with backend of yours because the file is not being fetched.
I replaced my code with your code, and when ran on my localhost it returned a blank HTML page. Yet this time, for some very strange reason it returned no errors at all in the in the console log. Your HTML is most definitely being fetched though. Just not the AngularJS, hence a blank empty page.
This needs an https to work. Here is ajsfiddle of this running: jsfiddle.net/jkennaly/o5hm0xha
|
0

To make that work, you need a directory structure like this:

|--app
|  |--index.html
|  |--node_modules
|  |  |--angular
|  |  |  |--angular.js
|  |  |--angular-route
|  |  |  |--angular-route.js
|  |--css
|  |--home.css
Improve this answer

9 Comments

Tried changing the directory structure as you have pointed out but unfortunately there is no difference. This is because the HTML file is reading the angularJS file correctly isolated no matter where I put the angular file (I even used a new angular source file downloaded from the angular site), but its only once it seems to hit the node server, the angularJS will not render.
The HTML file does not read the angular file at all. It has to be served to the browser directly. All of the pieces are assembled by the browser, not the server. That error from your browser indicates the file is not at the location given in index.html.
I agree with what you are saying. I have even tried different browsers and even tried using serving my app with HTTP-Server (downloaded from NPM) but with no luck.
It's not the browser that's the problem. It's that the file isn't where the browser is looking. The index.html just has a file location. The browser tries to load that file, and your server is saying the file is not there. You need to put that file in the spot the browser is looking for it.
If this is the case, how come the Anglar code does not show when I use the CDN instead of an actual local source file? <script src="ajax.googleapis.com/ajax/libs/angularjs/1.4.8/…>
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.