standalone step 3 and all providers in root

src/app/app-routing.module.ts

@@ -1,11 +1,8 @@
-import { RouterModule } from '@angular/router';
-import { NgModule } from '@angular/core';
+import { Route } from '@angular/router';
 import { NotfoundComponent } from './demo/components/notfound/notfound.component';
 import { AppLayoutComponent } from "./layout/app.layout.component";
 
-@NgModule({
-    imports: [
-        RouterModule.forRoot([
+export const APP_ROUTES: Route[] = [
     {
         path: '', component: AppLayoutComponent,
         children: [
@@ -21,9 +18,4 @@ import { AppLayoutComponent } from "./layout/app.layout.component";
     { path: 'landing', loadChildren: () => import('./demo/components/landing/landing.module').then(m => m.LandingModule) },
     { path: 'notfound', component: NotfoundComponent },
     { path: '**', redirectTo: '/notfound' },
-        ], { scrollPositionRestoration: 'enabled', anchorScrolling: 'enabled', onSameUrlNavigation: 'reload' })
-    ],
-    exports: [RouterModule]
-})
-export class AppRoutingModule {
-}
+];

src/app/demo/service/country.service.ts

@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 
-@Injectable()
+@Injectable({ providedIn: 'root'})
 export class CountryService {
 
     constructor(private http: HttpClient) { }

src/app/demo/service/customer.service.ts

@@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Customer } from '../api/customer';
 
-@Injectable()
+@Injectable({ providedIn: 'root'})
 export class CustomerService {
 
     constructor(private http: HttpClient) { }

src/app/demo/service/event.service.ts

@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 
-@Injectable()
+@Injectable({ providedIn: 'root'})
 export class EventService {
 
     constructor(private http: HttpClient) { }

src/app/demo/service/icon.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { map } from 'rxjs/operators';
 
-@Injectable()
+@Injectable({ providedIn: 'root'})
 export class IconService {
 
     constructor(private http: HttpClient) { }

src/app/demo/service/node.service.ts

@@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { TreeNode } from 'primeng/api';
 
-@Injectable()
+@Injectable({ providedIn: 'root'})
 export class NodeService {
 
     constructor(private http: HttpClient) { }

src/app/demo/service/photo.service.ts

@@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Image } from '../api/image';
 
-@Injectable()
+@Injectable({ providedIn: 'root'})
 export class PhotoService {
 
     constructor(private http: HttpClient) { }

src/app/demo/service/product.service.ts

@@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Product } from '../api/product';
 
-@Injectable()
+@Injectable({ providedIn: 'root'})
 export class ProductService {
 
     constructor(private http: HttpClient) { }

src/main.ts

@@ -1,19 +1,12 @@
 import { enableProdMode, importProvidersFrom } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-
 import { environment } from './environments/environment';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
-import { AppRoutingModule } from './app/app-routing.module';
-import { ProductService } from './app/demo/service/product.service';
-import { PhotoService } from './app/demo/service/photo.service';
-import { NodeService } from './app/demo/service/node.service';
-import { IconService } from './app/demo/service/icon.service';
-import { EventService } from './app/demo/service/event.service';
-import { CustomerService } from './app/demo/service/customer.service';
-import { CountryService } from './app/demo/service/country.service';
+import { APP_ROUTES } from './app/app-routing.module';
 import { LocationStrategy, HashLocationStrategy } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { provideAnimations } from '@angular/platform-browser/animations'
+import { HttpClientModule } from '@angular/common/http';
 
 if (environment.production) {
     enableProdMode();
@@ -21,10 +14,8 @@ if (environment.production) {
 
 bootstrapApplication(AppComponent, {
     providers: [
-        importProvidersFrom(AppRoutingModule),
+        importProvidersFrom(RouterModule.forRoot(APP_ROUTES), HttpClientModule),
+        provideAnimations(),
         { provide: LocationStrategy, useClass: HashLocationStrategy },
-        CountryService, CustomerService, EventService, IconService, NodeService,
-        PhotoService, ProductService
-    ]
-})
-  .catch(err => console.error(err));
+    ],
+}).catch((err) => console.error(err));