I have an AngularJS + TypeScript app and I keep getting the following error:
Error: $resource:badcfg Response does not match configured parameter
Error in resource configuration for action: Expected response to contain an get but got an object (Request: array GET)
My AngularJS version is 1.4.8 and TypeScript version is 3.0.1. My tsconfig.json looks like this:
{
"compileOnSave": true,
"compilerOptions": {
"allowJs": true,
"lib": [ "dom", "es5", "scripthost" ],
"noImplicitAny": true,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5"
},
"include": [
"App/TypeScriptCode/**/*.ts",
"typings"
],
"exclude": [
"node_modules",
"definitions",
"wwwroot",
"App/Old",
"Scripts",
"*.js"
]
}
And here is my package.json
{
"dependencies": {
"@types/angular": "^1.6.49",
"@types/angular-resource": "^1.5.14",
"@types/uuid": "^3.4.3",
"npm": "^6.3.0",
"ts-node": "^7.0.0"
},
"devDependencies": {
"angular": "1.5.0",
"bootstrap": "3.3.6",
"grunt": "0.4.5",
"grunt-bower-task": "0.4.0",
"typescript": "^3.0.1",
"typings": "1.3.0"
},
"name": "my-app",
"private": true,
"scripts": {
"demo": "./node_modules/.bin/ts-node ./test.ts"
},
"version": "1.0.0"
}
The error happens in function GetEmployeeTypes in the following controller:
namespace App {
'use strict';
class EmployeeTypeController {
noRecords: boolean;
employeeTypeApi: IEmployeeTypeApi;
storage: ngStorage.IStorageService;
///
public constructor($localStorage: ngStorage.IStorageService, employeeTypeApi: IEmployeeTypeApi) {
this.noRecords = true;
this.employeeTypeApi = employeeTypeApi;
this.storage = $localStorage;
this.GetEmployeeTypes();
}
///
public GetEmployeeTypes(): void {
const employeeTypes: IEmployeeType[] = this.employeeTypeApi.employeeType.get(function success(): void {
this.storage.employeeTypes = employeeTypes;
});
};
}
angular
.module('App')
.controller('EmployeeTypeController', EmployeeTypeController);
}
The api service EmployeeTypeApi for loading employee types from the backend looks like this:
namespace App {
'use strict';
export interface IEmployeeTypeApi {
employeeType: IEmployeeTypeClass;
}
export class EmployeeTypeApi implements IEmployeeTypeApi {
constructor(public $resource: angular.resource.IResourceService) {}
publishDescriptor: angular.resource.IActionDescriptor = {
method: 'GET',
isArray: true
};
public employeeType: IEmployeeTypeClass = this.$resource<IEmployeeType[], IEmployeeTypeClass>('https://localhost:44300/api/employeetypes', null, {
publish: this.publishDescriptor
});
}
// Now register the service with the Angular app
angular
.module('App')
.service('employeeTypeApi', EmployeeTypeApi);
}
And finally, here are IEmployeeType and IEmployeeTypeClass:
namespace App {
export interface IEmployeeType extends angular.resource.IResource<IEmployeeType> {
id: number;
clientId: number;
employeeTypeName: string;
description: string;
$publish(): IEmployeeType;
$unpublish(): IEmployeeType;
}
}
namespace App {
export interface IEmployeeTypeClass extends angular.resource.IResourceClass<IEmployeeType[]> {
get(): IEmployeeType[] ;
get(onSuccess: Function): IEmployeeType[];
publish(): IEmployeeType[];
}
}
So what I am trying to achieve here is to load an array of IEmployeeType objects from the backend. The backend itself is an ASP.NET Web API 2 service, consisting of a number of controllers. I've verified that the controller for loading Employee Type data is correctly called and it does return an array of EmployeeType instances, meaning the problem is most likely somewhere in the front end code.
As you can see in EmployeeTypeApi, I've clearly set the isArray flag to "true", so I am not sure why the error is occurring. What am I doing wrong here?
The problem was the following, in EmployeeTypeApi I have a definition for how the "publish" method should behave, i.e. this:
publishDescriptor: angular.resource.IActionDescriptor = {
method: 'GET',
isArray: true
};
However, in my EmployeeTypeController, I call the "get" method instead:
const employeeTypes: IEmployeeType[] = this.employeeTypeApi.employeeType.get(function success(): void {
this.storage.employeeTypes = employeeTypes;
});
Since there was no definition of how "get" should behave, i.e. what request method to use and what data type to expect, it defaulted to expecting an object and thus it produced the error I outlined in my original post.
Once I replaced "get" with "publish" in the controller, the error went away. Of course, the better solution is to set the "isArray" flag for "get" to true, but either way, the problem is solved now.