reyesoft/ngx-jsonapi

JSON API client library for Angular 5+ 👌 :: Production Ready 🚀

ngx-jsonapi's Issues

Bug: The package sorts all incoming data by "id" automatically.

As the title states, this package sorts all incoming data by "id" and does not preserve the original order.

This is a problem as we have specific ordering coming out of our backend based on remote "sort" parameters (supported by the JSON-API spec).

Pagination zero indexed support

Hi, i've noticed when using the integrated pagination feature that it does not support zero as start index which although it is not common practice is a possibility that should be considered.
I found che in the "PathCollectionBuilder" class the following control
if (params.page.number > 1) { this.addParam(Core.injectedServices.rsJsonapiConfig.parameters.page.number + '=' + params.page.number); }
cause that the page param with 0 and 1 index will not be included.

Demo site is broken

Performing pretty much any action bring a console error, and breaks.

Eager loaded relations aren't correctly populated

Maybe we are just missing something. But we run into the issue that relations loaded thought the ?include= parameter aren't correctly populated when the service beloning to that service isn't registered manually.

If the service belonging to the related object isn't loaded the relation has an id but the content variable has the value none.

You can also see this behavior in the demo:

• If you go directly to http://ngx-jsonapi.reyesoft.com/#/authors/1 you don't see any books.
• If you navigate then to books and go back to this author then you see the books are visible

We added the following workaround to app.module.ts of our project:

export class AppModule {
    // temp workaround to be sure nested relations are correctly loaded/filled
    constructor(protected usersService: UsersService) {
        usersService.register();
    }
}

Header missing

So far only tried the get, but the header is missing. So If following the standard I get a http error 406.

I've tried with both with the rc branch with observables and the master one.

Entity without relationships has unexpected behaviour

One of my entities there's no relationships and it's seems like the api json service always looking for this property.
After fetching i'm get only the first entity and catch throw this error:

"__zone_symbol__currentTask": {
    "type": "microTask",
    "state": "notScheduled",
    "source": "Promise.then",
    "zone": "angular",
    "cancelFn": null,
    "runCount": 0
  }

Can't build when using Angular 4.3

The readme states that the library is compatible with Angular 4+ but when building the project we run into the next error:

ERROR in Error: Metadata version mismatch for module node_modules/ngx-jsonapi/index.d.ts, found version 4, expected 3, resolving symbol AppModule in app/app.module.ts, resolving symbol AppModule in app/app.module.ts, resolving symbol AppModule in app/app.module.ts

The pagination does not work

Given instance xService of service XService extends Service,
when I call

xService.all(
  {
    page: { number: 3, limit: 10 },
    include: ['y']
  },
  success => {},
  error => {}
);

I expect to see a request GET x?include=y&page[number]=3&page[limit]=10,
but instead I see GET x?include=y.

Add resource to collection without saving

I am trying to use this along with webhooks in my application. For instance, when I have a new notification, my Angular application receives the JSON of the new notification. I need to be able to do two things:

• I need to make sure this resource does not already exist in the collection.
• If it does not already exist in the collection, I need a way to add it to the collection without saving it to the API (since it came from the server in the first place).

Is there a way to extend .new() to allow me to

1. create the resource using the JSON from my webhook.
2. verify no duplicate resource already exists in the collection (match id or the full object)
3. add the resource to the collection (updating the observable in my controller)

Observable errors on Angular 6.1.0

With the update to rxjs, I am receiving errors using the npm installed package.
...rxjs/Observable"' has no exported member 'Observable'

npm install rxjs-compat@6 --save Fixes this for the time being, but locations need to be updated. Not sure if this is an issue if installed through git.

Thanks,
Brad

resource.save() is broken in 1.0.1

Pull request #89 seems to have completely broken sending data to the server. Now I only get empty requests. The problems appears to be on this line where the data params never gets sent to JsonapiHttp.exec():

ngx-jsonapi/src/core.ts

Line 57 in dc8b558

