feat(project): update to Angular v19

.gitignore

@@ -39,4 +39,5 @@ testem.log
 Thumbs.db
 
 .nx/cache
+.nx/workspace-data
 .angular

.prettierignore

@@ -3,3 +3,5 @@
 /coverage
 .angular
 .nx
+
+/.nx/workspace-data

apps/ngx-popovers/.eslintrc.json

@@ -30,7 +30,8 @@
             "prefix": "ngx-popovers",
             "style": "kebab-case"
           }
-        ]
+        ],
+        "@angular-eslint/prefer-standalone": "off"
       }
     },
     {

apps/ngx-popovers/project.json

@@ -15,9 +15,6 @@
         "outputPath": "dist/apps/ngx-popovers",
         "index": "apps/ngx-popovers/src/index.html",
         "browser": "apps/ngx-popovers/src/main.ts",
-        "polyfills": [
-          "zone.js"
-        ],
         "tsConfig": "apps/ngx-popovers/tsconfig.app.json",
         "inlineStyleLanguage": "scss",
         "assets": [

apps/ngx-popovers/server.ts

@@ -1,5 +1,5 @@
 import { APP_BASE_HREF } from '@angular/common';
-import { CommonEngine } from '@angular/ssr';
+import { CommonEngine } from '@angular/ssr/node';
 import express from 'express';
 import { fileURLToPath } from 'node:url';
 import { dirname, join, resolve } from 'node:path';

apps/ngx-popovers/src/app/app.component.ts

@@ -1,11 +1,10 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { ArrowProvider } from './core/custom-arrow';
 import { PopoverProvider } from './core/custom-popover';
 import { TooltipConfigProvider, TooltipProvider } from './core/custom-tooltip';
 
 @Component({
-  standalone: true,
   imports: [
     RouterOutlet
   ],
@@ -17,7 +16,8 @@ import { TooltipConfigProvider, TooltipProvider } from './core/custom-tooltip';
     TooltipConfigProvider,
     PopoverProvider,
     ArrowProvider
-  ]
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppComponent {
 

apps/ngx-popovers/src/app/app.config.ts

@@ -1,4 +1,10 @@
-import { APP_INITIALIZER, ApplicationConfig, importProvidersFrom } from '@angular/core';
+import {
+  ApplicationConfig,
+  importProvidersFrom,
+  inject,
+  provideAppInitializer,
+  provideExperimentalZonelessChangeDetection
+} from '@angular/core';
 import { provideClientHydration } from '@angular/platform-browser';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideRouter, withInMemoryScrolling } from '@angular/router';
@@ -9,6 +15,7 @@ import { HighlightService } from '@demo/core/highlight/highlight.service';
 export const appConfig: ApplicationConfig = {
   providers: [
     provideClientHydration(),
+    provideExperimentalZonelessChangeDetection(),
     provideRouter(appRoutes, withInMemoryScrolling({
       scrollPositionRestoration: 'enabled',
       anchorScrolling: 'enabled'
@@ -17,16 +24,12 @@ export const appConfig: ApplicationConfig = {
     importProvidersFrom(
       LucideAngularModule.pick({ Code })
     ),
-    {
-      provide: APP_INITIALIZER,
-      useFactory: (service: HighlightService) => {
-        return () => service.init({
-          langs: ['ts', 'angular-html', 'scss', 'bash'],
-          themes: ['one-dark-pro']
-        });
-      },
-      deps: [HighlightService],
-      multi: true
-    }
+    provideAppInitializer(async () => {
+      const service = inject(HighlightService);
+      await service.init({
+        langs: ['ts', 'angular-html', 'scss', 'bash'],
+        themes: ['one-dark-pro']
+      });
+    })
   ]
 };

apps/ngx-popovers/src/app/app.d.ts

@@ -1,4 +1,4 @@
-declare module "*?raw" {
+declare module '*?raw' {
   const src: string;
   export default src;
 }

apps/ngx-popovers/src/app/core/custom-popover.ts

@@ -10,4 +10,4 @@ export const PopoverProvider: Provider = {
       flip()
     ]
   })
-}
+};

apps/ngx-popovers/src/app/core/custom-tooltip.ts

@@ -27,7 +27,7 @@ export const TooltipConfigProvider: Provider = {
     middleware: [
       flip(),
       shift(),
-      offset(8),
+      offset(8)
     ]
   })
 };

apps/ngx-popovers/src/app/core/highlight/code/code.component.spec.ts

@@ -7,7 +7,7 @@ describe('CodeComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [CodeComponent],
+      imports: [CodeComponent]
     }).compileComponents();
 
     fixture = TestBed.createComponent(CodeComponent);

apps/ngx-popovers/src/app/core/highlight/code/code.component.ts

@@ -6,7 +6,6 @@ import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
   selector: 'demo-code',
-  standalone: true,
   imports: [CommonModule],
   templateUrl: './code.component.html',
   styleUrl: './code.component.scss',

apps/ngx-popovers/src/app/core/highlight/highlight.component.spec.ts

@@ -7,7 +7,7 @@ describe('HighlightComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HighlightComponent],
+      imports: [HighlightComponent]
     }).compileComponents();
 
     fixture = TestBed.createComponent(HighlightComponent);

