feat: upgrade angular 18

.eslintrc.json

@@ -24,13 +24,19 @@
     },
     {
       "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nx/typescript"],
-      "rules": {}
+      "extends": ["plugin:@nx/typescript", "prettier"],
+      "rules": {
+        "@typescript-eslint/no-extra-semi": "error",
+        "no-extra-semi": "off"
+      }
     },
     {
       "files": ["*.js", "*.jsx"],
-      "extends": ["plugin:@nx/javascript"],
-      "rules": {}
+      "extends": ["plugin:@nx/javascript", "prettier"],
+      "rules": {
+        "@typescript-eslint/no-extra-semi": "error",
+        "no-extra-semi": "off"
+      }
     }
   ]
 }

.gitignore

@@ -52,4 +52,5 @@ firebase-debug.log
 !.yarn/sdks
 !.yarn/versions
 
-.nx/cache
+.nx/cache
+.nx/workspace-data

.prettierignore

@@ -16,3 +16,5 @@
 
 /.nx/cache
 .angular
+
+/.nx/workspace-data

.vscode/settings.json

@@ -25,5 +25,6 @@
     },
     "editor.formatOnSave": false
   },
-  "editor.fontLigatures": true
+  "editor.fontLigatures": true,
+  "prettier.configPath": ".prettierrc.json"
 }

apps/estrai.me/jest.config.ts

@@ -24,7 +24,5 @@ export default {
     'jest-preset-angular/build/serializers/ng-snapshot',
     'jest-preset-angular/build/serializers/html-comment',
   ],
-  transformIgnorePatterns: [
-    `node_modules/(?!@angular|@ngneat/spectator|array-move|lodash-es)`,
-  ],
+  transformIgnorePatterns: [`node_modules/(?!@angular|@ngneat/spectator|array-move|lodash-es)`],
 };

apps/estrai.me/project.json

@@ -19,10 +19,7 @@
         "polyfills": ["zone.js"],
         "tsConfig": "apps/estrai.me/tsconfig.app.json",
         "inlineStyleLanguage": "scss",
-        "assets": [
-          "apps/estrai.me/src/favicon.ico",
-          "apps/estrai.me/src/assets"
-        ],
+        "assets": ["apps/estrai.me/src/favicon.ico", "apps/estrai.me/src/assets"],
         "styles": ["apps/estrai.me/src/styles.scss"],
         "scripts": []
       },

apps/estrai.me/src/app/app.config.ts

@@ -1,10 +1,6 @@
-import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { ApplicationConfig } from '@angular/core';
 import { FIREBASE_OPTIONS } from '@angular/fire/compat';
-import {
-  PreloadAllModules,
-  provideRouter,
-  withPreloading,
-} from '@angular/router';
+import { PreloadAllModules, provideRouter, withPreloading } from '@angular/router';
 import { APP_ROUTES } from './app.routes';
 import { AuthService, ProfileService, UserService } from '@data-access';
 import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
@@ -17,16 +13,16 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(
       APP_ROUTES,
-      withPreloading(PreloadAllModules),
+      withPreloading(PreloadAllModules)
       // withDebugTracing(),
     ),
-    importProvidersFrom(
-      provideFirebaseApp(() => initializeApp(environment.firebase)),
-    ),
+    provideFirebaseApp(() => initializeApp(environment.firebase)),
     { provide: FIREBASE_OPTIONS, useValue: environment.firebase },
-    importProvidersFrom(provideFirestore(() => getFirestore())),
-    importProvidersFrom(provideAuth(() => getAuth())),
-    importProvidersFrom(provideAnalytics(() => getAnalytics())),
-    importProvidersFrom(AuthService, ProfileService, UserService),
+    provideFirestore(() => getFirestore()),
+    provideAuth(() => getAuth()),
+    provideAnalytics(() => getAnalytics()),
+    AuthService,
+    ProfileService,
+    UserService,
   ],
 };

apps/estrai.me/src/app/app.routes.ts

@@ -14,34 +14,27 @@ export const APP_ROUTES: Routes = [
   },
   {
     path: 'about',
-    loadComponent: () =>
-      import('./pages/about/about.component').then((m) => m.AboutComponent),
+    loadComponent: () => import('./pages/about/about.component').then(m => m.AboutComponent),
   },
   {
     path: 'privacy',
-    loadComponent: () =>
-      import('./pages/privacy/privacy.component').then(
-        (m) => m.PrivacyComponent,
-      ),
+    loadComponent: () => import('./pages/privacy/privacy.component').then(m => m.PrivacyComponent),
   },
   {
     path: 'unauthorized',
-    loadComponent: () =>
-      import('./pages/unauthorized/unauthorized.component').then(
-        (m) => m.UnauthorizedComponent,
-      ),
+    loadComponent: () => import('./pages/unauthorized/unauthorized.component').then(m => m.UnauthorizedComponent),
   },
   {
     path: 'profile',
-    loadComponent: () => import('@profile').then((m) => m.ProfileComponent),
+    loadComponent: () => import('@profile').then(m => m.ProfileComponent),
     canActivate: [AngularFireAuthGuard],
   },
   {
     path: 'auth',
-    loadChildren: () => import('@auth').then((m) => m.AUTH_ROUTES),
+    loadChildren: () => import('@auth').then(m => m.AUTH_ROUTES),
   },
   {
     path: 'game',
-    loadChildren: () => import('@game').then((m) => m.GAME_ROUTES),
+    loadChildren: () => import('@game').then(m => m.GAME_ROUTES),
   },
 ];