let fakeHttpPromise = Core.injectedServices.JsonapiHttp.exec(path, method);

How to disable all caching?

The caching mechanism seems pretty buggy around relationships and removal/add operations. I'd like to fully disable any caching but I don't see a flag for it?

Issue saving the resource

Testing the code:

    let user = this.usersService.new();
    user.attributes.userName = this.f.username.value;
    user.attributes.password = this.f.password.value;
    user.save();

i realized that it does not do anything because the save method in the class Resource does this control

        if (this.is_saving || this.is_loading) {
            return of({});
        }

and is_loading property is initialized to true.
The demo does not work either.

How to send doimain auth cookies through resource's request?

Hello guys,

I'm creating an app that is deployed in my domain, lets say 'company.com.br', and this domain has some cookies for the authetication, my app is in another url in the same domain like 'app.company.com.br'.

All the requests for statics resouces are taking the cookies correctly, but the jsonapi requests doesn't..

Does anyone can help?

Nested include breaks CacheStore#setCollection

Is the nested include supported?

.all({ include: 'comments.author' })

On version 1.1.1 when trying to query with the above it breaks with stack trace:

marketplace.component.ts:27 TypeError: Cannot read property 'data' of undefined
    at eval (ngx-jsonapi.es5.js:1956)
    at Array.forEach (<anonymous>)
    at eval (ngx-jsonapi.es5.js:1955)
    at eval (ngx-jsonapi.es5.js:351)
    at Array.forEach (<anonymous>)
    at Function.Base.forEach (ngx-jsonapi.es5.js:350)
    at CacheStore.setCollection (ngx-jsonapi.es5.js:1952)
    at eval (ngx-jsonapi.es5.js:2355)
    at ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:4760)

The resource_type_alias is "comments.author", so resource.relationships[resource_type_alias].data can never work.

version 2.0.0

TODO:

• IResource deprecated. Document relationships are an IDocument too.
• all() return an IDocument, ICollection deprecated. All data collections are on data member and with Array format.
• Remove migration situation compatibility 1.1 to 2.0: relations with .data.data member.
• localfilter deprecated.
• update README.
• Migration docs.
• callbacks on requests removed.
• all actions (get, all, delete, save) return an observable.
• Deprecate schemas.
• collection.hasMorePages() method (boolean|null).

localfilter not working in 1.0.0-rc.10

We're using 1.0.0-rc.10 and see that 'localfilter' has not any effect at all: all resources are returned always. When configuring the 'remotefilter' with the same attribute/value the filter works as expected, thus the attribute name must be correct.

Include the data loaded is behaving differently when cache is enabled

Include the data loaded is behaving differently when cache is enabled

Without cache or first time when loaded

With Cache after first time

new Error instances return an empty object

When recieving an error, the library correctly displays the error in console, but when instantiating the Error class inside exec method (return throwError(new Error(error));), it returns an empty object.

#39 Seems to not be fixed.

I'm getting the same error. #39

my code has not changed. I'm using the latest v.

Promisify

It's more a couple questions than an actual bug.

I'm new to angular 5 and I was wondering if with this library there is a way to promisify it, to chain it. Tried few things but feeling a bit confused about it.

Thx for the library anyway. It's looking good.

Accept Header

Is there any way to pass extra headers into the http service? I can't see any way, but I don't know if you have a branch with this changes or not.
In my API I do expect the Accept header with the application/vnd.api+json, as the standard defines. Not fully clued with the standard yet but I believe that is expected in some cases so probably should be there.

Thx for the push that you've been doing last week 👍

New requests sends empty ID string.

I've noticed when calling new() you're sending a empty string along with the ID attribute. This goes against the specification and causes headaches on servers expecting nothing.

For example, using a Spring boot backend and Mongo as the datastore, saving the payload will result in the object having "" as it's ID, rather than mongo generating a new one.

See http://jsonapi.org/format/#crud-creating, specifically:

A server MAY accept a client-generated ID along with a request to create a resource. An ID MUST be specified with an id key, the value of which MUST be a universally unique identifier.

