Make templateUrl point to a html file

Question

In angularApp.js of a project, I want to define a state with templateUrl. First, I tried the following:

app.config(['$stateProvider', function ($stateProvider) {
    $stateProvider
        .state('editor', {
            url: ...,
            templateUrl: '/editor.html',
            controller: ...
        })

the console shows [Error] Failed to load resource: the server responded with a status of 404 (Not Found) (editor.html, line 0) at http://localhost:3000/editor.html, which is not the location of editor.html.

Then, I tried a relative path

`templateUrl: '../../../../../Start/PRODSERVER/funfun/views/editor.html'`,

the console shows the same error at http://localhost:3000/Start/PRODSERVER/funfun/views/editor.html. However, opening http://localhost/Start/PRODSERVER/funfun/views/editor.html in the browser does open the right file.

Does anyone know how to solve this?

PS: angularApp.js is in the folder public/javascripts/; the home page index.ejs is in the folder views/; I have put editor.html in the folder views/ as well. app.js is just in the main folder:

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var mongoose = require('mongoose');
var passport = require('passport');
require('./models/Posts');
require('./models/Comments');
require('./models/Users');
require('./config/passport');
mongoose.connect('mongodb://localhost/news');

var index = require('./routes/index');
var users = require('./routes/users');

var app = express();

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

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(passport.initialize());

app.use('/', index);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

I think the path should be relative to wherever your `index.html` is; I'll assume it's here `http://localhost/Start/PRODSERVER/funfun/`. So try `templateUrl: 'views/editor.html'` — Ankh, Jan 20 '17 at 15:24
Note that without the port, you are going directly to your project. With the port, you are serving it somehow. — Amit, Jan 20 '17 at 15:25
I disabled CORS like [this](http://stackoverflow.com/a/12158217/6330767), the console still shows the same error at `http://localhost:3000/Start/PRODSERVER/funfun/views/editor.html`.@AlonEitan — , Jan 20 '17 at 15:32
@Ankh I have put `editor.html` in the same folder as `index.ejs`, and tried `templateUrl: 'editor.html'`, it points to `http://localhost:3000/editor.html`. — , Jan 20 '17 at 15:34
@Thomas I didn't mention `index.js`. Where is your index. **html**? Have you tried what I suggested? — Ankh, Jan 20 '17 at 15:38
There is no `index.html`, the main entry is `index.ejs` I believe, it is in `views/index.ejs`. — , Jan 20 '17 at 15:40

score 1 · Accepted Answer · answered Jan 22 '17 at 16:57

1

You HTML file is a static file, so it will be served from the static folder that you defined using express.static function.

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

Place you templates HTML inside the public folder for them to be accessible.

answered Jan 22 '17 at 16:57

Ron Dadon

2,605
1
12
26

It still does not work... `Failed to load resource: the server responded with a status of 404 (Not Found)` error at `http://localhost:3000/Start/PRODSERVER/funfun/public/htmls/editor.html`, whereas `http://localhost/Start/PRODSERVER/funfun/public/htmls/editor.html` reads well the file... – Jan 22 '17 at 20:12
1

Remove all the folders, place it in the public folder and just use `/editor.html`. – Ron Dadon Jan 22 '17 at 21:24

Make templateUrl point to a html file

1 Answers1