apps/ngx-popovers/src/app/core/highlight/highlight.component.ts

@@ -1,7 +1,6 @@
 import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Clipboard } from '@angular/cdk/clipboard';
-import { PortalComponent } from '@ngx-popovers/core';
 import { CodeComponent } from './code/code.component';
 
 enum CopyStatus {
@@ -12,11 +11,10 @@ enum CopyStatus {
 
 @Component({
   selector: 'highlight',
-  standalone: true,
-  imports: [CommonModule, PortalComponent, CodeComponent],
+  imports: [CommonModule, CodeComponent],
   templateUrl: './highlight.component.html',
   styleUrl: './highlight.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class HighlightComponent {
   code = input<string | null | {} | undefined>(undefined);

apps/ngx-popovers/src/app/pages/documentation/documentation-template.component.spec.ts

@@ -7,7 +7,7 @@ describe('DocumentationTemplateComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [DocumentationTemplateComponent],
+      imports: [DocumentationTemplateComponent]
     }).compileComponents();
 
     fixture = TestBed.createComponent(DocumentationTemplateComponent);

apps/ngx-popovers/src/app/pages/documentation/documentation-template.component.ts

@@ -3,15 +3,14 @@ import { CommonModule } from '@angular/common';
 import { FooterComponent } from '@demo/template/footer';
 import { FormsModule } from '@angular/forms';
 import { HeaderComponent } from '@demo/template/header';
-import { NavigationEnd, Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import { filter, tap } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DocNavigationComponent } from '@demo/pages/documentation/ui/components/doc-navigation';
 
 @Component({
   selector: 'ngx-popovers-documentation-template',
-  standalone: true,
-  imports: [CommonModule, FooterComponent, FormsModule, HeaderComponent, RouterLinkActive, RouterOutlet, RouterLink, DocNavigationComponent],
+  imports: [CommonModule, FooterComponent, FormsModule, HeaderComponent, RouterOutlet, DocNavigationComponent],
   templateUrl: './documentation-template.component.html',
   styleUrl: './documentation-template.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush

apps/ngx-popovers/src/app/pages/documentation/page-core/page-arrow/examples/1/index.component.html

@@ -1,8 +1,8 @@
 <div #reference>trigger</div>
 
-<ngx-floating 
-  [reference]="reference" 
-  placement="bottom" 
+<ngx-floating
+  [reference]="reference"
+  placement="bottom"
   bindTo="main"
 >
   <div class="floating">

apps/ngx-popovers/src/app/pages/documentation/page-core/page-arrow/examples/1/index.component.spec.ts

@@ -7,7 +7,7 @@ describe('IndexComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [IndexComponent],
+      imports: [IndexComponent]
     }).compileComponents();
 
     fixture = TestBed.createComponent(IndexComponent);

apps/ngx-popovers/src/app/pages/documentation/page-core/page-arrow/examples/1/index.component.ts

@@ -1,15 +1,15 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { Arrow, FloatingComponent } from "@ngx-popovers/core";
+import { Arrow, FloatingComponent } from '@ngx-popovers/core';
 
 @Component({
   selector: 'demo-index',
-  standalone: true,
   imports: [
     FloatingComponent,
     Arrow
   ],
   templateUrl: './index.component.html',
   styleUrl: './index.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class IndexComponent { }
+export class IndexComponent {
+}

apps/ngx-popovers/src/app/pages/documentation/page-core/page-arrow/examples/2/index.config.ts

@@ -1,5 +1,5 @@
-import { Component, Provider } from "@angular/core";
-import { ArrowBase, NGX_ARROW_COMPONENT } from "@ngx-popovers/core";
+import { Component, Provider } from '@angular/core';
+import { ArrowBase, NGX_ARROW_COMPONENT } from '@ngx-popovers/core';
 
 @Component({
   standalone: true,

apps/ngx-popovers/src/app/pages/documentation/page-core/page-arrow/page-arrow.component.spec.ts

@@ -10,8 +10,8 @@ describe('PageArrowComponent', () => {
     await TestBed.configureTestingModule({
       imports: [PageArrowComponent]
     })
-    .compileComponents();
-    
+      .compileComponents();
+
     fixture = TestBed.createComponent(PageArrowComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

apps/ngx-popovers/src/app/pages/documentation/page-core/page-arrow/page-arrow.component.ts

@@ -2,14 +2,13 @@ import { AsyncPipe, CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { HighlightComponent } from '@demo/core/highlight';
 import { TitleComponent } from '@demo/pages/documentation/ui/components/title/title.component';
-import { CodeExampleTabsComponent } from "../../ui/components/code-example-tabs/code-example-tabs.component";
-import { DocPageComponent } from "../../ui/components/doc-page/doc-page.component";
-import { DocSectionComponent } from "../../ui/components/doc-page/doc-section/doc-section.component";
-import { SubTitleComponent } from "../../ui/components/doc-page/sub-title/sub-title.component";
+import { CodeExampleTabsComponent } from '../../ui/components/code-example-tabs/code-example-tabs.component';
+import { DocPageComponent } from '../../ui/components/doc-page/doc-page.component';
+import { DocSectionComponent } from '../../ui/components/doc-page/doc-section/doc-section.component';
+import { SubTitleComponent } from '../../ui/components/doc-page/sub-title/sub-title.component';
 
 @Component({
   selector: 'ngx-popovers-page-arrow',
-  standalone: true,
   imports: [
     CommonModule,
     TitleComponent,
@@ -19,7 +18,7 @@ import { SubTitleComponent } from "../../ui/components/doc-page/sub-title/sub-ti
     SubTitleComponent,
     CodeExampleTabsComponent,
     AsyncPipe
-],
+  ],
   templateUrl: './page-arrow.component.html',
   styleUrl: './page-arrow.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush

apps/ngx-popovers/src/app/pages/documentation/page-core/page-click-outside/page-click-outside.component.spec.ts

@@ -7,7 +7,7 @@ describe('PageClickOutsideComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [PageClickOutsideComponent],
+      imports: [PageClickOutsideComponent]
     }).compileComponents();
 
     fixture = TestBed.createComponent(PageClickOutsideComponent);

apps/ngx-popovers/src/app/pages/documentation/page-core/page-click-outside/page-click-outside.component.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { TitleComponent } from '@demo/pages/documentation/ui/components/title/title.component';
 import { HighlightComponent } from '@demo/core/highlight';
 import { ExampleComponent } from '@demo/template/example';
-import { Arrow, ClickOutsideDirective, flip, FloatingComponent, offset } from '@ngx-popovers/core';
+import { ClickOutsideDirective, flip, FloatingComponent, offset } from '@ngx-popovers/core';
 import { animate, style, transition, trigger } from '@angular/animations';
 
 class LogItem {
@@ -51,15 +51,13 @@ export class ClickOutsideExample {
 
 @Component({
   selector: 'ngx-popovers-page-click-outside',
-  standalone: true,
   imports: [
     CommonModule,
     TitleComponent,
     HighlightComponent,
     ExampleComponent,
     ClickOutsideDirective,
-    FloatingComponent,
-    Arrow
+    FloatingComponent
   ],
   templateUrl: './page-click-outside.component.html',
   styleUrl: './page-click-outside.component.scss',

apps/ngx-popovers/src/app/pages/documentation/page-core/page-core.component.html

@@ -15,7 +15,8 @@ <h2 class="text-4xl mb-4 font-bold">About</h2>
     </p>
     <p class="text-lg py-4">
       <a [routerLink]="['/', 'docs', 'core']" class="link inline-flex gap-2 items-center">
-        <core-icon class="text-primary" /> Core package
+        <core-icon class="text-primary" />
+        Core package
       </a>
     </p>
 

apps/ngx-popovers/src/app/pages/documentation/page-core/page-core.component.ts

@@ -1,15 +1,14 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TitleComponent } from '@demo/pages/documentation/ui/components/title/title.component';
-import { ArrowIcon, ClickOutsideIcon, CoreIcon, FloatingIcon, PortalIcon } from '@demo/app-routes-icons';
+import { CoreIcon } from '@demo/app-routes-icons';
 import { RouterLink } from '@angular/router';
 import { HighlightComponent } from '@demo/core/highlight';
 import { ComponentsRoutes } from '@demo/app-routes';
 
 @Component({
   selector: 'ngx-popovers-page-core',
-  standalone: true,
-  imports: [CommonModule, TitleComponent, CoreIcon, RouterLink, HighlightComponent, PortalIcon, FloatingIcon, ClickOutsideIcon, ArrowIcon],
+  imports: [CommonModule, TitleComponent, CoreIcon, RouterLink, HighlightComponent],
   templateUrl: './page-core.component.html',
   styleUrl: './page-core.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

apps/ngx-popovers/src/app/pages/documentation/page-core/page-floating/examples/1/index.component.spec.ts

@@ -7,7 +7,7 @@ describe('IndexComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [IndexComponent],
+      imports: [IndexComponent]
     }).compileComponents();
 
     fixture = TestBed.createComponent(IndexComponent);

apps/ngx-popovers/src/app/pages/documentation/page-core/page-floating/examples/1/index.component.ts

@@ -4,7 +4,6 @@ import { Arrow, flip, FloatingComponent, offset, shift } from '@ngx-popovers/cor
 
 @Component({
   selector: 'demo-index',
-  standalone: true,
   imports: [
     CommonModule,
     FloatingComponent,

apps/ngx-popovers/src/app/pages/documentation/page-core/page-floating/examples/2/index.component.spec.ts

@@ -7,7 +7,7 @@ describe('IndexComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [IndexComponent],
+      imports: [IndexComponent]
     }).compileComponents();
 
     fixture = TestBed.createComponent(IndexComponent);

apps/ngx-popovers/src/app/pages/documentation/page-core/page-floating/examples/2/index.component.ts

@@ -5,7 +5,6 @@ import { flip } from '@floating-ui/dom';
 
 @Component({
   selector: 'demo-index',
-  standalone: true,
   imports: [
     CommonModule,
     Arrow,

apps/ngx-popovers/src/app/pages/documentation/page-core/page-floating/examples/3/index.component.spec.ts

@@ -7,7 +7,7 @@ describe('IndexComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [IndexComponent],
+      imports: [IndexComponent]
     }).compileComponents();
 
     fixture = TestBed.createComponent(IndexComponent);