apps/estrai.me/src/app/pages/about/about.component.ts

@@ -8,59 +8,48 @@ import { CommonModule } from '@angular/common';
   template: `
     <div class="px-4 py-20 bg-lightblue">
       <div class="flex flex-col max-w-6xl mx-auto md:flex-row">
-        <h2 class="w-full mr-8 text-3xl font-extrabold leading-9 md:w-1/3">
-          ABOUT
-        </h2>
+        <h2 class="w-full mr-8 text-3xl font-extrabold leading-9 md:w-1/3">ABOUT</h2>
         <dl class="w-full md:w-2/3">
           <dt class="mb-4">
             <h3 class="text-xl font-semibold">What is Estrai.me?</h3>
           </dt>
           <dd class="mb-16">
             <p>
-              Raffle games are an exciting way to bring an extra element of fun
-              to your events. An online raffle game is a great tool for
-              increasing engagement and driving donations. With ESTRAI.me, you
-              can easily create a unique and memorable experience.
+              Raffle games are an exciting way to bring an extra element of fun to your events. An online raffle game is
+              a great tool for increasing engagement and driving donations. With ESTRAI.me, you can easily create a
+              unique and memorable experience.
             </p>
           </dd>
           <dt class="mb-4">
             <h3 class="text-xl font-semibold">How It Works?</h3>
           </dt>
           <dd class="mb-16">
             <p>
-              ESTRAI.me give to you the ability to host an in person raffle
-              game. What you need is to login and create your event. Once you’ve
-              registered your event, you’ll be able to create a custom raffle
-              where participants can join and take free tickets to enter. Once
-              the tickets are purchased, participants can then enter the raffle.
-              The winner will be chosen at random and will be announced directly
-              on the ESTRAI.me page.
+              ESTRAI.me give to you the ability to host an in person raffle game. What you need is to login and create
+              your event. Once you’ve registered your event, you’ll be able to create a custom raffle where participants
+              can join and take free tickets to enter. Once the tickets are purchased, participants can then enter the
+              raffle. The winner will be chosen at random and will be announced directly on the ESTRAI.me page.
             </p>
           </dd>
           <dt class="mb-4">
             <h3 class="text-xl font-semibold">Benefits</h3>
           </dt>
           <dd class="mb-16">
             <p>
-              An online raffle game is a great way to engage your audience and
-              increase interaction and networking. It’s a fun and interactive
-              way to draw while. It’s also relatively easy to set up and manage,
-              allowing you to focus on other aspects of your event. Plus, since
-              tickets can be assigned electronically, it’s a great way improve
-              your event spend more time on engaging people for your event in
-              person.
+              An online raffle game is a great way to engage your audience and increase interaction and networking. It’s
+              a fun and interactive way to draw while. It’s also relatively easy to set up and manage, allowing you to
+              focus on other aspects of your event. Plus, since tickets can be assigned electronically, it’s a great way
+              improve your event spend more time on engaging people for your event in person.
             </p>
           </dd>
           <dt class="mb-4">
             <h3 class="text-xl font-semibold">DISCLAIMER</h3>
           </dt>
           <dd class="mb-16">
             <p>
-              This online raffle game is provided as a free service and without
-              any warranty of any kind. The game is provided without any
-              guarantee of results or accuracy. We assume no responsibility or
-              liability for any loss or damage incurred as a result of
-              participating in this game. All participants must comply with all
+              This online raffle game is provided as a free service and without any warranty of any kind. The game is
+              provided without any guarantee of results or accuracy. We assume no responsibility or liability for any
+              loss or damage incurred as a result of participating in this game. All participants must comply with all
               applicable laws and regulations.
             </p>
           </dd>
@@ -69,9 +58,8 @@ import { CommonModule } from '@angular/common';
           </dt>
           <dd class="mb-16">
             <p>
-              ESTRAI.me is a great way to add an extra layer of fun and
-              excitement to your event. It’s an easy way to engage your
-              audience, and create a memorable experience.
+              ESTRAI.me is a great way to add an extra layer of fun and excitement to your event. It’s an easy way to
+              engage your audience, and create a memorable experience.
             </p>
           </dd>
         </dl>