Angular bad config Error: [$resource:badcfg] query

I am trying to connect spotify api with node js and angular js.I am getting this error whenever i try to get the details of particular artist.

app.js

 var app = angular.module('angularjs-starter', ['jsonService', 'ngRoute', 'ngResource'])

app.controller('MainCtrl', function($scope, JsonService) {
    //JsonService.get(function(data) {
    //   $scope.name = data.artists.href;
    // $scope.children = data.artists.items;
    //}); 

    $scope.searchShow = () => {
        JsonService.search.query({
            show: $scope.showname
        }, (response) => {
            console.log(response);
            //   $scope.name = response.artists.href;
            $scope.childr = response;
            $scope.children = response;

        })
    }
    $scope.showDetails = (id) => {
        console.log(id);
        JsonService.detail.query({

            details: id
        }, (response) => {
            console.log(response);
            //   $scope.name = response.artists.href;

        })
    }

});
app.config(['$locationProvider', function($locationProvider) {
    $locationProvider.hashPrefix('')
}])
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    $routeProvider
        .when('/', {
            templateUrl: 'views/search.html',
            controller: 'MainCtrl'
        })
        .when('/details', {
            templateUrl: 'views/details.html',
            controller: 'MainCtrl'
        })
        .otherwise({
            redirectTo: '/'
        })

}])

service.js

angular.module('jsonService', ['ngResource'])
    .factory('JsonService', function($resource) {
        return {

            search: $resource('/api/search'),
            detail: $resource('/api/details')
        }
    });

routes.js-from node js server

const
    express = require('express'),
    path = require('path'),
    router = express.Router(),
    superagent = require('superagent')

module.exports = () => {

    router.get('/api/search', (req, res) => {
        const { show } = req.query // this is the same as const show = req.query.show
        console.log(show);
        superagent
            .get('https://api.spotify.com/v1/search?q=' + show + ':&type=artist')
            .end((err, response) => {
                if (err) {
                    res.send(err);
                    console.log(err);
                } else {
                    console.log(response.body.artists.items);
                    res.json(response.body.artists.items);

                }

            })
    })


    router.get('/api/details', (req, res) => {
        const { details } = req.query // this is the same as const show = req.query.show
        console.log(details);
        superagent
            .get('https://api.spotify.com/v1/artists/' + details)
            .end((err, response) => {
                if (err) {
                    res.send(err);
                    console.log(err);
                } else {
                    res.json(response.body);

                }

            })
    })
    router.get('*', (req, res) => {
        res.sendFile(path.join(__dirname, '../client/index.html'))
    })

    return router
}

Node js is able to get the values from details but i am not able to get the values to the ui

via Ash