From aecd36061e71d545c1d12185fcc4f9eebeda264c Mon Sep 17 00:00:00 2001
From: Maxime Urbanski <maxime@les-tilleuls.coop>
Date: Wed, 12 Jun 2024 08:37:22 +0200
Subject: [PATCH] wip

---
 package.json                                  |  3 +-
 src/generators/AngularGenerator.js            | 27 ++++--
 src/generators/AngularGenerator.test.js       | 11 ++-
 .../common/table/table.component.html         | 86 +++++++------------
 .../common/table/table.component.ts           |  8 +-
 .../foo/create/create.component.html          |  2 +-
 .../components/foo/create/create.component.ts |  7 +-
 .../app/components/foo/edit/edit.component.ts | 10 +--
 .../components/foo/list/list.component.html   |  6 +-
 .../app/components/foo/list/list.component.ts | 23 +++--
 .../components/foo/show/show.component.html   |  2 +-
 .../app/components/foo/show/show.component.ts |  8 +-
 .../svg/edit-svg/edit-svg.component.svg       | 11 +++
 .../svg/edit-svg/edit-svg.component.ts        | 12 +++
 .../svg/list-svg/list-svg.component.css       |  0
 .../svg/list-svg/list-svg.component.spec.ts   | 23 -----
 .../svg/list-svg/list-svg.component.ts        |  1 -
 .../svg/show-svg/show-svg.component.svg       | 13 +++
 .../svg/show-svg/show-svg.component.ts        | 12 +++
 templates/angular/app/router/foo.ts           | 18 ++--
 templates/angular/app/service/api.service.ts  | 12 +--
 testapp.sh                                    | 24 ++++++
 testgen.sh                                    |  2 +-
 23 files changed, 178 insertions(+), 143 deletions(-)
 create mode 100644 templates/angular/app/components/svg/edit-svg/edit-svg.component.svg
 create mode 100644 templates/angular/app/components/svg/edit-svg/edit-svg.component.ts
 delete mode 100644 templates/angular/app/components/svg/list-svg/list-svg.component.css
 delete mode 100644 templates/angular/app/components/svg/list-svg/list-svg.component.spec.ts
 create mode 100644 templates/angular/app/components/svg/show-svg/show-svg.component.svg
 create mode 100644 templates/angular/app/components/svg/show-svg/show-svg.component.ts

diff --git a/package.json b/package.json
index 934c6692..d2d8934f 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,8 @@
     "test-react-app": "./testapp.sh react",
     "test-next-app": "./testapp.sh next",
     "test-vue-app": "./testapp.sh vue",
