add prettier and apply stricter typescript

Author: bcsik

.eslintrc.json

@@ -10,9 +10,10 @@
       ],
       "extends": [
         "eslint:recommended",
-        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/strict",
         "plugin:@angular-eslint/recommended",
-        "plugin:@angular-eslint/template/process-inline-templates"
+        "plugin:@angular-eslint/template/process-inline-templates",
+        "plugin:prettier/recommended"
       ],
       "rules": {
         "@angular-eslint/directive-selector": [
@@ -39,7 +40,8 @@
       ],
       "extends": [
         "plugin:@angular-eslint/template/recommended",
-        "plugin:@angular-eslint/template/accessibility"
+        "plugin:@angular-eslint/template/accessibility",
+        "plugin:prettier/recommended"
       ],
       "rules": {}
     }

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "semi": false,
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
+}

package-lock.json

@@ -33,16 +33,21 @@
     "@angular-eslint/template-parser": "17.2.1",
     "@angular/cli": "^17.2.0",
     "@angular/compiler-cli": "^17.2.0",
+    "@angular/localize": "^17.2.1",
     "@types/jasmine": "~5.1.0",
     "@typescript-eslint/eslint-plugin": "6.19.0",
     "@typescript-eslint/parser": "6.19.0",
     "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
+    "ng-mocks": "^14.12.1",
+    "prettier": "^3.2.5",
     "typescript": "~5.3.2"
   }
 }

package.json

@@ -1,16 +1,16 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
+import { TestBed } from '@angular/core/testing'
+import { AppComponent } from './app.component'
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [AppComponent],
-    }).compileComponents();
-  });
+    }).compileComponents()
+  })
 
   it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-});
+    const fixture = TestBed.createComponent(AppComponent)
+    const app = fixture.componentInstance
+    expect(app).toBeTruthy()
+  })
+})

src/app/app.component.spec.ts

@@ -1,28 +1,28 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-import {MenuItem} from "primeng/api";
-import {MenubarModule} from "primeng/menubar";
+import { Component } from '@angular/core'
+import { RouterOutlet } from '@angular/router'
+import { MenuItem } from 'primeng/api'
+import { MenubarModule } from 'primeng/menubar'
 
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [RouterOutlet, MenubarModule],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
+  styleUrl: './app.component.css',
 })
 export class AppComponent {
   protected readonly model: MenuItem[] = [
     {
       label: 'Video',
-      routerLink: 'video'
+      routerLink: 'video',
     },
     {
       label: 'Event',
-      routerLink: 'event'
+      routerLink: 'event',
     },
     {
       label: 'Member',
-      routerLink: 'member'
-    }
+      routerLink: 'member',
+    },
   ]
 }

src/app/app.component.ts

@@ -1,8 +1,9 @@
-import { ApplicationConfig } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { ApplicationConfig } from '@angular/core'
+import { provideRouter } from '@angular/router'
 
-import { routes } from './app.routes';
+import { routes } from './app.routes'
+import { provideHttpClient } from '@angular/common/http'
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)]
-};
+  providers: [provideRouter(routes), provideHttpClient()],
+}