[NG] Migrate App and Home to new style.

Signed-off-by: Juri Berlanda <juriberlanda@hotmail.com>

locateMe/src/app/app.component.spec.ts

@@ -1,15 +1,12 @@
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
-import { RouterTestingModule } from '@angular/router/testing';
+import { RouterModule } from '@angular/router';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule,
-      ],
-      declarations: [
-        AppComponent
+        RouterModule,
       ],
     }).compileComponents();
   });

locateMe/src/app/app.component.ts

@@ -1,8 +1,13 @@
 import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
+  standalone: true,
+  imports: [
+    RouterOutlet,
+  ],
 })
 export class AppComponent {
   title = 'locateMe';

locateMe/src/app/app.config.ts

@@ -0,0 +1,33 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { providePrimeNG } from 'primeng/config';
+import Lara from '@primeng/themes/lara';
+import { provideStore } from '@ngxs/store';
+import { environment } from '../environments/environment';
+import { MePositionState, OtherPositionState } from './store/states/app.state';
+import { MessageService } from 'primeng/api';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    // PrimeNG
+    provideAnimationsAsync(),
+    providePrimeNG({
+      theme: {
+          preset: Lara,
+        }
+    }),
+    // ngxs
+    provideStore([
+      MePositionState,
+      OtherPositionState,
+    ], {
+       developmentMode: !environment.production,
+    }),
+    MessageService,
+  ],
+};

locateMe/src/app/app.routes.ts

@@ -0,0 +1,20 @@
+import { Routes } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+import { MePositionState, OtherPositionState } from './store/states/app.state';
+import { provideStates } from '@ngxs/store';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: HomeComponent,
+    providers: [
+      provideStates([
+        MePositionState,
+        OtherPositionState,
+      ]),
+    ]
+  },
+  { path: 'trips', loadChildren: () => import('./route/route.module').then(m => m.RouteModule) },
+  { path: 'map', loadChildren: () => import('./map/map.module').then(m => m.MapModule) },
+  { path: 'test', redirectTo: '/#48.2009786+16.3693116+12', pathMatch: 'full', },
+];

locateMe/src/app/home/home.component.spec.ts

@@ -1,11 +1,10 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ActivatedRoute, Router } from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
-import { NgxsModule } from '@ngxs/store';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { NgxsModule, provideStore } from '@ngxs/store';
 import { of } from 'rxjs';
 
 import { HomeComponent } from './home.component';
-import { HomeModule } from './home.module';
+import { MePositionState, OtherPositionState } from '../store/states/app.state';
 
 const routerSpy = { navigate: jasmine.createSpy('navigate').and.returnValue(Promise.resolve(true)) };
 
@@ -16,11 +15,14 @@ describe('HomeComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule,
-        HomeModule,
-        NgxsModule.forRoot()
+        RouterModule,
+        HomeComponent,
       ],
       providers: [
+        provideStore([
+          MePositionState,
+          OtherPositionState,
+        ]),
         { provide: ActivatedRoute, useValue: { fragment: of('7+8+9'), } },
         { provide: Router, useValue: routerSpy },
       ],
@@ -55,8 +57,8 @@ describe('HomeComponent - no fragment', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule,
-        HomeModule,
+        RouterModule,
+        HomeComponent,
         NgxsModule.forRoot()
       ],
       providers: [

locateMe/src/app/home/home.component.ts

@@ -6,24 +6,35 @@ import { forgeGeolocation, Geolocation } from '../common';
 import { SEP_CHAR } from '../service/linkGenerator.service';
 import { PositionOther } from '../store/actions/position.actions';
 import { MePositionState, OtherPositionState } from '../store/states/app.state';
+import { WidgetsModule } from '../widgets/widgets.module';
+import { MessageService } from 'primeng/api';
 
 @Component({
   selector: 'app-home',
   styleUrls: ['./home.component.sass'],
   templateUrl: './home.component.html',
+  standalone: true,
+  imports: [
+    WidgetsModule,
+  ],
+  providers: [
+    MessageService,
+  ],
 })
 export class HomeComponent implements OnInit, OnDestroy {
 
-  positionMe$: Observable<Geolocation> = this.store.select(MePositionState.getState);
-  positionOther$: Observable<Geolocation> = this.store.select(OtherPositionState.getState);
+  positionMe$: Observable<Geolocation>;
+  positionOther$: Observable<Geolocation>;
 
   private onDestroy$: Subject<boolean> = new Subject();
 
   constructor(
     private route: ActivatedRoute,
-    private store: Store,
+    private readonly store: Store,
     private router: Router,
   ) {
+    this.positionMe$ = this.store.select(MePositionState.getState);
+    this.positionOther$ = this.store.select(OtherPositionState.getState);
   }
 
   ngOnInit() {

locateMe/src/app/store/states/app.state.ts

@@ -3,7 +3,7 @@ import * as Actions from '../actions/position.actions';
 import { Geolocation, geolocationOptions } from '../../common';
 import { MessageService } from 'primeng/api';
 import { Injectable } from '@angular/core';
-import { WlRoutingService } from 'src/app/service/wlRouting.service';
+import { WlRoutingService } from '../../service/wlRouting.service';
 import { catchError, map, of } from 'rxjs';
 
 const MSG_LOCATING = 'locating';

locateMe/src/main.ts

@@ -1,12 +1,13 @@
 import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));