Angular: update SSR section and all doc links (#6738)

api-reference/10 UI Components/DOMComponent/3 Methods/dispose().md

@@ -18,7 +18,7 @@ After calling this method, remove the DOM element associated with the UI compone
 
 ##### Angular
 
-Use <a href="https://angular.io/guide/built-in-directives#adding-or-removing-an-element-with-ngif" target="_blank">conditional rendering</a> instead of this method:
+Use <a href="https://angular.dev/guide/directives#adding-or-removing-an-element-with-ngif" target="_blank">conditional rendering</a> instead of this method:
 
     <!-- tab: app.component.html -->
     <dx-{widget-name} ...

api-reference/_hidden/dxMenuItem/url.md

@@ -117,7 +117,7 @@ If you specify a [template](/api-reference/_hidden/CollectionWidgetItem/template
         </dxi-item>  
     </dx-menu>
 
-If you use <a href="https://angular.io/guide/routing-overview" target="_blank">routing</a> for your project, specify `<a>` links inside items. Alternatively, you can implement the [onItemClick](/api-reference/10%20UI%20Components/dxMenu/1%20Configuration/onItemClick.md '/Documentation/ApiReference/UI_Components/dxMenu/Configuration/#onItemClick') event handler to process clicks on links.
+If you use <a href="https://angular.dev/guide/routing" target="_blank">routing</a> for your project, specify `<a>` links inside items. Alternatively, you can implement the [onItemClick](/api-reference/10%20UI%20Components/dxMenu/1%20Configuration/onItemClick.md '/Documentation/ApiReference/UI_Components/dxMenu/Configuration/#onItemClick') event handler to process clicks on links.
 
     <!-- tab: app.component.html -->
     <dx-menu>

concepts/05 UI Components/Diagram/05 Add the Diagram Component to an Angular CLI Application.md

@@ -1,4 +1,4 @@
-This tutorial adds the Diagram component to an Angular CLI Application. Refer to the <a href="https://cli.angular.io/" target="_blank">Angular CLI</a> documentation for information on how to create such an application.
+This tutorial adds the Diagram component to an Angular CLI Application. Refer to the <a href="https://angular.dev/cli" target="_blank">Angular CLI</a> documentation for information on how to create such an application.
 
 Install the `devextreme` and `devextreme-angular` npm packages:
 

concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/15 Implement Navigation.md

@@ -74,7 +74,7 @@ Each list item should navigate to a different view. To implement this, follow th
 
 1. **Define an [itemTemplate](/api-reference/10%20UI%20Components/dxList/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxList/Configuration/#itemTemplate')**
 
-    Specify the elements that the template should render and wrap them in an element with the <a href="https://angular.io/api/router/RouterLink" target="_blank">RouterLink</a> directive. In the code below, the *"links"* **itemTemplate** renders an icon and text.
+    Specify the elements that the template should render and wrap them in an element with the <a href="https://angular.dev/api/router/RouterLink" target="_blank">RouterLink</a> directive. In the code below, the *"links"* **itemTemplate** renders an icon and text.
 
 1. **Enable item selection**
 

concepts/40 Angular Components/00 DevExtreme Angular Components.md

@@ -1,6 +1,6 @@
 #include common-troubleunderstanding-note with {
     technology: "Angular",
-    docsLink: "https://angular.io/docs"
+    docsLink: "https://angular.dev/overview"
 }
 
 The DevExtreme Angular UI Component Suite is a feature-complete set of [70+ responsive and touch-enabled UI components](https://js.devexpress.com/Overview/Widgets/) for Angular applications. The suite includes a data grid, interactive charts, data editors, navigation and multi-purpose UI components.

concepts/40 Angular Components/10 Getting Started/03 Add DevExtreme to an Angular CLI Application/Add DevExtreme to an Angular CLI Application.md

@@ -1,3 +1,3 @@
-To start this tutorial, you need an Angular application created using the Angular CLI. Refer to the <a href="https://cli.angular.io/" target="_blank">Angular CLI</a> documentation for information on how to create such an application. You can also [create an Angular application with DevExtreme](/concepts/40%20Angular%20Components/10%20Getting%20Started/02%20Create%20a%20DevExtreme%20Application.md '/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/') already added to it.
+To start this tutorial, you need an Angular application created using the Angular CLI. Refer to the <a href="https://angular.dev/cli" target="_blank">Angular CLI</a> documentation for information on how to create such an application. You can also [create an Angular application with DevExtreme](/concepts/40%20Angular%20Components/10%20Getting%20Started/02%20Create%20a%20DevExtreme%20Application.md '/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/') already added to it.
 
 [tags] angular

concepts/40 Angular Components/20 Component Configuration Syntax/17 Collections.md

@@ -16,7 +16,7 @@ For properties that accept either an object or a collection, use UI components p
         </dxi-value-axis>
     </dx-chart>
 
-A special `dxi-` element, `dxi-item`, is designed to declare items in collection UI components. It supports <a href="https://angular.io/docs/ts/latest/guide/structural-directives" target="_blank">structural directives</a> provided by Angular, for instance, `ngFor`. The following code shows how to use `dxi-item` to declare items in the [List](https://js.devexpress.com/Demos/WidgetsGallery/Demo/List/ItemTemplate) UI component.
+A special `dxi-` element, `dxi-item`, is designed to declare items in collection UI components. It supports <a href="https://angular.dev/guide/directives/structural-directives" target="_blank">structural directives</a> provided by Angular, for instance, `ngFor`. The following code shows how to use `dxi-item` to declare items in the [List](https://js.devexpress.com/Demos/WidgetsGallery/Demo/List/ItemTemplate) UI component.
 
 `dxi-item` also supports directives that control parts of item appearance, such as `badge` in the code below. They are described in the [items](/api-reference/10%20UI%20Components/dxList/1%20Configuration/items '/Documentation/ApiReference/UI_Components/dxList/Configuration/items/') section of each collection UI component.
 

concepts/40 Angular Components/20 Component Configuration Syntax/37 Templates/External Templates.md

@@ -1,6 +1,6 @@
-External templates are created using the <a href="https://angular.io/guide/structural-directives#the-ng-template" target="_blank">`ng-template`</a> element. The following code replicates the example above, but here the **itemTemplate** is the external template. The **groupTemplate** is omitted.
+External templates are created using the <a href="https://angular.dev/api/core/ng-template#" target="_blank">`ng-template`</a> element. The following code replicates the example above, but here the **itemTemplate** is the external template. The **groupTemplate** is omitted.
 
-The <a href="https://angular.io/api/common/NgTemplateOutlet" target="_blank">`ngTemplateOutlet`</a> directive uses a <a href="https://angular.io/guide/template-reference-variables" target="_blank">template reference variable</a> to reference the external template. The `ngTemplateOutletContext` directive specifies variables that are accessible in the template.
+The <a href="https://angular.dev/api/common/NgTemplateOutlet#" target="_blank">`ngTemplateOutlet`</a> directive uses a <a href="https://angular.dev/guide/templates/variables#template-reference-variables" target="_blank">template reference variable</a> to reference the external template. The `ngTemplateOutletContext` directive specifies variables that are accessible in the template.
 
     <!-- tab: custom-list.component.html -->
     <dx-list [items]="items" itemTemplate="listItem">
@@ -16,7 +16,7 @@ The <a href="https://angular.io/api/common/NgTemplateOutlet" target="_blank">`ng
         {{index}} - {{data.itemProperty}}
     </ng-template>
 
-In the previous code, the external template is used in the same component in which it is declared. The following code illustrates the case when the external template is declared in another component. The `ngTemplateOutlet` directive should be set to an <a href="https://angular.io/guide/inputs-outputs" target="_blank">input property</a> in this case:
+In the previous code, the external template is used in the same component in which it is declared. The following code illustrates the case when the external template is declared in another component. The `ngTemplateOutlet` directive should be set to an <a href="https://angular.dev/guide/components/inputs" target="_blank">input property</a> in this case:
 
     <!-- tab: parent.component.html -->
     <ng-template #customItemTemplate let-data="itemData" let-index="itemIndex">

concepts/40 Angular Components/20 Component Configuration Syntax/42 Call Methods.md

@@ -1,4 +1,4 @@
-To call UI component methods, you need its instance. To access it, use the `@ViewChild` or `@ViewChildren` decorator (depending on whether you are getting a single or multiple UI component instances) and the component's `instance` property. These decorators accept a component name or a <a href="https://angular.io/guide/template-reference-variables" target="_blank">template reference variable</a>. The following code illustrates this approach by the example of the [DataGrid](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Overview):  
+To call UI component methods, you need its instance. To access it, use the `@ViewChild` or `@ViewChildren` decorator (depending on whether you are getting a single or multiple UI component instances) and the component's `instance` property. These decorators accept a component name or a <a href="https://angular.dev/guide/templates/variables#template-reference-variables" target="_blank">template reference variable</a>. The following code illustrates this approach by the example of the [DataGrid](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Overview):  
 
     <!-- tab: app.component.ts -->
     import { Component, ViewChild } from "@angular/core";

concepts/40 Angular Components/20 Component Configuration Syntax/44 Get a UI Component Instance.md

@@ -1,6 +1,6 @@
 You can access a UI component instance in the component as described in [Call Methods](/concepts/40%20Angular%20Components/20%20Component%20Configuration%20Syntax/42%20Call%20Methods.md '/Documentation/Guide/Angular_Components/Component_Configuration_Syntax/#Call_Methods').
 
-You can also use <a href="https://angular.io/guide/template-reference-variables" target="_blank">template reference variables</a> to access a UI component instance in the markup:
+You can also use <a href="https://angular.dev/guide/templates/variables#template-reference-variables" target="_blank">template reference variables</a> to access a UI component instance in the markup:
 
     <!--HTML-->
     <dx-select-box #targetSelectBox [items]="items"></dx-select-box>

concepts/40 Angular Components/20 Component Configuration Syntax/75 Angular Forms Support.md

@@ -1,4 +1,4 @@
-DevExtreme editors support the `formControlName` directive needed for features of <a href="https://angular.io/guide/reactive-forms" target="_blank">reactive forms</a>...
+DevExtreme editors support the `formControlName` directive needed for features of <a href="https://angular.dev/guide/forms/reactive-forms" target="_blank">reactive forms</a>...
 
     <!-- tab: app.component.html -->
     <form [formGroup]="myForm">
@@ -41,7 +41,7 @@ DevExtreme editors support the `formControlName` directive needed for features o
     })
     export class AppModule { }
 
-... and `ngModel` binding necessary to use the editors in <a href="https://angular.io/guide/forms" target="_blank">template-driven forms</a>:
+... and `ngModel` binding necessary to use the editors in <a href="https://angular.dev/guide/forms" target="_blank">template-driven forms</a>:
 
     <!-- tab: app.component.html -->
     <form>

concepts/40 Angular Components/20 Component Configuration Syntax/85 Angular Change Detection Specifics.md

@@ -85,7 +85,7 @@ To work around this behavior, implement one of the following techniques:
         };
     }
 
-**Rewrite a component’s class method to a custom [Angular pipe](https://angular.io/guide/pipes-custom-data-trans).**
+**Rewrite a component’s class method to a custom [Angular pipe](https://angular.dev/guide/templates/pipes).**
 
     <!-- tab: app.component.ts -->
     import { 

concepts/40 Angular Components/40 Common Features/05 Server-Side Rendering/00 Server-Side Rendering.md

@@ -1,21 +1,45 @@
 Server-side rendering (SSR) generates static pages on the server to reduce the application's loading time.
 
-Follow the [Angular guide on SSR](https://angular.io/guide/ssr) to create Angular project with SSR or add SSR to an existing project.
+Follow the [Angular guide on SSR](https://angular.dev/guide/ssr) to create Angular project with SSR or add SSR to an existing project.
 
 Then, [add DevExtreme components](/concepts/40%20Angular%20Components/10%20Getting%20Started/03%20Add%20DevExtreme%20to%20an%20Angular%20CLI%20Application '/Documentation/Guide/Angular_Components/Getting_Started/Add_DevExtreme_to_an_Angular_CLI_Application/') to your application.
 
-To finish DevExtreme SSR configuration, import the `DxServerModule` in the `app.config.server.ts` file:
+To finish DevExtreme SSR configuration, import `DxServerModule` in the `app.module.server.ts` file:
 
-    <!-- tab: app.config.server.ts -->
+    <!-- tab: app.module.server.ts -->
+    import { NgModule } from '@angular/core';
+    import { ServerModule } from '@angular/platform-server';
+
+    import { AppModule } from './app.module';
+    import { AppComponent } from './app.component';
     import { DxServerModule } from 'devextreme-angular/server';
-    // ...
+
     @NgModule({
         imports: [
-            // ...
+            AppModule,
+            ServerModule,
             DxServerModule
         ],
-        // ...
+        bootstrap: [AppComponent],
     })
+    export class AppServerModule {}
+
+If you use standalone components, import `DxServerModule` in the `app.config.server.ts` file:
+
+    <!-- tab: app.config.server.ts -->
+    import { mergeApplicationConfig, ApplicationConfig, importProvidersFrom } from '@angular/core';
+    import { provideServerRendering } from '@angular/platform-server';
+    import { DxServerModule } from 'devextreme-angular/server';
+
+    import { appConfig } from './app.config';
+
+    const serverConfig: ApplicationConfig = {
+        providers: [
+            provideServerRendering(), importProvidersFrom(DxServerModule)
+        ]
+    };
+
+    export const config = mergeApplicationConfig(appConfig, serverConfig);
 
 [note] DevExtreme Angular components do not support [switching between themes at runtime](/concepts/60%20Themes%20and%20Styles/05%20Predefined%20Themes/60%20Switch%20Between%20Themes%20at%20Runtime '/Documentation/Guide/Themes_and_Styles/Predefined_Themes/#Switch_Between_Themes_at_Runtime') in the SSR mode. You can only [use a single theme](/concepts/40%20Angular%20Components/10%20Getting%20Started/03%20Add%20DevExtreme%20to%20an%20Angular%20CLI%20Application/03%20Configure%20Stylesheets.md '/Documentation/Guide/Angular_Components/Getting_Started/Add_DevExtreme_to_an_Angular_CLI_Application/#Configure_Stylesheets').
 

concepts/40 Angular Components/40 Common Features/15 Intercept HTTP Requests.md

@@ -8,7 +8,7 @@ HTTP request interception in DevExtreme components might be useful for the follo
 
 - Track upload progress and display a progress bar.
 
-In Angular apps, you can use [HttpInterceptor](https://angular.io/api/common/http/HttpInterceptor) to intercept Ajax requests in DevExtreme components such as [DataSource](/api-reference/30%20Data%20Layer/DataSource '/Documentation/ApiReference/Data_Layer/DataSource/'), [FileUploader](/api-reference/10%20UI%20Components/dxFileUploader '/Documentation/ApiReference/UI_Components/dxFileUploader/'), and [Map](/api-reference/10%20UI%20Components/dxMap '/Documentation/ApiReference/UI_Components/dxMap/'). This task requires that you import `DxHttpModule`.
+In Angular apps, you can use [HttpInterceptor](https://angular.dev/api/common/http/HttpInterceptor) to intercept Ajax requests in DevExtreme components such as [DataSource](/api-reference/30%20Data%20Layer/DataSource '/Documentation/ApiReference/Data_Layer/DataSource/'), [FileUploader](/api-reference/10%20UI%20Components/dxFileUploader '/Documentation/ApiReference/UI_Components/dxFileUploader/'), and [Map](/api-reference/10%20UI%20Components/dxMap '/Documentation/ApiReference/UI_Components/dxMap/'). This task requires that you import `DxHttpModule`.
 
 [note] If you use `DxHttpModule`, Angular restricts access to [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest). This means you cannot get the XHR object in functions such as ODataContext.[errorHandler](/api-reference/30%20Data%20Layer/ODataContext/1%20Configuration/errorHandler.md '/Documentation/ApiReference/Data_Layer/ODataContext/Configuration/#errorHandler'), FileManager.fileSystemProvider.[beforeAjaxSend](/api-reference/10%20UI%20Components/dxFileManager/5%20File%20System%20Providers/Remote/1%20Configuration/beforeAjaxSend.md '/Documentation/ApiReference/UI_Components/dxFileManager/File_System_Providers/Remote/Configuration/#beforeAjaxSend'), FileUploader.[onUploadStarted](/api-reference/10%20UI%20Components/dxFileUploader/1%20Configuration/onUploadStarted.md '/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#onUploadStarted'), etc.
 

concepts/Common/Security Considerations/Security Considerations.md

@@ -4,7 +4,7 @@ This help topic describes potential security vulnerabilities and what you can do
 ##### Angular
 
 #####See Also#####
-- <a href="https://angular.io/guide/security" target="_blank">Security in Angular</a>
+- <a href="https://angular.dev/best-practices/security" target="_blank">Security in Angular</a>
 
 ##### Vue