-    "test-nuxt-app": "./testapp.sh nuxt"
+    "test-nuxt-app": "./testapp.sh nuxt",
+    "test-angular-app": "./testapp.sh angular"
   },
   "lint-staged": {
     "src/**/*.js": "yarn lint --fix"
diff --git a/src/generators/AngularGenerator.js b/src/generators/AngularGenerator.js
index a7c7abff..9f7f50ac 100644
--- a/src/generators/AngularGenerator.js
+++ b/src/generators/AngularGenerator.js
@@ -36,6 +36,10 @@ export default class extends BaseGenerator {
       //SVG COMPONENT
       "app/components/svg/list-svg/list-svg.component.svg",
       "app/components/svg/list-svg/list-svg.component.ts",
+      "app/components/svg/show-svg/show-svg.component.svg",
+      "app/components/svg/show-svg/show-svg.component.ts",
+      "app/components/svg/edit-svg/edit-svg.component.svg",
+      "app/components/svg/edit-svg/edit-svg.component.ts",
       "app/components/svg/menu/menu.component.svg",
       "app/components/svg/menu/menu.component.ts",
 
@@ -89,8 +93,7 @@ export default class extends BaseGenerator {
     const hasIsRelation = fields.some((field) => field.isRelation);
     const hasIsRelations = fields.some((field) => field.isRelations);
     const hasDateField = fields.some((field) => field.type === "dateTime");
-
-    console.log(resource);
+    const formFields = this.buildFields(fields);
 
     const context = {
       title: resource.title,
@@ -98,7 +101,7 @@ export default class extends BaseGenerator {
       lc,
       uc: resource.title.toUpperCase(),
       fields,
-      formFields: this.buildFields(fields),
+      formFields,
       hydraPrefix: this.hydraPrefix,
       titleUcFirst,
       hasIsRelation,
@@ -106,6 +109,7 @@ export default class extends BaseGenerator {
       hasRelations: hasIsRelation || hasIsRelations,
       hasDateField,
     };
+    console.log("api ==>", api);
 
     //CREATE DIRECTORIES - These directories may already exist
     [
@@ -121,6 +125,8 @@ export default class extends BaseGenerator {
       `${dir}/app/components/common/sidebar`,
       `${dir}/app/components/common/table`,
       `${dir}/app/components/svg/list-svg`,
+      `${dir}/app/components/svg/show-svg`,
+      `${dir}/app/components/svg/edit-svg`,
       `${dir}/app/components/svg/menu`,
       `${dir}/app/interface`,
       `${dir}/app/router`,
@@ -131,6 +137,10 @@ export default class extends BaseGenerator {
     [
       "app/components/svg/list-svg/list-svg.component.svg",
       "app/components/svg/list-svg/list-svg.component.ts",
+      "app/components/svg/show-svg/show-svg.component.svg",
+      "app/components/svg/show-svg/show-svg.component.ts",
+      "app/components/svg/edit-svg/edit-svg.component.svg",
+      "app/components/svg/edit-svg/edit-svg.component.ts",
       "app/components/svg/menu/menu.component.svg",
       "app/components/svg/menu/menu.component.ts",
       "app/components/common/delete/delete.component.html",
@@ -150,15 +160,18 @@ export default class extends BaseGenerator {
     );
 
     [
+      "app/router/%s.ts",
+      "app/components/%s/list/list.component.html",
+      "app/components/%s/list/list.component.ts",
       "app/components/%s/create/create.component.html",
       "app/components/%s/create/create.component.ts",
       /*"app/components/%s/edit/edit.component.html",
       "app/components/%s/edit/edit.component.ts",
-      "app/components/%s/list/list.component.html",
-      "app/components/%s/list/list.component.ts",
-      "app/components/%s/show/show.component.html",
+      "app/components/%s/show/show.component.svg",
       "app/components/%s/show/show.component.ts",*/
-    ].forEach((file) => this.createFileFromPattern(file, dir, [lc], context));
+    ].forEach((file) =>
+      this.createFileFromPattern(file, dir, [lc, formFields], context)
+    );
   }
 
   parseFields(resource) {
diff --git a/src/generators/AngularGenerator.test.js b/src/generators/AngularGenerator.test.js
index c08e8781..8ec02f33 100644
--- a/src/generators/AngularGenerator.test.js
+++ b/src/generators/AngularGenerator.test.js
@@ -62,9 +62,14 @@ test("Generate a React app", () => {
   ].forEach((file) => expect(fs.existsSync(tmpobj.name + file)).toBe(true));
 
   [
-    "/components/abc/Form.tsx",
-    "/components/abc/List.tsx",
-    "/components/abc/Show.tsx",
+    "app/components/abc/create/create.component.html",
+    "app/components/abc/create/create.component.ts",
+    "app/components/abc/edit/edit.component.html",
+    "app/components/abc/edit/edit.component.ts",
+    "app/components/abc/list/list.component.html",
+    "app/components/abc/list/list.component.ts",
+    "app/components/abc/show/show.component.html",
+    "app/components/abc/show/show.component.ts",
     "/interfaces/Abc.ts",
   ].forEach((file) => {
     expect(fs.existsSync(tmpobj.name + file)).toBe(true);
diff --git a/templates/angular/app/components/common/table/table.component.html b/templates/angular/app/components/common/table/table.component.html
index 193a00ad..37be3692 100644
--- a/templates/angular/app/components/common/table/table.component.html
+++ b/templates/angular/app/components/common/table/table.component.html
@@ -16,59 +16,37 @@
   </tr>
   </thead>
   <tbody>
-    @for (item of items; track item) {
-      <tr>
-        <td class="w-2">
-          <input type="checkbox"
-                 name="test"
-                 [id]="item['@id']"
-                 [checked]="bulk.includes(item['@id']!)"
-                 (change)="addToBulk(item['@id']!)"
-          >
-        </td>
-        <td>{{ item['id'] }}</td>
-        <td>{{ item['name'] }}</td>
-        <td class="w-8">
-          <a [routerLink]="[item['@id']]" class="text-cyan-500">
-            Show
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-              class="w-6 h-6"
-            >
-              <path d="M12 15a3 3 0 100-6 3 3 0 000 6z"/>
-              <path
-                fill-rule="evenodd"
-                d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z"
-                clip-rule="evenodd"
-              />
-            </svg>
-          </a>
-        </td>
-        <td class="w-8">
-          <a [routerLink]="[item['id'], 'edit']" class="text-cyan-500">
-            Edit
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-              class="w-6 h-6"
-            >
-              <path
-                d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-8.4 8.4a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32l8.4-8.4z"/>
-              <path
-                d="M5.25 5.25a3 3 0 00-3 3v10.5a3 3 0 003 3h10.5a3 3 0 003-3V13.5a.75.75 0 00-1.5 0v5.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5V8.25a1.5 1.5 0 011.5-1.5h5.25a.75.75 0 000-1.5H5.25z"/>
-            </svg>
-          </a>
-        </td>
-      </tr>
-    } @empty {
-      <tr>
-        <td colspan="2" class="text-center italic p-6">
-          Pas de données.
-        </td>
-      </tr>
-    }
+  @for (item of items; track item) {
+  <tr>
+    <td class="w-2">
+      <input type="checkbox"
+             name="test"
+             [id]="item['@id']"
+             [checked]="bulk.includes(item['@id']!)"
+             (change)="addToBulk(item['@id']!)"
+      >
+    </td>
+    <td>{{ item['id'] }}</td>
+    <td>{{ item['name'] }}</td>
+    <td class="w-8">
+      <a [routerLink]="[item['@id']]" class="text-cyan-500">
+        Show
+        <app-show-svg />
+      </a>
+    </td>
+    <td class="w-8">
+      <a [routerLink]="[item['id'], 'edit']" class="text-cyan-500">
+        Edit
+        <app-edit-svg />
+      </a>
+    </td>
+  </tr>
+  } @empty {
+  <tr>
+    <td colspan="2" class="text-center italic p-6">
+      Pas de données.
+    </td>
+  </tr>
+  }
   </tbody>
 </table>
diff --git a/templates/angular/app/components/common/table/table.component.ts b/templates/angular/app/components/common/table/table.component.ts
index 840963d4..8ca289b1 100644
--- a/templates/angular/app/components/common/table/table.component.ts
+++ b/templates/angular/app/components/common/table/table.component.ts
@@ -2,13 +2,19 @@ import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {RouterLink} from "@angular/router";
 import {Hero} from "../../../interface/hero.model";
 import {FormsModule} from "@angular/forms";
+import {ShowComponent} from "../../svg/show/show.component";
+import {ShowSvgComponent} from "../../svg/show-svg/show-svg.component";
+import {EditSvgComponent} from "../../svg/edit-svg/edit-svg.component";
 
 @Component({
   selector: 'app-table',
   standalone: true,
   imports: [
     RouterLink,
-    FormsModule
+    FormsModule,
+    ShowComponent,
+    ShowSvgComponent,
+    EditSvgComponent
   ],
   templateUrl: './table.component.html',
 })
diff --git a/templates/angular/app/components/foo/create/create.component.html b/templates/angular/app/components/foo/create/create.component.html
index 90a047f6..455e038c 100644
--- a/templates/angular/app/components/foo/create/create.component.html
+++ b/templates/angular/app/components/foo/create/create.component.html
@@ -9,6 +9,6 @@
   <div class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm">Loading ...</div>
   } @else {
   <h1 class="text-3xl my-4">Create</h1>
-  <app-form [fields]="{{{formType}}}" (submit)="onSubmit($event)"/>
+  <app-form [fields]="formType" (submit)="onSubmit($event)"></app-form>
   }
 </div>
diff --git a/templates/angular/app/components/foo/create/create.component.ts b/templates/angular/app/components/foo/create/create.component.ts
index 536e633a..f51006cb 100644
--- a/templates/angular/app/components/foo/create/create.component.ts
+++ b/templates/angular/app/components/foo/create/create.component.ts
@@ -20,12 +20,7 @@ import {FormComponent} from "../../common/form/form.component";
 })
 export class CreateComponent {
   public isLoading: WritableSignal<boolean> = signal(false)
-  public formType: Array<{ name: string; type: string }> = [
-    {
-      name: 'name',
-      type: 'string',
-    }
-  ]
+  public formType ='{{formFields}}'
 
   constructor(private apiService: ApiService, private location: Location) {
   }
diff --git a/templates/angular/app/components/foo/edit/edit.component.ts b/templates/angular/app/components/foo/edit/edit.component.ts
index 9c0d0bb7..28097b4a 100644
--- a/templates/angular/app/components/foo/edit/edit.component.ts
+++ b/templates/angular/app/components/foo/edit/edit.component.ts
@@ -1,4 +1,4 @@
-import {Component, computed, OnInit, signal, WritableSignal} from '@angular/core';
+import {Component, OnInit, signal, WritableSignal} from '@angular/core';
 import {DeleteComponent} from "../../common/delete/delete.component";
 import {Router, RouterLink} from "@angular/router";
 import {ApiService} from "../../../service/api.service";
@@ -25,7 +25,7 @@ export class EditComponent implements OnInit {
 
   constructor(
     private router: Router,
-    private heroService: ApiService,
+    private apiService: ApiService,
     private location: Location
   ) {
   }
@@ -37,7 +37,7 @@ export class EditComponent implements OnInit {
   loadData() {
     this.isLoading.set(true)
     const splitUrl = this.router.url.split('/edit')[0]
-    this.heroService
+    this.apiService
       .getData(splitUrl)
       .subscribe(item => {
         this.item.set(item)
@@ -58,7 +58,7 @@ export class EditComponent implements OnInit {
   }
 
   onSubmit(event: any) {
-    return this.heroService.putHero(
+    return this.apiService.putHero(
       this.item()?.["@id"],
       this.item()
     ).subscribe(() => {
@@ -67,7 +67,7 @@ export class EditComponent implements OnInit {
   }
 
   delete() {
-    return this.heroService.delete(
+    return this.apiService.delete(
       this.item()?.["@id"]
     ).subscribe(
       () => this.location.back()
diff --git a/templates/angular/app/components/foo/list/list.component.html b/templates/angular/app/components/foo/list/list.component.html
index cb4213de..ab1d3e28 100644
--- a/templates/angular/app/components/foo/list/list.component.html
+++ b/templates/angular/app/components/foo/list/list.component.html
@@ -1,8 +1,8 @@
 <div class="p-8 mt-4">
   <div class="flex justify-between items-center">
-    <h1 class="text-3xl mb-2">Heroes List</h1>
+    <h1 class="text-3xl mb-2">{{title}} List</h1>
     <div class="flex">
-      <a routerLink="/heroes/add"
+      <a routerLink="/{{lc}}/add"
          class="bg-cyan-500 hover:bg-cyan-700 text-white text-sm font-bold py-2 px-4 rounded mr-2"
       >
         Create
@@ -17,7 +17,7 @@ <h1 class="text-3xl mb-2">Heroes List</h1>
   @if (isLoading()) {
     <div class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm">Loading ...</div>
   } @else {
-    <app-table [items]="heroes()"
+    <app-table [items]="items()"
                [bulk]="bulk()"
                (addToBulkList)="addToBulk($event)"
                (selectedAll)="selectedAll()"
diff --git a/templates/angular/app/components/foo/list/list.component.ts b/templates/angular/app/components/foo/list/list.component.ts
index f64b5b59..a8ba552b 100644
--- a/templates/angular/app/components/foo/list/list.component.ts
+++ b/templates/angular/app/components/foo/list/list.component.ts
@@ -1,12 +1,10 @@
-import {Component, computed, OnInit, Output, signal, WritableSignal} from '@angular/core';
+import {Component, OnInit, signal, WritableSignal} from '@angular/core';
 import {RouterLink} from "@angular/router";
 import {AsyncPipe, Location, NgFor, NgIf} from "@angular/common";
 import {TableComponent} from "../../common/table/table.component";
 import {ApiService} from "../../../service/api.service";
 import {Hero} from "../../../interface/hero.model";
 import {DeleteComponent} from "../../common/delete/delete.component";
-import {log} from "node:util";
-import {Validators} from "@angular/forms";
 
 @Component({
   selector: 'app-list',
@@ -22,24 +20,23 @@ import {Validators} from "@angular/forms";
   templateUrl: './list.component.html',
 })
 export class ListComponent implements OnInit {
-  public heroes: WritableSignal<Hero[] | []> = signal([])
+  public items: WritableSignal<Hero[] | []> = signal([])
   public isLoading = signal(false)
   public error = signal(undefined)
-  @Output() bulk: WritableSignal<Array<string>> = signal([])
+  public bulk: WritableSignal<Array<string>> = signal([])
 
   constructor(
-    private heroService: ApiService,
-    private location: Location
+    private apiService: ApiService
   ) {
   }
 
   ngOnInit() {
     this.isLoading.set(true)
-    this.heroService
-      .getDataes('/heroes')
+    this.apiService
+      .getData('/{{lc}}')
       .subscribe(
         (items) => {
-          this.heroes.set(items['hydra:member'])
+          this.items.set(items['hydra:member'])
           this.isLoading.set(false)
         }
       )
@@ -56,8 +53,8 @@ export class ListComponent implements OnInit {
 
   selectedAll() {
     if (!this.bulk().length) {
-      this.heroes().forEach(hero => {
-        this.bulk().push(<string>hero["@id"])
+      this.items().forEach(item => {
+        this.bulk().push(<string>item["@id"])
       })
     } else {
       this.bulk.set([])
@@ -70,7 +67,7 @@ export class ListComponent implements OnInit {
         items =>
           items.forEach(
             uri =>
-              this.heroService.delete(uri)
+              this.apiService.delete(uri)
                 .subscribe(
                   () => {
                     window.location.reload()
diff --git a/templates/angular/app/components/foo/show/show.component.html b/templates/angular/app/components/foo/show/show.component.html
index f9525310..616a0f95 100644
--- a/templates/angular/app/components/foo/show/show.component.html
+++ b/templates/angular/app/components/foo/show/show.component.html
@@ -3,7 +3,7 @@
     <div class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm">Loading ...</div>
   } @else {
     <div class="flex items-center justify-between">
-      <a [routerLink]="['/heroes']"
+      <a [routerLink]="['/{{lc}}']"
          class="text-blue-600 hover:text-blue-800">
         Back to list
       </a>
diff --git a/templates/angular/app/components/foo/show/show.component.ts b/templates/angular/app/components/foo/show/show.component.ts
index 636682fd..e9c7088e 100644
--- a/templates/angular/app/components/foo/show/show.component.ts
+++ b/templates/angular/app/components/foo/show/show.component.ts
@@ -13,7 +13,7 @@ import {ApiShow} from "../../../interface/api";
     RouterLink,
     DeleteComponent
   ],
-  templateUrl: './show.component.html',
+  templateUrl: './show.component.svg',
 })
 export class ShowComponent implements OnInit {
   public item: WritableSignal<ApiShow|null> = signal(null)
@@ -21,7 +21,7 @@ export class ShowComponent implements OnInit {
   public error = signal(undefined)
 
   constructor(
-    private heroService: ApiService,
+    private apiService: ApiService,
     private router: Router,
     private location: Location
   ) {
@@ -30,7 +30,7 @@ export class ShowComponent implements OnInit {
   ngOnInit() {
     this.isLoading.set(true)
     const id = this.router.url
-    this.heroService
+    this.apiService
       .getData(id)
       .subscribe(item => {
         this.item.set(item)
@@ -39,7 +39,7 @@ export class ShowComponent implements OnInit {
   }
 
   delete() {
-    return this.heroService.delete(this.item()?.['@id']).subscribe(
+    return this.apiService.delete(this.item()?.['@id']).subscribe(
       () => this.location.back()
     )
   }
diff --git a/templates/angular/app/components/svg/edit-svg/edit-svg.component.svg b/templates/angular/app/components/svg/edit-svg/edit-svg.component.svg
new file mode 100644
index 00000000..826ad3bd
--- /dev/null
+++ b/templates/angular/app/components/svg/edit-svg/edit-svg.component.svg
@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="currentColor"
+  class="w-6 h-6"
+>
+  <path
+    d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-8.4 8.4a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32l8.4-8.4z"/>
+  <path
+    d="M5.25 5.25a3 3 0 00-3 3v10.5a3 3 0 003 3h10.5a3 3 0 003-3V13.5a.75.75 0 00-1.5 0v5.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5V8.25a1.5 1.5 0 011.5-1.5h5.25a.75.75 0 000-1.5H5.25z"/>
+</svg>
diff --git a/templates/angular/app/components/svg/edit-svg/edit-svg.component.ts b/templates/angular/app/components/svg/edit-svg/edit-svg.component.ts
new file mode 100644
index 00000000..b2f8ac8d
--- /dev/null
+++ b/templates/angular/app/components/svg/edit-svg/edit-svg.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-edit-svg',
+  standalone: true,
+  imports: [],
+  templateUrl: './edit-svg.component.svg',
+  styleUrl: './edit-svg.component.css'
+})
+export class EditSvgComponent {
+
+}
diff --git a/templates/angular/app/components/svg/list-svg/list-svg.component.css b/templates/angular/app/components/svg/list-svg/list-svg.component.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/templates/angular/app/components/svg/list-svg/list-svg.component.spec.ts b/templates/angular/app/components/svg/list-svg/list-svg.component.spec.ts
deleted file mode 100644
index 280bf40f..00000000
--- a/templates/angular/app/components/svg/list-svg/list-svg.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ListSvgComponent } from './list-svg.component';
-
-describe('ListSvgComponent', () => {
-  let component: ListSvgComponent;
-  let fixture: ComponentFixture<ListSvgComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ListSvgComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(ListSvgComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/templates/angular/app/components/svg/list-svg/list-svg.component.ts b/templates/angular/app/components/svg/list-svg/list-svg.component.ts
index b88307aa..7ed65c66 100644
--- a/templates/angular/app/components/svg/list-svg/list-svg.component.ts
+++ b/templates/angular/app/components/svg/list-svg/list-svg.component.ts
@@ -5,7 +5,6 @@ import { Component } from '@angular/core';
   standalone: true,
   imports: [],
   templateUrl: './list-svg.component.svg',
-  styleUrl: './list-svg.component.css'
 })
 export class ListSvgComponent {
 
diff --git a/templates/angular/app/components/svg/show-svg/show-svg.component.svg b/templates/angular/app/components/svg/show-svg/show-svg.component.svg
new file mode 100644
index 00000000..b91d5d60
--- /dev/null
+++ b/templates/angular/app/components/svg/show-svg/show-svg.component.svg
@@ -0,0 +1,13 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="currentColor"
+  class="w-6 h-6"
+>
+  <path d="M12 15a3 3 0 100-6 3 3 0 000 6z"/>
+  <path
+    fill-rule="evenodd"
+    d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z"
+    clip-rule="evenodd"
+  />
+</svg><p>show-svg works!</p>
diff --git a/templates/angular/app/components/svg/show-svg/show-svg.component.ts b/templates/angular/app/components/svg/show-svg/show-svg.component.ts
new file mode 100644
index 00000000..b68a0328
--- /dev/null
+++ b/templates/angular/app/components/svg/show-svg/show-svg.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-show-svg',
+  standalone: true,
+  imports: [],
+  templateUrl: './show-svg.component.svg',
+  styleUrl: './show-svg.component.css'
+})
+export class ShowSvgComponent {
+
+}
diff --git a/templates/angular/app/router/foo.ts b/templates/angular/app/router/foo.ts
index 28791df4..f819dbdd 100644
--- a/templates/angular/app/router/foo.ts
+++ b/templates/angular/app/router/foo.ts
@@ -1,23 +1,23 @@
-import {ListComponent} from "../components/foo/list/list.component";
-import {CreateComponent} from "../components/foo/create/create.component";
-import {ShowComponent} from "../components/foo/show/show.component";
-import {EditComponent} from "../components/foo/edit/edit.component";
+import {ListComponent} from "../components/{{lc}}/list/list.component";
+import {CreateComponent} from "../components/{{lc}}/create/create.component";
+import {ShowComponent} from "../components/{{lc}}/show/show.component";
+import {EditComponent} from "../components/{{lc}}/edit/edit.component";
 
-export default [
+export const {{title}}Routes = [
   {
-    path: 'heroes',
+    path: '{{lc}}',
     component: ListComponent
   },
   {
-    path: 'heroes/add',
+    path: '{{lc}}/add',
     component: CreateComponent
   },
   {
-    path: 'heroes/:id',
+    path: '{{lc}}/:id',
     component: ShowComponent,
   },
   {
-    path: 'heroes/:id/edit',
+    path: '{{lc}}/:id/edit',
     component: EditComponent
   },
 ]
diff --git a/templates/angular/app/service/api.service.ts b/templates/angular/app/service/api.service.ts
index 297343c5..7fb3cfd8 100644
--- a/templates/angular/app/service/api.service.ts
+++ b/templates/angular/app/service/api.service.ts
@@ -30,9 +30,9 @@ export class ApiService {
       )
   }
 
-  getHeroes(id: string): Observable<ApiList> {
+  getData(id: string): Observable<ApiList|ApiShow> {
     return this.http
-      .get<ApiList>(this.baseUrl + id)
+      .get<ApiList|ApiShow>(this.baseUrl + id)
       .pipe(
         catchError(
           this.handleError
@@ -40,14 +40,6 @@ export class ApiService {
       )
   }
 
-  getHero(id: string): Observable<ApiShow> {
-    return this.http
-      .get<ApiShow>(this.baseUrl + id)
-      .pipe(
-        catchError(this.handleError)
-      )
-  }
-
   putHero(id: Signal<string | undefined> | string | undefined, data: ApiShow | null) {
 
     return this.http
diff --git a/testapp.sh b/testapp.sh
index 47459444..45fd8f7a 100755
--- a/testapp.sh
+++ b/testapp.sh
@@ -75,3 +75,27 @@ if [ "$1" = "vue" ]; then
   yarn --cwd ./tmp/app/vue build
   start-server-and-test 'yarn --cwd ./tmp/app/vue vite preview --port 3000' http://localhost:3000/books/ 'yarn playwright test'
 fi
+
+if [ "$1" = "angular" ]; then
+  cd ./tmp/app
+  npm install -g @angular/cli
+
+  ng new angular
+  cd ../..
+  yarn --cwd ./tmp/app/angular add tailwindcss postcss autoprefixer
+  yarn --cwd ./tmp/app/angular tailwindcss init -p
+
+  cp ./templates/common/tailwind.config.js ./tmp/app/angular
+  cp ./templates/common/style.css ./tmp/app/angular/src
+
+  cp ./templates/angular/app/app.component.html ./tmp/app/angular/src/app
+  cp ./templates/angular/app/app.component.ts ./tmp/app/angular/src/app
+
+  mkdir -p ./tmp/app/angular/src/app/components/common
+  mkdir -p ./tmp/app/angular/src/app/components/svg
+
+  cp -r ./templates/angular/app/components/common/* ./tmp/app/angular/src/app/components/common/
+  cp -r ./templates/angular/app/components/svg/* ./tmp/app/angular/src/app/components/svg/
+  yarn --cwd ./tmp/app/angular build
+  start-server-and-test 'yarn --cwd ./tmp/app/angular start' http://127.0.0.1:4200/books/ 'yarn playwright test'
+fi
diff --git a/testgen.sh b/testgen.sh
index 37254865..fcd765df 100755
--- a/testgen.sh
+++ b/testgen.sh
@@ -6,7 +6,7 @@ if [ $ENTRYPOINT ]; then
   entrypoint="$ENTRYPOINT"
 fi
 
-gens="angular"
+gens="vue angular"
 if [ $1 ]; then
   gens="$1"
 fi