Convert components to standalone and implement route-based loading

Refactored Angular components to standalone modules, enhancing modularity and reducing dependency on `AppModule`. Updated routes to facilitate lazy loading for improved performance and maintainability. Replaced `platformBrowserDynamic` with `bootstrapApplication` for modern bootstrapping.

frontend/build.gradle.kts

@@ -0,0 +1,14 @@
+tasks.register<Exec>("npmInstall") {
+  commandLine("npm.cmd", "install")
+//    commandLine("npm", "install")
+}
+
+tasks.register<Exec>("ngBuild") {
+  dependsOn("npmInstall", "generateFrontendApi")
+//    commandLine("npm", "run", "build")
+  commandLine("npm.cmd", "run", "build")
+}
+
+//dependencies {
+//  implementation(project(":backend"))
+//}

frontend/src/app/about/about.component.ts

@@ -1,9 +1,15 @@
 import {Component} from '@angular/core';
 import {ScrollService} from '../scroll/scroll.service';
+import {CommonModule} from '@angular/common';
+import {HeaderComponent} from '../header/header.component';
 
 @Component({
   selector: 'app-about',
-  standalone: false,
+  standalone: true,
+  imports: [
+    CommonModule,
+    HeaderComponent
+  ],
   templateUrl: './about.component.html',
   styleUrl: './about.component.scss'
 })

frontend/src/app/app.component.ts

@@ -1,13 +1,18 @@
 import {Component, OnInit} from '@angular/core';
 import {Meta, Title} from '@angular/platform-browser';
 import {ALTITUDE_VERSION} from './constant';
-import {Router} from '@angular/router';
+import {Router, RouterOutlet} from '@angular/router';
+import {FooterComponent} from './footer/footer.component';
 
 @Component({
-  standalone: false,
+  standalone: true,
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
+  imports: [
+    FooterComponent,
+    RouterOutlet
+  ]
 })
 export class AppComponent implements OnInit {
   title = 'Survival Minecraft Server on ' + ALTITUDE_VERSION + '! | Altitude Community';

frontend/src/app/app.module.ts

@@ -1,16 +1,12 @@
 import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
-import {AppComponent} from './app.component';
 import {RouterModule, Routes} from '@angular/router';
-import {HeaderComponent} from './header/header.component';
 import {HomeComponent} from './home/home.component';
 import {NgOptimizedImage} from '@angular/common';
-import {ThemeComponent} from "./theme/theme.component";
 import {CookieService} from 'ngx-cookie-service';
 import {MapComponent} from './map/map.component';
 import {RulesComponent} from './rules/rules.component';
 import {CopyIpComponent} from './copy-ip/copy-ip.component';
-import {FooterComponent} from './footer/footer.component';
 import {TermsComponent} from './terms/terms.component';
 import {PrivacyComponent} from './privacy/privacy.component';
 import {TeamComponent} from './team/team.component';
@@ -18,6 +14,8 @@ import {AboutComponent} from './about/about.component';
 import {SocialsComponent} from './socials/socials.component';
 import {VoteComponent} from './vote/vote.component';
 import {BirthdaysComponent} from './birthdays/birthdays.component';
+import {HttpClientModule} from '@angular/common/http';
+
 
 const routes: Routes = [
   {path: '', component: HomeComponent},
@@ -33,32 +31,17 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    HeaderComponent,
-    FooterComponent,
-    ThemeComponent,
-    HomeComponent,
-    MapComponent,
-    RulesComponent,
-    VoteComponent,
-    AboutComponent,
-    SocialsComponent,
-    TeamComponent,
-    BirthdaysComponent,
-    TermsComponent,
-    PrivacyComponent,
-  ],
+  declarations: [],
   imports: [
     BrowserModule,
+    HttpClientModule,
     RouterModule.forRoot(routes, {
       scrollPositionRestoration: 'enabled',
     }),
     NgOptimizedImage,
     CopyIpComponent,
   ],
-  providers: [CookieService],
-  bootstrap: [AppComponent]
+  providers: [CookieService]
 })
 export class AppModule {
 }

frontend/src/app/app.routes.ts

