ui-router doesn't work from nodejs folder but works on plunker

Question

ui-router doesn't work from nodejs folder but works on plunker

ui-router is supposed to make an index.html as a header and test.html as a attached view but it doesn't work on my computer for some reason. Plunker one work great.

index.html is same as on plunker

<html ng-app="MyApp">
<head>
  <link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>

<h4>
    This should be the header
</h4>
<div ui-view></div>

<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-router@*" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="controllers/main.js"></script>

</body>
</html>

views/test.html only contains

<div>
this is test.html
</div>

and app.js contains

    angular.module('MyApp', [
  'ui.router'
])
.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('main', {
            url: '/',
            templateUrl: 'vews/test.html',
            controller: 'MainCtrl'
          });
})

Here is server.js if needed

    var express = require('express');
var path = require('path');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var bcrypt = require('bcryptjs');

var app = express();

app.set('port', process.env.PORT || 3000);
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.listen(app.get('port'), function() {
  console.log('Express server listening on port ' + app.get('port'));
});

I don't get why ui-router works on plunker, but doesn't at my computer.

javascript
node.js
angularjs
express
angular-ui-router

Answer 1

If the plunker is working, then your local stuff should be as well - and I cannot see any obvious error.

But there is a difference. Usually in plunker we do not use nesting (sub-folders like views or controllers). And in your plunker - in comparison with your snippet in the question is:

the plunker:

$stateProvider
    .state('main', {
        url: '/',
        templateUrl: 'test.html',
        controller: 'MainCtrl'
      });

the snippet above:

$stateProvider
    .state('main', {
        url: '/',
        templateUrl: 'vews/test.html',
        controller: 'MainCtrl'
      });

And that together seems, that you have a typo in templateUrl where is: 'vews/test.html', instead of views. Could that be the issue?

Also, related to the above issues with subfolders, there were some small errors (click F12 in Chrome and check the console)... I fixed them in this fork