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 https://github.com/momenttech/lysis/issues/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

[jalexmelendez]

@simocheccoli any updates? I'd like to contribute to the project if needed.

[metaclass-nl]

A good starting point for making a generator is an example client app that works with Api Platform. One then builds a generator that generates the same app code. I followed this proces with my tutorial and the accompanying extended generators for react and next.js.

I even added working Angular app examples:

• a basic SPA. However, to make it work with all data types chapter 2 needs to be added.
• an SPA with internationalization and localization) that can be the starting point once the code from chapter 2 is internationalized and localized.

But my extended generators did get little stars so i did not bother to make one for Angular. However, if someone would like to sponsor me i would be happy to develop a generator similar the the react or next.js generator.

BTW, Angular also supports PWA, similar to next.js but i did not look into that.