@@ -1,3 +1,46 @@
 import {Routes} from '@angular/router';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  {
+    path: '',
+    loadComponent: () => import('./home/home.component').then(m => m.HomeComponent)
+  },
+  {
+    path: 'map',
+    loadComponent: () => import('./map/map.component').then(m => m.MapComponent)
+  },
+  {
+    path: 'rules',
+    loadComponent: () => import('./rules/rules.component').then(m => m.RulesComponent)
+  },
+  {
+    path: 'vote',
+    loadComponent: () => import('./vote/vote.component').then(m => m.VoteComponent)
+  },
+  {
+    path: 'about',
+    loadComponent: () => import('./about/about.component').then(m => m.AboutComponent)
+  },
+  {
+    path: 'socials',
+    loadComponent: () => import('./socials/socials.component').then(m => m.SocialsComponent)
+  },
+  {
+    path: 'team',
+    loadComponent: () => import('./team/team.component').then(m => m.TeamComponent)
+  },
+  {
+    path: 'birthdays',
+    loadComponent: () => import('./birthdays/birthdays.component').then(m => m.BirthdaysComponent)
+  },
+  {
+    path: 'terms',
+    loadComponent: () => import('./terms/terms.component').then(m => m.TermsComponent)
+  },
+  {
+    path: 'privacy',
+    loadComponent: () => import('./privacy/privacy.component').then(m => m.PrivacyComponent)
+  }
+];
+
+

frontend/src/app/birthdays/birthdays.component.ts

@@ -1,9 +1,15 @@
 import {Component} from '@angular/core';
 import {ScrollService} from '../scroll/scroll.service';
+import {CommonModule} from '@angular/common';
+import {HeaderComponent} from '../header/header.component';
 
 @Component({
   selector: 'app-birthdays',
-  standalone: false,
+  standalone: true,
+  imports: [
+    CommonModule,
+    HeaderComponent
+  ],
   templateUrl: './birthdays.component.html',
   styleUrl: './birthdays.component.scss'
 })

frontend/src/app/copy-ip/copy-ip.component.ts

@@ -1,8 +1,13 @@
 import {Component} from '@angular/core';
+import {CommonModule} from '@angular/common';
 
 @Component({
   selector: 'app-copy-ip',
   templateUrl: './copy-ip.component.html',
+  standalone: true,
+  imports: [
+    CommonModule
+  ],
   styleUrl: './copy-ip.component.scss'
 })
 export class CopyIpComponent {

frontend/src/app/footer/footer.component.ts

@@ -1,9 +1,16 @@
 import {Component} from '@angular/core';
 import {ALTITUDE_VERSION} from '../constant';
+import {CommonModule, NgOptimizedImage} from '@angular/common';
+import {RouterLink} from '@angular/router';
 
 @Component({
   selector: 'app-footer',
-  standalone: false,
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterLink,
+    NgOptimizedImage
+  ],
   templateUrl: './footer.component.html',
   styleUrl: './footer.component.scss'
 })

frontend/src/app/header/header.component.ts

@@ -1,7 +1,16 @@
 import {Component, HostListener, Input} from '@angular/core';
