Add Angular generator

[mysiar]

Add Angular generator to API-Platform client-generator.
With React, Vue.js and shortly coming React Native this could be the most comprehensive front app support for API-Platform

[dunglas]

There is an existing community project: https://github.com/momenttech/lysis, see momenttech/lysis#1.

(ping @momenttech)

[sbacem]

Any news for this ?

[mysiar]

@sbacem you are more than welcome to develop this if you are interested

[sbacem]

I am very interested, but i haven't time to do it 😞 😞

[dunglas]

You can try https://github.com/momenttech/lysis

[luca-nardelli]

Hi all, I'm writing under this issue because I also was looking for an Angular generator.

I've just tried lysis on a project of mine but I got some errors:

Starting API 'http://localhost/api/docs.jsonld'...
Error for API 'http://localhost/api/docs.jsonld'
The class http://www.w3.org/ns/hydra/core#ApiDocumentation doesn't exist.

Did anyone manage to make it work recently?

In any case, I've started to work on a generator for Angular.
Is there a minimum set of features that should be present in the generator in order to merge that?

At the moment, I'm generating the following for each resource:

• Interface class (the same as the typescript generator)
• Service class: this handles getCollection,addItem,getItem,putItem,deleteItem operations

plus an utils file that handles some common stuff.

I also wanted to handle subresources, but it seems quite complicated to do with the current data that's parsed from the Hydra documentation. Does anyone from the maintainers know of an easy way to handle subresources?

Anyway, this is an example of generated files from a project of mine with the current generator:

Resource Interface:

import { Company } from "./company";

export interface Client {
  '@id'?: string;
  id: string;
  name?: string;
  legalName?: string;
  legalAddressCity?: string;
  legalAddressStreet?: string;
  legalAddressStreetNumber?: string;
  legalAddressZipcode?: string;
  phone?: string;
  email?: string;
  vatNumber?: string;
  taxNumber?: string;
  readonly updatedAt?: Date;
  readonly createdAt?: Date;
  readonly agency?: Company;
  readonly locationsCount?: number;
}

Resource service:

import { Client } from "../interfaces/client";
import { HttpClient } from "@angular/common/http";
import { APIPlatformPagedCollection } from "../utils/utils";
import { Inject, Injectable} from '@angular/core';

@Injectable()
export class ClientService {

  constructor(
    private http: HttpClient,
    @Inject('BASE_API_URL') private baseUrl: string
  ) {
  }

  getCollection(){
    return this.http.get<Client>(`${this.baseUrl}/api/clients`);
  }

  addItem(item: Client){
    return this.http.post<Client>(`${this.baseUrl}/api/clients`, item);
  }

  getItem(id: string){
    return this.http.get<Client>(`${this.baseUrl}/api/clients/${id}`);
  }

  updateItem(item: Client){
    return this.http.put<Client>(`${this.baseUrl}/api/clients/${item.id}`, item);
  }

  deleteItem(id: string){
    return this.http.delete<{}>(`${this.baseUrl}/api/clients/${id}`);
  }
}

Utils file:

export interface APIPlatformPagedCollection<T> {
  "hydra:totalItems"?: number;
  "hydra:member"?: T[];
  "@context"?: string;
  "@id"?: string;
  "@type"?: string;
  "hydra:view"?: {
    "@id"?: string;
    "@type"?: string;
    "hydra:first"?: string;
    "hydra:last"?: string;
    "hydra:previous"?: string;
    "hydra:next"?: string;
  };
}

export interface APIPlatformCollection<T> {
  "hydra:totalItems"?: number;
  "hydra:member"?: T[];
  "@context"?: string;
  "@id"?: string;
  "@type"?: string;
}

[simocheccoli]

Hi @dunglas, is there the possibility that this angular generator will be developed by core members?

[dunglas]

@simocheccoli I'm not aware of any core member working on this (nor using Angular actually), but we'll be glad to merge a generator if the community contributes one!

[simocheccoli]

@dunglas we can try it! maybe with @luca-nardelli helps

[simocheccoli]

@dunglas we are creating a dummy angular generator with @luca-nardelli 😄
We also want generate a simple material design template angular generator, maybe next week we can sumbit a pr

[krstns]

Hello. Are there any updates on this?

[dunglas]

No, but a contribution is still very welcome.

[simocheccoli]

@dunglas @krstns we are still working about it