AngularJS's $routeProvider templateUrl is always returning 404 using Express

Question

So the issue is that AngularJS's $routeProvider/ngRoute is not working as I need it to. I can't get it to display the respective .html page on its route. I'm always getting GET http://localhost:3000/home.html 404 (Not Found) when I try to load the template in my index.ejs page.

I have tried many variations of paths to get the .html to load but I haven't been successful. I even created home.html for each folder in the app to see if it'll grab anything but nothing worked. ng-include doesn't work when injected directly into the html either.

/app.js simplified: original code uses express.router()

var express = require('express');
var app = express();
var path = require('path');
var ejs = require('ejs');

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

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

app.get('/', function(req,res,next) {
    res.render('index', { page: 'index' });
});

app.listen(3000,function(){ console.log('3k'); });

/views/index.ejs

<!DOCTYPE html>

<html lang="en" ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>WHY???</title>
</head>
<body>

    <div class="main">
        <div ng-view></div>
    </div>

    <script src="/vendor/angular/angular.js"></script>
    <script src="/vendor/angular-route/angular-route.js"></script>
    <script src="/angular/angularApp.js"></script>
</body>
</html>

/public/angular/angularApp.js

var App = angular.module('App',['ngRoute']);

App.config(['$routeProvider', function($routeProvider) {

    $routeProvider
        .when('/', {
            templateUrl: 'views/index/home.html'
        })
        .when('/team', {
            templateUrl: '/views/index/team.html'
        })
        .when('/faq', {
            templateUrl: '/views/index/faq.html'
        })
        .otherwise({
            redirectTo: '/'
        })
}]);

home.html, team.html, and faq.html all have simple lines of code for testing purposes. Example: <h1> This is home.html </h1>

Folder Structure

app.js

public/
|-vendor/
|-angular/
| |-angularApp.js

views/
|-index.ejs
|
|-index/
| |-home.html
| |-faq.html
| |-team.html

It seems to be a Path issue .. You must check the proper path for your views.. — Ved
– Ved, Commented Dec 6, 2015 at 3:22
@Ved How do I do that? All I know is that express's static path for views is set to views. Other than that, I don't know how to check AngularJS's current search path. — WeerdNoise
– WeerdNoise, Commented Dec 6, 2015 at 3:25
app.get('/', function(req, res) { res.sendfile('./path/index.html'); }); Try using this. — Ved
– Ved, Commented Dec 6, 2015 at 3:35

Moshe Karmel · Accepted Answer · 2015-12-06 04:12:58Z

4

Node/Express is serving everything statically from the "public" folder. You need to set all of your URLs relative to the public directory.Your index folder should be moved into public.

app.js

public/
|-vendor/
|-angular/
| |-angularApp.js
|views/
| |-index/
| | |-home.html
| | |-faq.html
| | |-team.html

views/
|-index.ejs

This folder structure should work. Also fix this:

    when('/', {
        templateUrl: '/views/index/home.html'
    })

answered Dec 6, 2015 at 4:12

Moshe Karmel

4594 silver badges9 bronze badges

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

2 Comments

WeerdNoise Over a year ago

OMG I love you. But can you explain why AngularJS is following the Express static directory? This kind of explains why my other app worked.

Moshe Karmel Over a year ago

The leading "/" in your URLs is referring to the base server. Throughout your application the server is pretending that the public folder is all it sees. The fact that your index.ejs file is rendered is through the res.render method. But as far as angular is concerned only the public folder exists!

Collectives™ on Stack Overflow

AngularJS's $routeProvider templateUrl is always returning 404 using Express

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related