A empty string isn't a UUID ;)

Calling new() on a Service not working

When I try to call new() on my Services I get a Cannot read property 'scheme' of undefined. error. The error is being thrown in the rest method of the Resource class on the below line.

Base.forEach(this.getService().schema.relationships, (value, key) => {

Here is a screenshot of the actual console error.

Nest Include breaks CacheStore#setCollection

Is the nested include supported?

.all({ include: 'comments.author' })

On version 1.1.1 when trying to query with the above it breaks with stack trace:

marketplace.component.ts:27 TypeError: Cannot read property 'data' of undefined
    at eval (ngx-jsonapi.es5.js:1956)
    at Array.forEach (<anonymous>)
    at eval (ngx-jsonapi.es5.js:1955)
    at eval (ngx-jsonapi.es5.js:351)
    at Array.forEach (<anonymous>)
    at Function.Base.forEach (ngx-jsonapi.es5.js:350)
    at CacheStore.setCollection (ngx-jsonapi.es5.js:1952)
    at eval (ngx-jsonapi.es5.js:2355)
    at ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:4760)

The resource_type_alias is "comments.author", so resource.relationships[resource_type_alias].data can never work.

Path property to public scope

I can see that a custom path can be given

ngx-jsonapi/src/service.ts

Lines 76 to 78 in 5cd065c

	public getPath(): string {
	return this.path ? this.path : this.type;
	}

But as path is private property it throws error while extending it in the child class, so it is better to change it to public property

ngx-jsonapi/src/service.ts

Line 34 in 5cd065c

private path: string; // without slashes

TypeError: Cannot read property 'cachestore' of undefined

Hello,
I'm facing this error when trying to get data from server with .all() method. I can see in the browser that I'm getting correct response, but there is no data in the object. What can it mean, what should I check? Should I provide some code? Thank you for your help.

TypeError: Cannot read property 'cachestore' of undefined
    at ResourceRelationshipsConverter.push../node_modules/ngx-jsonapi/ngx-jsonapi/@ngx-jsonapi/ngx-jsonapi.es5.js.ResourceRelationshipsConverter.__buildRelationship (ngx-jsonapi.es5.js:1073)
    at ResourceRelationshipsConverter.push../node_modules/ngx-jsonapi/ngx-jsonapi/@ngx-jsonapi/ngx-jsonapi.es5.js.ResourceRelationshipsConverter.__buildRelationshipHasOne (ngx-jsonapi.es5.js:1059)
    at ResourceRelationshipsConverter.push../node_modules/ngx-jsonapi/ngx-jsonapi/@ngx-jsonapi/ngx-jsonapi.es5.js.ResourceRelationshipsConverter.buildRelationships (ngx-jsonapi.es5.js:950)
    at Function.push../node_modules/ngx-jsonapi/ngx-jsonapi/@ngx-jsonapi/ngx-jsonapi.es5.js.Converter._buildResource (ngx-jsonapi.es5.js:1242)
    at Function.push../node_modules/ngx-jsonapi/ngx-jsonapi/@ngx-jsonapi/ngx-jsonapi.es5.js.Converter._buildCollection (ngx-jsonapi.es5.js:1214)
    at Function.push../node_modules/ngx-jsonapi/ngx-jsonapi/@ngx-jsonapi/ngx-jsonapi.es5.js.Converter.build (ngx-jsonapi.es5.js:1155)
    at ngx-jsonapi.es5.js:2354
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:3671)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)

Additional header

Hi,
How I can send additional header with all requests?
I want to send Bearer token.thank you

How to add custom actions

I am trying to add custom actions beyond the typical crud operations. Is there a way to do that with this package?

Change api url after app loading

There is a way to change the api path after loading? I'm trying to load the api path from configuration JSON file for dynamic config options in production and set the url only after the config file loading.

Don't include empty relationships when serializing a resource object

