angularjsgruntjsyeoman-generator-angulargrunt-connect-proxy

ngResource does not connect to proxy


I have a yeoman angular app, I have configured grunt-connect-proxy in Gruntfile.js like this:

module.exports = function (grunt) {
  grunt.loadNpmTasks('grunt-connect-proxy');

[...]

connect: {
  options: {
    port: 9000,
    // Change this to '0.0.0.0' to access the server from outside.
    hostname: 'localhost',
    livereload: 35729
  },
  dev: {
    proxies: [
    {
      context: '/api/v1',
      host: '127.0.0.1',
      port: 3000,
      https: false,
    }
    ]
  },
  pro: {
    appendProxies: false,
    proxies: [{
      context: '/api',
      host: 'example.org'
    }]
  },
  livereload: {
    options: {
      open: true,
      middleware: function (connect) {
        return [
          require('grunt-connect-proxy/lib/utils').proxyRequest,
          connect.static('.tmp'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ),
          connect().use(
            '/app/styles',
            connect.static('./app/styles')
          ),
          connect.static(appConfig.app)
        ];
      }
    }
  },
  test: {
    options: {
      port: 9001,
      middleware: function (connect) {
        return [
          connect.static('.tmp'),
          connect.static('test'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ),
          connect.static(appConfig.app)
        ];
      }
    }
  },
  dist: {
    options: {
      open: true,
      base: '<%= yeoman.dist %>'
    }
  }
},

[...]

grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
if (target === 'dist') {
  return grunt.task.run(['build', 'connect:dist:keepalive']);
}

  grunt.task.run([
    'clean:server',
    'wiredep',
    'concurrent:server',
    'postcss:server',
    'configureProxies:dev',
    'connect:livereload',
    'watch'
  ]);
});


grunt.registerTask('build', [
  'clean:dist',
  'configureProxies:pro',
  'wiredep',
  'useminPrepare',
  'concurrent:dist',
  'postcss',
  'ngtemplates',
  'concat',
  'ngAnnotate',
  'copy:dist',
  'cdnify',
  'cssmin',
  'uglify',
  'filerev',
  'usemin',
  'htmlmin'
]);

I got this in angular console:

Running "configureProxies:dev" (configureProxies) task
Proxy created for: /api/v1 to 127.0.0.1:3000

my ngResource:

'use strict';

/**
 * @ngdoc service
 * @name doMasApp.Client
 * @description
 * # Client
 * Service in the doMasApp.
 */
angular.module('doMasApp')
.factory('Client', [
    '$resource',
    function ($resource) {
      var client = $resource(
          '/clients/:id',
          { id: '@id' },
          {
            query: { isArray: false },
            update: { method: 'PUT' }
          });
      return client;
    }])
;

but when I try to connect to server and get resource, I got this:

GET http://localhost:9000/clients 404 (Not Found)

please help!!!


Solution

  • the factory url must be like this:

    angular.module('doMasApp')
    .factory('Client', [
        '$resource',
        function ($resource) {
          var client = $resource(
              '/aoi/v1/clients/:id',
              { id: '@id' },
              {
                query: { isArray: false },
                update: { method: 'PUT' }
              });
          return client;
        }])
    ;
    

    the proxy context must be added to the factory url.