chore: lint angular templates

templates/angular-example/angular.json

@@ -85,8 +85,17 @@
             "styles": ["src/styles.css"],
             "scripts": []
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+          }
         }
       }
     }
+  },
+  "cli": {
+    "schematicCollections": ["angular-eslint"]
   }
 }

templates/angular-example/package.json

@@ -10,7 +10,8 @@
     "test": "ng test",
     "format": "prettier --write .",
     "postinstall:copy-auth": "node -e \"require('fs').cpSync('node_modules/@junobuild/core/dist/workers/', './src/assets/workers', {recursive: true});\"",
-    "postinstall": "npm run postinstall:copy-auth"
+    "postinstall": "npm run postinstall:copy-auth",
+    "lint": "ng lint"
   },
   "private": true,
   "dependencies": {
@@ -35,6 +36,8 @@
     "@angular/compiler-cli": "^20.0.5",
     "@tailwindcss/postcss": "^4.1.10",
     "@types/jasmine": "~5.1.8",
+    "angular-eslint": "20.2.0",
+    "eslint": "^9.33.0",
     "jasmine-core": "~5.8.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
@@ -45,7 +48,8 @@
     "prettier": "^3.6.1",
     "prettier-plugin-tailwindcss": "^0.6.13",
     "tailwindcss": "^4.1.10",
-    "typescript": "~5.8.3"
+    "typescript": "~5.8.3",
+    "typescript-eslint": "8.40.0"
   },
   "overrides": {
     "@angular-devkit/build-angular": {

templates/angular-example/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { initSatellite } from '@junobuild/core';
 import { environment } from '../environments/environment';
 import { HomeComponent } from './components/home/home.component';
@@ -8,7 +8,7 @@ import { HomeComponent } from './components/home/home.component';
   imports: [HomeComponent],
   templateUrl: './app.component.html',
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'Juno / Angular Example';
 
   async ngOnInit() {

templates/angular-example/src/app/components/backdrop/backdrop.component.ts

@@ -1,4 +1,4 @@
-import { Component, input, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 @Component({
   selector: 'app-backdrop',

templates/angular-example/src/app/components/button/button.component.ts

@@ -1,12 +1,11 @@
 import { NgClass } from '@angular/common';
-import { Component, input, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 @Component({
   selector: 'app-button',
   imports: [NgClass],
   templateUrl: './button.component.html',
 })
 export class ButtonComponent {
-  disabled = input.required<boolean>()
-
+  disabled = input.required<boolean>();
 }

templates/angular-example/src/app/components/table/table.component.html

@@ -11,7 +11,7 @@
       >
         <span
           role="cell"
-          aria-rowindex="{index}"
+          [attr.aria-rowindex]="i + 1"
           class="align-center flex min-w-max p-1"
         >
           {{ i + 1 }}

templates/angular-example/src/main.ts

@@ -5,6 +5,7 @@ import { appConfig } from './app/app.config';
 // Agent-js requires a polyfill 😕
 // I've reported this issue multiple times. Hopefully, it will be addressed in the future.
 // ERROR ReferenceError: global is not defined
+// eslint-disable-next-line
 (window as any).global = window;
 
 bootstrapApplication(AppComponent, appConfig).catch((err) =>

templates/angular-starter/angular.json

@@ -85,8 +85,17 @@
             "styles": ["src/styles.css"],
             "scripts": []
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+          }
         }
       }
     }
+  },
+  "cli": {
+    "schematicCollections": ["angular-eslint"]
   }
 }

templates/angular-starter/package.json

@@ -10,7 +10,8 @@
     "test": "ng test",
     "format": "prettier --write .",
     "postinstall:copy-auth": "node -e \"require('fs').cpSync('node_modules/@junobuild/core/dist/workers/', './src/assets/workers', {recursive: true});\"",
-    "postinstall": "npm run postinstall:copy-auth"
+    "postinstall": "npm run postinstall:copy-auth",
+    "lint": "ng lint"
   },
   "private": true,
   "dependencies": {
@@ -34,6 +35,8 @@
     "@angular/compiler-cli": "^20.0.5",
     "@tailwindcss/postcss": "^4.1.10",
     "@types/jasmine": "~5.1.8",
+    "angular-eslint": "20.2.0",
+    "eslint": "^9.33.0",
     "jasmine-core": "~5.8.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
@@ -44,7 +47,8 @@
     "prettier": "^3.6.1",
     "prettier-plugin-tailwindcss": "^0.6.13",
     "tailwindcss": "^4.1.10",
-    "typescript": "~5.8.3"
+    "typescript": "~5.8.3",
+    "typescript-eslint": "8.40.0"
   },
   "overrides": {
     "@angular-devkit/build-angular": {

templates/angular-starter/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { initSatellite } from '@junobuild/core';
 import { environment } from '../environments/environment';
 import { HomeComponent } from './components/home/home.component';
@@ -8,7 +8,7 @@ import { HomeComponent } from './components/home/home.component';
   imports: [HomeComponent],
   templateUrl: './app.component.html',
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'Juno / Angular Starter';
 
   async ngOnInit() {

templates/angular-starter/src/main.ts

@@ -5,6 +5,7 @@ import { appConfig } from './app/app.config';
 // Agent-js requires a polyfill 😕
 // I've reported this issue multiple times. Hopefully, it will be addressed in the future.
 // ERROR ReferenceError: global is not defined
+// eslint-disable-next-line
 (window as any).global = window;
 
 bootstrapApplication(AppComponent, appConfig).catch((err) =>