A resource object in JSONAPI must have a type and an id. I propose that relationships that have not been set on a resource object not be serialized with an empty data object. Instead, they simply not be included in the serialization. Alternately, I propose an isRequired Boolean attribute be add to the relationship schema definition in a Service and if this is set to false and the relationship is empty don't include it in the serialization.
Location of code for proposed change:

ngx-jsonapi/src/resource.ts

Line 111 in 9c52a1a

relationships[relation_alias] = { data: {} };

I can find some time to work on this if one of these solutions sounds good.

Authenticated service

Hello,
I'm trying to use ngx-jsonapi with oAuth2 authentication.
Could you tell me if it is feasible? Is there any documentation on it?
Thank you.

TypeError: Cannot read property 'cachememory' of undefined

i a, getting below error when calling the Service

TypeError: Cannot read property 'cachememory' of undefined
    at Function.webpackJsonp../node_modules/ngx-jsonapi/ngx-jsonapi/@ngx-jsonapi/ngx-jsonapi.es5.js.Converter._buildCollection (ngx-jsonapi.es5.js:1174)
    at Function.webpackJsonp../node_modules/ngx-jsonapi/ngx-jsonapi/@ngx-jsonapi/ngx-jsonapi.es5.js.Converter.build (ngx-jsonapi.es5.js:1148)
    at ngx-jsonapi.es5.js:2426
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:4749)
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:858
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4740)

[Suggestion] Allow end user to assign meta values

As title suggests it will be helpful if the assignment of meta values can be given though the services file

For example the pagination values

ngx-jsonapi/src/services/converter.ts

Lines 130 to 134 in 2f64df2

	collection_dest.page.number = collection_data_from.meta.page || 1;
	collection_dest.page.resources_per_page =
	collection_data_from.meta.resources_per_page || null;
	collection_dest.page.total_resources =
	collection_data_from.meta.total_resources || null;

Should remotefilter be encoding [ ]?

I've noticed when using remotefilter it's sending the a request that looks like http://localhost:8082/steaks?filter[color]=blue which blows up my (and probably most peoples) backend services as [] are not allowed characters.

Should it be encoded first, or am I supposed to do that myself?

Why is there a log in the code

ngx-jsonapi/src/services/localfilter.ts

Line 42 in c69b504

console.log('y quedó así', dest_collection);

Error when using toPromise

On the latest rc if I try to use the observable and the function toPromise the console spits an error.

Example not working

I copy pasted the example in a newly generated angular project. I get the following error in the AuthorsComponent

[ts]
Type 'Observable<ICollection<Resource>>' is not assignable to type 'ICollection<Resource>'.
  Property '$length' is missing in type 'Observable<ICollection<Resource>>'.

This occurs in the line

