Feature/angular 20 update and migration

.eslintrc.json

@@ -75,7 +75,15 @@
 				"@typescript-eslint/no-explicit-any": "off",
 				"@typescript-eslint/no-empty-function": "off",
 				"@typescript-eslint/ban-types": "off",
-				"@typescript-eslint/no-unused-vars": "off"
+				"@typescript-eslint/no-unused-vars": "off",
+				"no-unused-expressions": "off",
+				"@typescript-eslint/no-unused-expressions": [
+					"error",
+					{
+						"allowTernary": true,
+						"allowShortCircuit": true
+					}
+				]
 			}
 		},
 		{

.gitignore

@@ -62,4 +62,7 @@ Thumbs.db
 
 # NgDoc files
 /ng-doc
-vite.config.*.timestamp*
+vite.config.*.timestamp*
+vitest.config.*.timestamp*
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md

.husky/pre-commit

@@ -11,4 +11,4 @@ then
     fnm use
 fi
 
-npm run lint:all && npm run format && npm run test:all
+npm run format:check && npm run lint:check && npm run test

.nvmrc

@@ -1 +1 @@
-lts/hydrogen
+lts/jod

LICENSE

@@ -1,4 +1,4 @@
-MIT License
+lcMIT License
 
 Copyright (c) 2023 Studio Hyperdrive
 

apps/cookies-test/project.json

@@ -95,7 +95,8 @@
 			"executor": "@nx/jest:jest",
 			"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
 			"options": {
-				"jestConfig": "apps/cookies-test/jest.config.ts"
+				"jestConfig": "apps/cookies-test/jest.config.ts",
+				"tsConfig": "apps/cookies-test/tsconfig.spec.json"
 			}
 		},
 		"stylelint": {

apps/cookies-test/src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { NgDocRootComponent, NgDocNavbarComponent, NgDocSidebarComponent } from '@ng-doc/app';
-import { Component, AfterViewInit, OnInit } from '@angular/core';
+import { Component, AfterViewInit, OnInit, inject } from '@angular/core';
 import { Observable } from 'rxjs';
-import { CommonModule } from '@angular/common';
+
 import { RouterModule } from '@angular/router';
 import { CookieAlertComponent } from './cookies.component';
 import { NgxCookieService, NgxCookiesFallbackComponentToken } from '@ngx/cookies';
@@ -11,13 +11,7 @@ import { NgxStorageService } from '@ngx/utils';
 	selector: 'app-root',
 	templateUrl: './app.component.html',
 	styleUrl: './app.component.scss',
-	imports: [
-		CommonModule,
-		RouterModule,
-		NgDocRootComponent,
-		NgDocNavbarComponent,
-		NgDocSidebarComponent,
-	],
+	imports: [RouterModule, NgDocRootComponent, NgDocNavbarComponent, NgDocSidebarComponent],
 	providers: [
 		{
 			provide: NgxCookiesFallbackComponentToken,
@@ -26,6 +20,9 @@ import { NgxStorageService } from '@ngx/utils';
 	],
 })
 export class AppComponent implements AfterViewInit, OnInit {
+	private readonly ngxCookieService = inject(NgxCookieService);
+	private readonly sessionService = inject(NgxStorageService);
+
 	title = 'cookies-test';
 
 	generalAccepted$: Observable<boolean> = this.ngxCookieService.hasAcceptedCategory('general');
@@ -39,11 +36,6 @@ export class AppComponent implements AfterViewInit, OnInit {
 	isAuthenticated$: Observable<boolean> =
 		this.ngxCookieService.getCookieObservable<boolean>('authenticated');
 
-	constructor(
-		private readonly ngxCookieService: NgxCookieService,
-		private readonly sessionService: NgxStorageService
-	) {}
-
 	ngAfterViewInit() {
 		this.ngxCookieService.setupCookiesHandler(
 			{

apps/cookies-test/src/app/app.config.ts

@@ -11,8 +11,9 @@ import { provideHttpClient, withInterceptorsFromDi, withFetch } from '@angular/c
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { ApplicationConfig } from '@angular/core';
 import { provideRouter, withInMemoryScrolling } from '@angular/router';
+
 import { appRoutes } from './app.routes';
-import { NG_DOC_ROUTING, provideNgDocContext } from '@ng-doc/generated';
+import { NG_DOC_ROUTING, provideNgDocContext } from '@ng-doc/generated'; // eslint-disable-line @nx/enforce-module-boundaries
 
 export const appConfig: ApplicationConfig = {
 	providers: [

apps/cookies-test/tsconfig.app.json

@@ -6,7 +6,8 @@
 			"@ng-doc/generated/*": ["./ng-doc/cookies-test/*"],
 			"@ngx/cookies": ["libs/angular/cookies/src/index.ts"],
 			"@ngx/utils": ["libs/angular/utils/src/public-api.ts"]
-		}
+		},
+		"moduleResolution": "bundler"
 	},
 	"extends": "../../tsconfig.json",
 	"files": ["src/main.ts"],

apps/docs/project.json

@@ -123,7 +123,8 @@
 					"serverTarget": "docs:server:production"
 				}
 			},
-			"defaultConfiguration": "development"
+			"defaultConfiguration": "development",
+			"continuous": true
 		},
 		"prerender": {
 			"executor": "@angular-devkit/build-angular:prerender",

apps/docs/src/app/app.config.server.ts

@@ -1,5 +1,5 @@
+import { provideServerRendering } from '@angular/ssr';
 import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
-import { provideServerRendering } from '@angular/platform-server';
 import { appConfig } from './app.config';
 
 const serverConfig: ApplicationConfig = {

apps/docs/src/app/app.config.ts

@@ -12,8 +12,9 @@ import { provideAnimations } from '@angular/platform-browser/animations';
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter, withInMemoryScrolling } from '@angular/router';
 import { provideClientHydration } from '@angular/platform-browser';
+
 import { appRoutes } from './app.routes';
-import { NG_DOC_ROUTING, provideNgDocContext } from '@ng-doc/generated';
+import { NG_DOC_ROUTING, provideNgDocContext } from '@ng-doc/generated'; // eslint-disable-line @nx/enforce-module-boundaries
 
 export const appConfig: ApplicationConfig = {
 	providers: [

apps/docs/src/app/pages/docs/angular/forms/implementation/form-accessor/demos/simple/simple.demo.component.ts

@@ -1,11 +1,11 @@
 // snippet#component "Typescript"
-import { CommonModule } from '@angular/common';
+
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { DateInputComponent } from './date-input/date-input.component';
 
 @Component({
-	imports: [CommonModule, ReactiveFormsModule, DateInputComponent],
+	imports: [ReactiveFormsModule, DateInputComponent],
 	selector: 'simple-demo',
 	templateUrl: 'simple.demo.component.html',
 	changeDetection: ChangeDetectionStrategy.OnPush,

apps/docs/src/app/pages/docs/angular/forms/implementation/ngxerrors/demos/ngxerrors/error/error.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { NgxFormsErrorAbstractComponent } from '@ngx/forms';
 
 @Component({
@@ -15,6 +15,6 @@ import { NgxFormsErrorAbstractComponent } from '@ngx/forms';
 	`,
 	styleUrls: ['./error.component.scss'],
 	standalone: true,
-	imports: [CommonModule],
+	imports: [],
 })
 export class FormErrorComponent extends NgxFormsErrorAbstractComponent {}

apps/docs/src/app/pages/docs/angular/forms/implementation/ngxerrors/demos/ngxerrors/ngxerrors.demo.component.ts

@@ -1,13 +1,13 @@
 // snippet#component "Typescript"
-import { CommonModule } from '@angular/common';
+
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { FormAccessorComponent } from './form-accessor.component';
 import { FormErrorComponent } from './error/error.component';
 import { FormAccessorContainer, NgxFormsErrorsConfigurationToken } from '@ngx/forms';
 
 @Component({
-	imports: [CommonModule, ReactiveFormsModule, FormAccessorComponent],
+	imports: [ReactiveFormsModule, FormAccessorComponent],
 	selector: 'ngxerrors-demo',
 	templateUrl: 'ngxerrors.demo.component.html',
 	changeDetection: ChangeDetectionStrategy.OnPush,

apps/docs/src/app/pages/docs/angular/inform/implementation/directives/demos/tooltip/tooltip.demo.component.ts

@@ -1,13 +1,13 @@
 // snippet-from-file="./bootstrap.demo.ts" "Application Config"
 
 // snippet#component "Typescript"
-import { CommonModule } from '@angular/common';
+
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { CustomTooltipComponent } from './custom-tooltip.component';
 import { NgxTooltipDirective } from '@ngx/inform';
 
 @Component({
-	imports: [CommonModule, NgxTooltipDirective],
+	imports: [NgxTooltipDirective],
 	selector: 'tooltip-demo',
 	templateUrl: './tooltip.demo.component.html',
 	changeDetection: ChangeDetectionStrategy.OnPush,

apps/docs/src/app/pages/docs/angular/inform/implementation/services/demos/modal/modal.demo.component.ts

@@ -1,20 +1,20 @@
 // snippet-from-file="./bootstrap.demo.ts" "Application Config"
 
 // snippet#component "Typescript"
-import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { tap } from 'rxjs';
 import { ModalComponent } from './modal.component';
 import { NgxModalService } from '@ngx/inform';
 
 @Component({
-	imports: [CommonModule],
+	imports: [],
 	selector: 'modal-demo',
 	templateUrl: './modal.demo.component.html',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ModalDemoComponent {
-	constructor(private readonly modalService: NgxModalService) {}
+	private readonly modalService = inject(NgxModalService);
 
 	public sayHello(): void {
 		this.modalService

apps/docs/src/app/pages/docs/angular/layout/implementation/components/demos/configurable/configurable.demo.component.ts

@@ -3,11 +3,11 @@
 
 // snippet#component "Typescript"
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { NgxConfigurableLayoutComponent, NgxConfigurableLayoutItemComponent } from '@ngx/layout';
 
 @Component({
-	imports: [CommonModule, NgxConfigurableLayoutComponent, NgxConfigurableLayoutItemComponent],
+	imports: [NgxConfigurableLayoutComponent, NgxConfigurableLayoutItemComponent],
 	selector: 'layout-configurable-demo',
 	templateUrl: './configurable.demo.component.html',
 	styleUrl: './configurable.demo.component.scss',

apps/docs/src/app/pages/docs/angular/store/implementation/index.md

@@ -153,13 +153,21 @@ export const { actions, reducers, selectors } = createStoreAssets<StoreState>('s
 	},
 ]);
 
+// For an example where the selectors do not need to be provided:
 @Injectable()
 export class StoreStateService extends NgxStoreService<StoreState> {
-	constructor(protected readonly store: Store) {
-		super(store, selectors);
-	}
+    private readonly store = inject(Store);
 }
 
+// When the selectors need to be provided:
+@Injectable()
+export class StoreStateService extends NgxStoreService<StoreState> {
+    private readonly store = inject(Store);
+
+    constructor() {
+        super(store, selectors);
+    }
+
 const storeStateService = new StoreStateService(store);
 
 const state = storeStateService.state;

apps/docs/src/app/pages/docs/angular/table/implementation/detail-row/demos/detail-row-1/detail-row-one.demo.component.ts

@@ -1,10 +1,9 @@
-import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NgxTable } from '@ngx/table';
 
 @Component({
-	imports: [CommonModule, NgxTable, ReactiveFormsModule],
+	imports: [NgxTable, ReactiveFormsModule],
 	selector: 'detail-row-one-demo',
 	templateUrl: './detail-row-one.demo.component.html',
 })

apps/docs/src/app/pages/docs/angular/table/implementation/header/demos/header-loading-state/header-loading-state.demo.component.ts

@@ -1,10 +1,9 @@
-import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NgxTable } from '@ngx/table';
 
 @Component({
-	imports: [CommonModule, NgxTable, ReactiveFormsModule],
+	imports: [NgxTable, ReactiveFormsModule],
 	selector: 'header-loading-state-demo',
 	templateUrl: './header-loading-state.demo.component.html',
 })

apps/docs/src/app/pages/docs/angular/table/implementation/loading-and-empty-state/demos/loading-state/loading-state.demo.component.ts

@@ -1,10 +1,9 @@
-import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NgxTable } from '@ngx/table';
 
 @Component({
-	imports: [CommonModule, NgxTable, ReactiveFormsModule],
+	imports: [NgxTable, ReactiveFormsModule],
 	selector: 'loading-state-demo',
 	templateUrl: './loading-state.demo.component.html',
 })

apps/docs/src/app/pages/docs/angular/table/implementation/sorting-selecting-row-actions/demos/actions/actions.demo.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { NgDocNotifyService } from '@ng-doc/ui-kit';
 import { NgxTable } from '@ngx/table';
@@ -9,7 +9,7 @@ import { NgxTable } from '@ngx/table';
 	templateUrl: './actions.demo.component.html',
 })
 export class ActionsDemoComponent {
-	constructor(private readonly notifyService: NgDocNotifyService) {}
+	private readonly notifyService = inject(NgDocNotifyService);
 
 	public control: FormControl<number[]> = new FormControl();
 	public customControl: FormControl<number[]> = new FormControl();

apps/docs/src/app/pages/docs/angular/tour/implementation/demos/tour/pages/main/main.component.ts

@@ -1,4 +1,10 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import {
+	ChangeDetectionStrategy,
+	ChangeDetectorRef,
+	Component,
+	OnInit,
+	inject,
+} from '@angular/core';
 
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { from, map, of, tap } from 'rxjs';
@@ -31,6 +37,11 @@ import { NgxTourItemDirective, NgxTourService, useMockDataDuringTour } from '@ng
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MainComponent implements OnInit {
+	private readonly tourService = inject(NgxTourService);
+	private readonly router = inject(Router);
+	private readonly route = inject(ActivatedRoute);
+	private readonly cdRef = inject(ChangeDetectorRef);
+
 	public control: FormControl<NgxConfigurableLayoutGrid> = new FormControl([]);
 	public isActive: FormControl<boolean> = new FormControl(false);
 	public dragAndDrop: FormControl<boolean> = new FormControl(true);
@@ -46,13 +57,6 @@ export class MainComponent implements OnInit {
 		useMockDataDuringTour<string>('The tour is running!')
 	);
 
-	constructor(
-		private readonly tourService: NgxTourService,
-		private readonly router: Router,
-		private readonly route: ActivatedRoute,
-		private readonly cdRef: ChangeDetectorRef
-	) {}
-
 	ngOnInit() {
 		this.control.patchValue([
 			[

apps/docs/src/app/pages/docs/angular/utils/directives/focus-click/demos/click-focus/click-focus.demo.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { NgDocNotifyService } from '@ng-doc/ui-kit';
 import { FocusClickDirective } from '@ngx/utils';
 
@@ -8,7 +8,7 @@ import { FocusClickDirective } from '@ngx/utils';
 	templateUrl: 'click-focus.demo.component.html',
 })
 export class ClickFocusDemoComponent {
-	constructor(private readonly notifyService: NgDocNotifyService) {}
+	private readonly notifyService = inject(NgDocNotifyService);
 
 	public doSomething(): void {
 		this.notifyService.notify('Done something');

apps/docs/src/app/pages/docs/angular/utils/pipes/has-observers/demos/has-observers-parent-component/has-observers-parent.demo.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { NgDocNotifyService } from '@ng-doc/ui-kit';
 import { HasObserversPipeDemoComponent } from '../has-observers-component/has-observers.demo.component';
 
@@ -8,7 +8,7 @@ import { HasObserversPipeDemoComponent } from '../has-observers-component/has-ob
 	templateUrl: 'has-observers-parent.demo.component.html',
 })
 export class HasObserversPipeDemoParentComponent {
-	constructor(private readonly notifyService: NgDocNotifyService) {}
+	private readonly notifyService = inject(NgDocNotifyService);
 
 	public doSomething(event: any): void {
 		this.notifyService.notify(event);