+import {CommonModule, NgOptimizedImage} from '@angular/common';
+import {ThemeComponent} from '../theme/theme.component';
+import {RouterLink} from '@angular/router';
 
 @Component({
-  standalone: false,
+  standalone: true,
+  imports: [
+    CommonModule,
+    ThemeComponent,
+    RouterLink,
+    NgOptimizedImage
+  ],
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss']

frontend/src/app/home/home.component.ts

@@ -2,9 +2,20 @@ import {Component, OnInit} from '@angular/core';
 import {Title} from '@angular/platform-browser';
 import {ALTITUDE_VERSION} from '../constant';
 import {ScrollService} from '../scroll/scroll.service';
+import {CommonModule, NgOptimizedImage} from '@angular/common';
+import {HeaderComponent} from '../header/header.component';
+import {CopyIpComponent} from '../copy-ip/copy-ip.component';
+import {RouterLink} from '@angular/router';
 
 @Component({
-  standalone: false,
+  standalone: true,
+  imports: [
+    CommonModule,
+    HeaderComponent,
+    CopyIpComponent,
+    RouterLink,
+    NgOptimizedImage
+  ],
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss'

frontend/src/app/map/map.component.ts

@@ -1,7 +1,13 @@
 import {Component} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {HeaderComponent} from '../header/header.component';
 
 @Component({
-  standalone: false,
+  standalone: true,
+  imports: [
+    CommonModule,
+    HeaderComponent
+  ],
   selector: 'app-map',
   templateUrl: './map.component.html',
   styleUrl: './map.component.scss'

frontend/src/app/privacy/privacy.component.ts

@@ -1,9 +1,17 @@
 import {Component} from '@angular/core';
 import {ScrollService} from '../scroll/scroll.service';
+import {CommonModule} from '@angular/common';
+import {HeaderComponent} from '../header/header.component';
+import {RouterLink} from '@angular/router';
 
 @Component({
   selector: 'app-privacy',
-  standalone: false,
+  standalone: true,
+  imports: [
+    CommonModule,
+    HeaderComponent,
+    RouterLink
+  ],
   templateUrl: './privacy.component.html',
   styleUrl: './privacy.component.scss'
 })

frontend/src/app/rules/rules.component.ts

@@ -1,8 +1,16 @@
 import {Component} from '@angular/core';
 import {ScrollService} from '../scroll/scroll.service';
+import {CommonModule} from '@angular/common';
+import {HeaderComponent} from '../header/header.component';
+import {RouterLink} from '@angular/router';
 
 @Component({
-  standalone: false,
+  standalone: true,
+  imports: [
+    CommonModule,
+    HeaderComponent,
+    RouterLink
+  ],
   selector: 'app-rules',
   templateUrl: './rules.component.html',
   styleUrl: './rules.component.scss'

frontend/src/app/socials/socials.component.html

@@ -9,27 +9,37 @@
   <main>
     <section class="darkmodeSection">
       <div class="socialContainer" style="padding-top: 50px;">
-        <a href="https://discord.com/invite/alttd"><img class="socialIcon" ngSrc="/public/img/logos/discordsocial.png"
-                                                        title="discord.gg/alttd" alt="Altitude Discord" height="150"
-                                                        width="150" style="width: 150px;"></a>
-        <a href="https://www.tiktok.com/@alttdmc"><img class="socialIcon" ngSrc="/public/img/logos/tiktoksocial.png"
-                                                       title="alttdmc" alt="Altitude TikTok" height="150" width="150"
-                                                       style="width: 150px;"></a>
+        <a href="https://discord.com/invite/alttd">
+          <img class="socialIcon" ngSrc="/public/img/logos/discordsocial.png"
+               title="discord.gg/alttd" alt="Altitude Discord" height="150"
+               width="150" style="width: 150px;">
+        </a>
+        <a href="https://www.tiktok.com/@alttdmc">
+          <img class="socialIcon" ngSrc="/public/img/logos/tiktoksocial.png"
+               title="alttdmc" alt="Altitude TikTok" height="150" width="150"
+               style="width: 150px;">
+        </a>
       </div>
       <div class="socialContainer">
-        <a href="https://www.instagram.com/alttdmc/"><img class="socialIcon"
-                                                          ngSrc="/public/img/logos/instagramsocial.png"
-                                                          title="alttdmc" alt="Altitude Instagram" height="150"
-                                                          width="150" style="width: 150px;"></a>
-        <a href="https://twitter.com/alttdmc"><img class="socialIcon" ngSrc="/public/img/logos/twittersocial.png"
-                                                   title="alttdmc" alt="Altitude Twitter. Yes, Twitter. Not X."
-                                                   height="150" width="150"
-                                                   style="width: 150px;"></a>
+        <a href="https://www.instagram.com/alttdmc/">
+          <img class="socialIcon"
+               ngSrc="/public/img/logos/instagramsocial.png"
+               title="alttdmc" alt="Altitude Instagram" height="150"
+               width="150" style="width: 150px;">
+        </a>
+        <a href="https://twitter.com/alttdmc">
+          <img class="socialIcon" ngSrc="/public/img/logos/twittersocial.png"
+               title="alttdmc" alt="Altitude Twitter. Yes, Twitter. Not X."
+               height="150" width="150"
+               style="width: 150px;">
+        </a>
       </div>
       <div class="socialContainer" style="padding-bottom: 50px;">
-        <a href="https://www.youtube.com/c/alttd"><img class="socialIcon" ngSrc="/public/img/logos/youtubesocial.png"
-                                                       title="Altitude Community" alt="Altitude YouTube" height="150"
-                                                       width="150" style="width: 150px;"></a>
+        <a href="https://www.youtube.com/c/alttd">
+          <img class="socialIcon" ngSrc="/public/img/logos/youtubesocial.png"
+               title="Altitude Community" alt="Altitude YouTube" height="150"
+               width="150" style="width: 150px;">
+        </a>
       </div>
     </section>
   </main>

frontend/src/app/socials/socials.component.ts

@@ -1,9 +1,16 @@
 import {Component} from '@angular/core';
 import {ScrollService} from '../scroll/scroll.service';
+import {CommonModule, NgOptimizedImage} from '@angular/common';
+import {HeaderComponent} from '../header/header.component';
 
 @Component({
   selector: 'app-socials',
-  standalone: false,
+  standalone: true,
+  imports: [
+    CommonModule,
+    HeaderComponent,
+    NgOptimizedImage
+  ],
   templateUrl: './socials.component.html',
   styleUrl: './socials.component.scss'
 })

frontend/src/app/team/team.component.ts

@@ -1,13 +1,24 @@
 import {Component} from '@angular/core';
 import {ScrollService} from '../scroll/scroll.service';
+import {TeamService} from '../../api';
+import {CommonModule, NgOptimizedImage} from '@angular/common';
+import {HeaderComponent} from '../header/header.component';
 
 @Component({
   selector: 'app-team',
-  standalone: false,
+  standalone: true,
+  imports: [
+    CommonModule,
+    HeaderComponent,
+    NgOptimizedImage
+  ],
   templateUrl: './team.component.html',
   styleUrl: './team.component.scss'
 })
 export class TeamComponent {
-  constructor(public scrollService: ScrollService) {
+  constructor(public scrollService: ScrollService, public teamApi: TeamService) {
+    teamApi.getTeamMembers("test").subscribe(res => {
+      console.log(res)
+    });
   }
 }

frontend/src/app/terms/terms.component.ts

@@ -1,10 +1,18 @@
 import {Component} from '@angular/core';
 import {ScrollService} from '../scroll/scroll.service';
+import {HeaderComponent} from '../header/header.component';
+import {CommonModule} from '@angular/common';
+import {RouterLink} from '@angular/router';
 
 @Component({
   selector: 'app-terms',
-  standalone: false,
+  standalone: true,
   templateUrl: './terms.component.html',
+  imports: [
+    CommonModule,
+    HeaderComponent,
+    RouterLink
+  ],
   styleUrl: './terms.component.scss'
 })
 export class TermsComponent {

frontend/src/app/theme/theme.component.ts

@@ -2,9 +2,13 @@ import {Component, OnDestroy, OnInit} from '@angular/core';
 import {Subscription} from 'rxjs';
 import {ThemeService} from './theme.service';
 import {THEME_MODE} from '../constant';
+import {CommonModule} from '@angular/common';
 
 @Component({
-  standalone: false,
+  standalone: true,
+  imports: [
+    CommonModule,
+  ],
   selector: 'app-theme',
   templateUrl: './theme.component.html',
   styleUrl: './theme.component.scss'

frontend/src/app/vote/vote.component.ts

@@ -1,9 +1,15 @@
 import {Component} from '@angular/core';
 import {ScrollService} from '../scroll/scroll.service';
+import {CommonModule} from '@angular/common';
+import {HeaderComponent} from '../header/header.component';
 
 @Component({
   selector: 'app-vote',
-  standalone: false,
+  standalone: true,
+  imports: [
+    CommonModule,
+    HeaderComponent
+  ],
   templateUrl: './vote.component.html',
   styleUrl: './vote.component.scss'
 })

frontend/src/main.ts

@@ -1,6 +1,14 @@
-import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
-import {AppModule} from './app/app.module';
+import {bootstrapApplication} from '@angular/platform-browser';
+import {AppComponent} from './app/app.component';
+import {provideRouter} from '@angular/router';
+import {routes} from './app/app.routes';
+import {provideHttpClient} from '@angular/common/http';
+
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideRouter(routes),
+    provideHttpClient()
+  ]
+}).catch(err => console.error(err));
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch((err) => console.error(err));