refactor: ensure ECMAScript compliance (#286)

# Refactors
- Remove constructor parameter properties for ECMAScript compatibility
- Remove constructor parameter decorators for ECMAScript compatibility

Author: LayZeeDK

README.md

@@ -80,9 +80,10 @@ import { RouterStore } from '@ngworker/router-component-store';
   providedIn: 'root',
 })
 export class HeroService {
-  activeHeroId$: Observable<string> = this.routerStore.selectRouteParam('id');
+  #routerStore = inject(RouterStore);
 
-  constructor(private routerStore: RouterStore) {}
+  activeHeroId$: Observable<string | undefined> =
+    this.#routerStore.selectRouteParam('id');
 }
 ```
 
@@ -97,9 +98,10 @@ import { RouterStore } from '@ngworker/router-component-store';
   // (...)
 })
 export class HeroDetailComponent {
-  heroId$: Observable<string> = this.routerStore.selectRouteParam('id');
+  #routerStore = inject(RouterStore);
 
-  constructor(private routerStore: RouterStore) {}
+  heroId$: Observable<string | undefined> =
+    this.#routerStore.selectRouteParam('id');
 }
 ```
 
@@ -124,8 +126,9 @@ import {
   providers: [provideLocalRouterStore()],
 })
 export class HeroDetailComponent {
-  heroId$: Observable<string> = this.routerStore.selectRouteParam('id');
+  #routerStore = inject(RouterStore);
 
-  constructor(private routerStore: RouterStore) {}
+  heroId$: Observable<string | undefined> =
+    this.#routerStore.selectRouteParam('id');
 }
 ```

packages/router-component-store/src/lib/classic-routed-component-test.spec.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, NgModule } from '@angular/core';
+import { Component, inject, NgModule } from '@angular/core';
 import { ComponentFixtureAutoDetect, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { Router, RouterModule } from '@angular/router';
@@ -88,13 +88,11 @@ async function setup({
   `,
 })
 class ClassicRoutedComponent {
-  id$: Observable<string | undefined>;
-  url$: Observable<string>;
+  #routerStore = inject(RouterStore);
 
-  constructor(routerStore: RouterStore) {
-    this.id$ = routerStore.selectRouteParam('id');
-    this.url$ = routerStore.url$;
-  }
+  id$: Observable<string | undefined> =
+    this.#routerStore.selectRouteParam('id');
+  url$: Observable<string> = this.#routerStore.url$;
 }
 
 @NgModule({

packages/router-component-store/src/lib/global-router-store/global-router-store.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { Data, Params, Router } from '@angular/router';
 import { ComponentStore } from '@ngrx/component-store';
 import { map, Observable } from 'rxjs';
@@ -55,10 +55,7 @@ export class GlobalRouterStore
     (routerState) => routerState.url
   );
 
-  constructor(
-    @Inject(Router) router: Router,
-    serializer: MinimalRouterStateSerializer
-  ) {
+  constructor(router: Router, serializer: MinimalRouterStateSerializer) {
     super({
       routerState: serializer.serialize(router.routerState.snapshot),
     });

packages/router-component-store/src/lib/local-router-store/local-router-store-selectors.spec.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { Router, Routes } from '@angular/router';
@@ -18,15 +18,15 @@ class DummyAppComponent {}
   viewProviders: [provideLocalRouterStore()],
 })
 class DummyLoginComponent {
-  constructor(public store: RouterStore) {}
+  routerStore = inject(RouterStore);
 }
 
 describe(`${LocalRouterStore.name} selectors`, () => {
   const getStore = () =>
     (
       rootFixture.debugElement.query(By.directive(DummyLoginComponent))
         .componentInstance as DummyLoginComponent
-    ).store;
+    ).routerStore;
 
   beforeEach(async () => {
     const routes: Routes = [

packages/router-component-store/src/lib/local-router-store/local-router-store.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { ActivatedRoute, Data, Params, Router } from '@angular/router';
 import { ComponentStore } from '@ngrx/component-store';
 import { map, Observable } from 'rxjs';
@@ -46,8 +46,8 @@ export class LocalRouterStore
   );
 
   constructor(
-    @Inject(ActivatedRoute) route: ActivatedRoute,
-    @Inject(Router) router: Router,
+    route: ActivatedRoute,
+    router: Router,
     serializer: MinimalRouterStateSerializer
   ) {
     super({

packages/router-component-store/src/lib/local-router-store/provide-local-router-store.ts

@@ -26,9 +26,9 @@ import { LocalRouterStore } from './local-router-store';
  *   providers: [provideLocalRouterStore()],
  * })
  * export class HeroDetailComponent {
- *   heroId$: Observable<string> = this.routerStore.selectQueryParam('id');
+ *   #routerStore = inject(RouterStore);
  *
- *   constructor(private routerStore: RouterStore) {}
+ *   heroId$: Observable<string | undefined> = this.#routerStore.selectQueryParam('id');
  * }
  */
 export function provideLocalRouterStore(): Provider {

packages/router-component-store/src/lib/router-store.ts

@@ -26,9 +26,9 @@ import { MinimalActivatedRouteSnapshot } from './@ngrx/router-store/minimal_seri
  *   // (...)
  * })
  * export class HeroDetailComponent {
- *   heroId$: Observable<string> = this.routerStore.selectRouteParam('id');
+ *   #routerStore = inject(RouterStore);
  *
- *   constructor(private routerStore: RouterStore) {}
+ *   heroId$: Observable<string | undefined> = this.#routerStore.selectRouteParam('id');
  * }
  */
 @Injectable()

packages/router-component-store/src/lib/standalone-routed-component-test.spec.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ComponentFixtureAutoDetect, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { Router, RouterModule } from '@angular/router';
@@ -87,13 +87,11 @@ async function setup({
   `,
 })
 class StandaloneRoutedComponent {
-  id$: Observable<string | undefined>;
-  url$: Observable<string>;
+  #routerStore = inject(RouterStore);
 
-  constructor(routerStore: RouterStore) {
-    this.id$ = routerStore.selectRouteParam('id');
-    this.url$ = routerStore.url$;
-  }
+  id$: Observable<string | undefined> =
+    this.#routerStore.selectRouteParam('id');
+  url$: Observable<string> = this.#routerStore.url$;
 }
 
 @Component({