this.authors = authorsService.all(

"@angular/common": "^5.0.0",
"ngx-jsonapi": "^1.0.0-rc.0",

Save method from Resource not working well, at least for new resources.

Hi,

After create new resource for e.g: new(), and then save it save(), I received 201 from server, and entity is created.

Unfortunatelly, I also see error in my code something like this

TypeError: Cannot read property 'attributes' of undefined
    at Function.Converter._buildResource (ngx-jsonapi.es5.js:1162)
    at Function.Converter.build (ngx-jsonapi.es5.js:1120)

Propably I found the reason.

Reponse from server looks like

data: {
   ....
   attributes: { },
   id: {}
.....
}

After response from server, we try to convert result
conver_after_response.
We are send success.data into Converter.build method.
Converter.build method passes undefined content in this line
document_from.data and next exception is thrown.
It is undefined because data property was extracted before (success.data).

Temporary workaround for this problem is passing success instead of success.data to Converter.build.

Thanks,
Leszek

How can I sort the table information from the server

Hi friends
How can I sort the table information from the server, for example, how can I sort the names of a table alphabetically by server?

How do i add authentication to the demo?

I have tried adding a login component and authentication to the demo example but not working,
any help will be appreciated.

How to update?

Hi I've tried to update one of my reults following the example but does not seem to be liking it.

I've tried with this code:

this._categoryService.get(categoryId)
                .toPromise()
                .then((category) => {
                    category.attributes.name = this.form.get('name').value;
                    category.attributes.description = this.form.get('description').value;
                    return category.save();
                })
                .then((response) => {
                    console.log('all good');
                })
                .catch((error) => {
                    console.error(error);
                });

But i keep recieving the error attached. Also tried with .subscribe but I've got a similar result. I've tried checking the demo site but can't it to work.

Resource when cached is not loading during "GET" call

After investigating found that

ngx-jsonapi/src/service.ts

Lines 172 to 191 in 19ef509

	let temporal_ttl = params.ttl || 0; // this.schema.ttl
	if (this.getService().cachememory.isResourceLive(id, temporal_ttl)) {
	// we create a promise because we need return collection before
	// run success client function
	let promise: Promise<void> = new Promise(
	(resolve, reject): void => {
	resolve(fc_success);
	promise
	.then(fc_success2 => {
	console.warn('ngx-jsonapi: THIS CODE NEVER RUN, RIGHT? :/ Please check.');
	subject.next(resource);
	this.runFc(fc_success2, 'cachememory');
	})
	.catch(noop);
	resource.is_loading = false;
	}
	);
	subject.next(resource);
	subject.complete();

this is what is causing the resource not been called

ngx-jsonapi/src/service.ts

Line 190 in 19ef509

subject.complete();

Removing subject.complete(); makes the code work fine

I believe subjects once completed cannot emit any longer

async/await problem - how to handle it

Hi,

Please, take a look on following code.

DeviceService

@Injectable()
export class DeviceService extends Service {
   async getAllDevices(): Promise<any> {
        console.log('START');
        const d = await this.all().toPromise(); //super.all().toPromise()
        console.log('FINISH');
        return d;
}

Component

export class DevicesListComponent {
......
   async ngOnInit() {
       const data1 = await this.devicesService.getAllDevices(); //  not working
       console.log('THIS TEXT IS NOT DISPLAYED');
       const data2 = await this.devicesService.all().toPromise(); // without 'proxy' function - not working too
       console.log('THIS TEXT IS NOT DISPLAYED');   
  }
...
}

During reading data1 or data2 there is no error in console. Only START is displayed.
When I open Network tab in Chrome dev-tools, I see that request is finished with success and even return correct data.

Do you know how I should handle async/await when I use ngx-jsonapi ?

Kind Regards,
Leszek

error in ng serve

Hi I got this error on ng serve:

ERROR in Error: Metadata version mismatch for module C:/Users/zahra/Desktop/Tatomic/atomic-blank-v1.0.4/node_modules/ngx-jsonapi/index.d.ts, found version 4, expected 3, resolving symbol AppModule in C:/Users/zahra/Desktop/Tatomic/atomic-blank-v1.0.4/src/app/app.module.ts, resolving symbol AppModule in C:/Users/zahra/Desktop/Tatomic/atomic-blank-v1.0.4/src/app/app.module.ts, resolving symbol AppModule in C:/Users/zahra/Desktop/Tatomic/atomic-blank-v1.0.4/src/app/app.module.ts
at syntaxError (C:\Users\zahra\Desktop\Tatomic\atomic-blank-v1.0.4\node_modules@angular\compiler\bundles\compiler.umd.js:1729:34)
at simplifyInContext (C:\Users\zahra\Desktop\Tatomic\atomic-blank-v1.0.4\node_modules@angular\compiler\bundles\compiler.umd.js:25111:23)
at StaticReflector.simplify (C:\Users\zahra\Desktop\Tatomic\atomic-blank-v1.0.4\node_modules@angular\compiler\bundles\compiler.umd.js:25123:13)
at StaticReflector.annotations (C:\Users\zahra\Desktop\Tatomic\atomic-blank-v1.0.4\node_modules@angular\compiler\bundles\compiler.umd.js:24553:41)
at _getNgModuleMetadata (C:\Users\zahra\Desktop\Tatomic\atomic-blank-v1.0.4\node_modules@angular\compiler-cli\src\ngtools_impl.js:138:31)
at _extractLazyRoutesFromStaticModule (C:\Users\zahra\Desktop\Tatomic\atomic-blank-v1.0.4\node_modules@angular\compiler-cli\src\ngtools_impl.js:109:26)
at Object.listLazyRoutesOfModule (C:\Users\zahra\Desktop\Tatomic\atomic-blank-v1.0.4\node_modules@angular\compiler-cli\src\ngtools_impl.js:53:22)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Users\zahra\Desktop\Tatomic\atomic-blank-v1.0.4\node_modules@angular\compiler-cli\src\ngtools_api.js:91:39)
at AotPlugin._getLazyRoutesFromNgtools (C:\Users\zahra\Desktop\Tatomic\atomic-blank-v1.0.4\node_modules@ngtools\webpack\src\plugin.js:241:66)
at _donePromise.Promise.resolve.then.then.then.then.then (C:\Users\zahra\Desktop\Tatomic\atomic-blank-v1.0.4\node_modules@ngtools\webpack\src\plugin.js:495:24)
at
at process._tickCallback (internal/process/next_tick.js:188:7)

Success on connection refused

When connection refused .map() still invoked and .catch() immediately after.

    this.rolesService
      .all() <= Connection refused
      .filter(data => !data.$is_loading)
      .map(data => {  <= Map triggered.
        return new roles.LoadSuccessAction(data.$toArray)
      })
      .catch(error => { <= And catch immediately after.
        return Observable.of(new roles.LoadFailedAction(error)) 
      })

Proper way to sort data

I have paginated data coming in from the server and I need to be able to sort the data. I have the sorts working properly on the server side, but obviously this package sorts by Id automatically so it ignores any sorting. Is there a way you recommend or know of that will all the data to be sorted or is this just a huge flaw in this package?

having problems replicating the demo site on Angular 6

I get the error

zone.js:665 Unhandled Promise rejection: Cannot read property 'driver' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'driver' of undefined
    at localforageGetItems (localforage-getitems.js:213)
    at new StoreService (ngx-jsonapi.es5.js:882)
    at _createClass (core.js:8419)
    at _createProviderInstance (core.js:8393)
    at initNgModule (core.js:8326)
    at new NgModuleRef_ (core.js:9052)
    at createNgModuleRef (core.js:9041)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.js:10866)
    at NgModuleFactory_.push../node_modules/@angular/core/fesm5/core.js.NgModuleFactory_.create (core.js:11583)
    at core.js:4313 TypeError: Cannot read property 'driver' of undefined
    at localforageGetItems (http://localhost:4200/vendor.js:73567:49)
    at new StoreService (http://localhost:4200/vendor.js:77594:69)
    at _createClass (http://localhost:4200/vendor.js:47241:20)
    at _createProviderInstance (http://localhost:4200/vendor.js:47215:26)
    at initNgModule (http://localhost:4200/vendor.js:47148:32)
    at new NgModuleRef_ (http://localhost:4200/vendor.js:47874:9)
    at createNgModuleRef (http://localhost:4200/vendor.js:47863:12)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (http://localhost:4200/vendor.js:49688:12)
    at NgModuleFactory_.push../node_modules/@angular/core/fesm5/core.js.NgModuleFactory_.create (http://localhost:4200/vendor.js:50405:25)
    at http://localhost:4200/vendor.js:43135:43

using

"@angular/cli": "~6.1.5",
"ngx-jsonapi": "^2.0.0-rc.1",

Add support for rxjs 6

Now we are on Angular 6 and rxjs 6. It's a shame to use rxjs-compat.

Does not work properly with Angular 6

When you try to use this plugin with Angular 6 you get the error:

Cannot find module 'rxjs-compat/Observable'

Adding this works for now, but Angular has changed how it uses Observables so this should be changed for the future.