Angular.js templateUrl directive not found on Mean.js stack

Question

I created my first directive in Angular running in the file structure of the high.js 0.4-dev file, which I automatically generated using Yeoman.

The directive compiles correctly when I use the "template:" property, however, when I try to move the contents to the template file and use the "templateUrl:" property, it loads the uncompiled layout.server.view.html 'file instead of the' contact-form file. client.template.html '. It seems that it cannot find my template file no matter what I set the path for (I tried all the paths up the tree).

Can anyone see what I'm doing wrong. Perhaps someone can explain how Angular resolves relative paths.

My program structure looks like this ... I generated a module for the contact form using a 0.4-dev generator mean. The module contains my directive. My file structure is as follows:

/app
  /config
  /modules
    /contact-forms
      /client
        /config
        /controllers  
          contact-forms.client.controller.js
        /views
          contact-form.client.template.html <- 2. should load this
        contact-forms.client.module.js
    /core
      /client
        /views
          home.client.view.html <- 1. <contact-form> directive here
      /server
        /controllers
        /routes
        /views
          layout.server.view.html <- 3. instead loads this
    /node_modules
    /public
    /uploads

My directive code is:

contactForms.directive('contactForm',[function(){
return {
    restrict: 'E',
    transclude: 'true',
    //template: '<div>hello world!</div>', <--this works
    templateUrl: 'modules/contact-forms/client/views/contact-form.client.template.html'
};
}]);

And my template file looks like this:

<div>
<form class="row col-md-6 col-md-offset-3 text-left">
    <div class="form-group col-md-12">
        <label for="Name">Name</label>
        <input type="text" class="form-control" id="inputName">
    </div>
    <div class="form-group col-md-12">
        <label for="email">Email</label>
        <input type="email" class="form-control" id="inputEmail">
    </div>
    <div class="form-group col-xs-12">
        <label for="emailSubject">Subject</label>
        <input type="text" class="form-control" id="inputSubject">
    </div>
    <div class="form-group col-xs-12">
        <label for="emailMessage">Message</label>
        <input type="text" class="form-control" id="inputMessage">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

I saw several posts on this type of problem, but none of them matched my use case. I am running a local express server, so I do not think this post is a problem ( Failed to load the template using templateUrl in Angularjs ).

This post says templateUrl is wrong, but I think my correct one ( Angular templateURL directive doesn't load. Why? )

Angular github (https://github.com/angular/angular.js/issues/10965), angular.js . feb 4 , . , , .

node.js Yeoman mean.js:

module.exports = function(app) {
// Root routing
var core = require('../controllers/core.server.controller');

// Define error pages
app.route('/server-error').get(core.renderServerError);
app.route('/not-found').get(core.renderNotFound);

// Define application route
app.route('/*').get(core.renderIndex);
};

'use strict';

/**
 * Render the main application page
 */
exports.renderIndex = function(req, res) {
    res.render('modules/core/server/views/index', {
        user: req.user || null
    });
};

/**
 * Render the server error page
 */
exports.renderServerError = function(req, res) {
    res.status(500).render('modules/core/server/views/500', {
        error: 'Oops! Something went wrong...'
    });
};

/**
 * Render the server not found page
 */
exports.renderNotFound = function(req, res) {
    res.status(404).render('modules/core/server/views/404', {
        url: req.originalUrl
    });
};

?

Answer 1

, . mean.js 0.4.0 - , /client

/**
 * Configure the modules static routes
 */
module.exports.initModulesClientRoutes = function (app) {
    // Setting the app router and static folder
    app.use('/', express.static(path.resolve('./public')));

    // Globbing static routing
    config.folders.client.forEach(function (staticPath) {
        app.use(staticPath.replace('/client', ''), express.static(path.resolve('./' + staticPath)));
    });
};

, :

templateUrl: 'modules/contact-forms/client/views/contact-form.client.template.html'

:

templateUrl: 'modules/contact-forms/views/contact-form.client.template.html'

, . , / . (https://github.com/meanjs/mean/issues/608), , , , .

mean.js, (: yoman: , , .):

replace() express.js, :

/**
 * Configure the modules static routes
 */
module.exports.initModulesClientRoutes = function (app) {
    // Setting the app router and static folder
    app.use('/', express.static(path.resolve('./public')));

    // Globbing static routing
    config.folders.client.forEach(function (staticPath) {
        app.use(staticPath, express.static(path.resolve('./' + staticPath)));
    });
};

/client . , , .

config.js / 121 124, :

    // Setting Globbed js files
    config.files.client.js = getGlobbedPaths(assets.client.lib.js, 'public/').concat(getGlobbedPaths(assets.client.js, 'public/'));

    // Setting Globbed css files
    config.files.client.css = getGlobbedPaths(assets.client.lib.css, 'public/').concat(getGlobbedPaths(assets.client.css, 'public/'));

, , . , .