I cant load a template Angular JS + Ionic + Gulpjs

Question

I can't load a template in Ionic after setup a gulp task, this is the error that I get with firebug:

  Cannot GET /templates/login.html

This is the tree of my project

app  
   controllers
   services
   templates/
      login.html
   index.html
   app.js
vendors : bower directory 
web:  this is the deployment directory 
  templates/
     login.html  the gulp task copy the file 

this is the complete gulp file :

'use strict';

var gulp    = require('gulp');
var connect = require('gulp-connect');
var uglify  = require('gulp-uglify');
var concat  = require('gulp-concat');
var historyApiFallback = require('connect-history-api-fallback');

/**
 * Deploying the compress vendors
*/
gulp.task('vendors', function () {
  gulp.src('./vendors/**')
    .pipe(gulp.dest('./www/lib'))
    .pipe( connect.reload() );
});
/**
 * Deploying the templates in  www
*/
gulp.task('templates',function(){
  gulp.src( './app/templates/**/*.html')
      .pipe( gulp.dest( './www/js/templates') )
      .pipe( connect.reload() );
});


/**
 * Deployting the compress factories in www
*/
gulp.task( 'factories', function(){
  gulp.src('./app/core/**/*.js')
      .pipe( uglify({mangle: false}) )
      .pipe( concat('factories.js') )
      .pipe( gulp.dest('./www/js/') )
      .pipe( connect.reload() );
});
/**
 * Deployting the compress services in www
*/
gulp.task( 'services', function(){
  gulp.src('./app/services/**/*.js')
      .pipe( uglify({mangle: false}) )
      .pipe( concat('services.js') )
      .pipe( gulp.dest('./www/js/') )
      .pipe( connect.reload() );
});

/**
 * Deploying the compress controllers in www
*/
gulp.task( 'controllers', function(){
  gulp.src('./app/controllers/**/*.js')
      .pipe( uglify({mangle: false}) )
      .pipe( concat('controllers.js') )
      .pipe( gulp.dest('./www/js/') )
      .pipe( connect.reload() );
});

/**
 * Deployting the app in www
*/
gulp.task( 'app', function(){
  gulp.src('./app/app.js')
      .pipe( uglify({mangle: false}) )
      .pipe( concat('app.js') )
      .pipe( gulp.dest('./www/js') );
});

gulp.task( 'index', function(){
  gulp.src('./app/index.html')
      .pipe( gulp.dest('./www/') )
      .pipe( connect.reload() );
});

gulp.task( 'watch',function(){
    gulp.watch( ['./app/templates/**/*.html'], ['templates'] );
    gulp.watch( ['./app/controllers/**/*.js'], ['controllers']);
    gulp.watch( ['./app/core/**/*.js'],        ['factories']);
    gulp.watch( ['./app/services/**/*.js'],    ['services'] );
    gulp.watch( ['./app/app.js'],              ['app'] );
    gulp.watch( ['./app/index.html'], ['index'] );
});


 // Servidor web de desarrollo
 gulp.task('server', function() {
     connect.server({
       root: './app',
       hostname: '0.0.0.0',
       port: 8080,
       livereload: true,
       middleware: function(connect, opt) {
         return [ historyApiFallback ];
       }
     });
});

var tareas = [
  'vendors','index','templates', 'factories', 'services','controllers','app', 'watch'
];



gulp.task('default',tareas);

This is my app.js to deploy:

var app =   angular.module('rondas', ['ionic']);


app.run(['$ionicPlatform',function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });

}]);
app.config(['$stateProvider','$urlRouterProvider','$httpProvider',function( $stateProvider,$urlRouterProvider,$httpProvider ){
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
    $stateProvider.state('login', {
      url: '/',
      templateUrl: 'templates/login.html',
      controller : 'LoginController'
    });
    $urlRouterProvider.otherwise('/');
}]);

The weird thing is that when I run the gulp task, the files are copied in the expectd directory, but when I run the application with ionic serve and firebug I get the error.

this is the ionic.project file:

{
  "name": "irondas",
  "app_id": "",
  "gulpStartupTasks": [
    "vendors","templates", "factories", "services","controllers","app", "watch"
  ]
}

you can check the all source here

then I don't know what am I doing wrong?

Answer 1

Your gulp process is putting template files into the www/js/templates directory, not the web/templates directory as you suggested:

.pipe( gulp.dest( './www/js/templates') )

Perhaps you meant to put

.pipe( gulp.dest( './web/templates') )

Instead?