diff --git a/Directory.Packages.props b/Directory.Packages.props
index 5b6839ec30..0a7d88c504 100644
--- a/Directory.Packages.props
+++ b/Directory.Packages.props
@@ -168,7 +168,7 @@
-
+
diff --git a/abp_io/AbpIoLocalization/AbpIoLocalization/Www/Localization/Resources/en.json b/abp_io/AbpIoLocalization/AbpIoLocalization/Www/Localization/Resources/en.json
index 18730b51d6..981500451a 100644
--- a/abp_io/AbpIoLocalization/AbpIoLocalization/Www/Localization/Resources/en.json
+++ b/abp_io/AbpIoLocalization/AbpIoLocalization/Www/Localization/Resources/en.json
@@ -1553,6 +1553,15 @@
"IntegrateToYourKubernetesCluster_Description1": "Connect your local development environment to a local or remote Kubernetes cluster, where that cluster already runs your microservice solution.",
"IntegrateToYourKubernetesCluster_Description2": "Access any service in Kubernetes with their service name as DNS, just like they are running in your local computer.",
"IntegrateToYourKubernetesCluster_Description3": "Intercept any service in that cluster, so all the traffic to the intercepted service is automatically redirected to your service that is running in your local machine. When your service needs to use any service in Kubernetes, the traffic is redirected back to the cluster, just like your local service is running inside the Kubernetes.",
+ "AskOurAiAssistant": "Ask Our AI Assistant",
+ "AskOurAiAssistant_Description1": "Build faster with an AI that actually understands your ABP project. The ABP AI Assistant answers your technical questions, explains your code, and helps you solve problems directly inside ABP Studio — with full awareness of your project’s structure. You can even send screenshots or code files to get precise, context-based guidance.",
+ "AskOurAiAssistant_Description2": "What It Helps You Do",
+ "AskOurAiAssistant_Description3": "Ask anything about your ABP project — domain layer, modules, configuration, entities, services, or UI.",
+ "AskOurAiAssistant_Description4": "Get smart, code-aware explanations tailored to your solution.",
+ "AskOurAiAssistant_Description5": "Generate snippets and scaffolding suggestions instantly.",
+ "AskOurAiAssistant_Description6": "Fix errors faster with context-aware debugging support.",
+ "AskOurAiAssistant_Description7": "Learn ABP best practices as you build.",
+ "AskOurAiAssistant_Description8": "Whether you're generating new features, debugging an issue, or exploring a module, the AI Assistant gives you actionable, project-specific answers — right when you need them.",
"GetInformed": "Get Informed",
"Studio_GetInformed_Description1": "Leave your contact information to get informed and try it first when ABP Studio has been launched.",
"Studio_GetInformed_Description2": "Planned preview release date: Q3 of 2023.",
diff --git a/docs/en/Community-Articles/2025-11-15-Announcing-SSR-Support/article.md b/docs/en/Community-Articles/2025-11-15-Announcing-SSR-Support/article.md
index 51688dc5a7..51b28ef18c 100644
--- a/docs/en/Community-Articles/2025-11-15-Announcing-SSR-Support/article.md
+++ b/docs/en/Community-Articles/2025-11-15-Announcing-SSR-Support/article.md
@@ -29,14 +29,14 @@ Server-Side Rendering refers to an approach which renders your Angular applicati
You can easily add SSR support to your existing ABP Angular application using the Angular CLI with ABP schematics:
+> Adds SSR configuration to your project
```bash
-# Generate SSR configuration for your project
ng generate @abp/ng.schematics:ssr-add
-
-# Or using the short form
+```
+> Short form
+```bash
ng g @abp/ng.schematics:ssr-add
```
-
If you have multiple projects in your workspace, you can specify which project to add SSR to:
```bash
diff --git a/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/POST.md b/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/POST.md
new file mode 100644
index 0000000000..6f8dfb96a1
--- /dev/null
+++ b/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/POST.md
@@ -0,0 +1,60 @@
+# .NET Conf China 2025: Changing the World, Changing Ourselves - See You Again in Shanghai
+
+
+
+.NET Conf China 2025 is an annual community event for developers, celebrating the release of .NET 10 (LTS) and the achievements of the past year in China. As an extension of .NET Conf 2025, this event brings together local tech communities, well-known companies, and open-source organizations. It has become the largest .NET online and offline conference in China, dedicated to spreading .NET technology in Chinese and fostering collaboration and exchange.
+
+## Event Highlights: Key Topics and Takeaways
+
+This year’s conference focused on three main themes: performance improvements, AI integration, and cross-platform development. Topics covered how to achieve performance gains while maintaining engineering quality, balancing between multi-platform consistency and native capabilities, and taking generative AI from “demo-level” to “production-ready.” On the community and ecosystem side, the event showcased the .NET Foundation’s and domestic and international companies’ progress in supporting architectures like ARM, LoongArch, and RISC-V. It also highlighted best practices in DevOps, observability, and engineering toolchains, creating a complete path from ideas to implementation.
+
+### Opening Keynote
+
+Scott Hanselman kicked off .NET Conf China 2025 with a video keynote, announcing that .NET 10 is now available on the official website. He framed the release around four pillars—AI, cloud-native, cross-platform, and performance—including integration with the Microsoft Agent Framework for building and orchestrating multi-agent systems in .NET/C#, industry-leading container and Kubernetes support with .NET Aspire simplifying local containerized development, a richer cross-platform desktop ecosystem (.NET MAUI, Avalonia, Uno Platform), and major performance gains such as Native AOT and single-file publishing for faster startup and easier distribution across platforms.
+
+He underscored China’s importance as .NET’s second-largest market, with roughly 13% of users, and noted that generative AI usage in China has doubled in 2025. The local community is seeing strong momentum around ML.NET, .NET Aspire, and the C# Dev Kit in VS Code. Reflecting on his Baby Smash game written 20 years ago, which now runs cross-platform on .NET 10, he called on developers to modernize: move existing Web, WinForms, and WPF apps to the cloud, improve performance, ship as a single executable, and weave in AI capabilities.
+
+On AI, he emphasized a human-centered stance: AI and agents should augment, not replace, developers. In the future, developers will orchestrate and govern agents, and human judgment will matter more than ever. He closed by thanking the open-source community for its many proposals and pull requests, stressing that .NET is an open-source platform built together by Microsoft and the community, and wishing everyone an inspiring conference and a joyful journey with .NET 10.
+
+
+
+### Roundtable Discussion
+
+The roundtable discussion, titled “Empowering with AI, Breaking Through Cross-Platform Barriers, and Ecosystem Innovation,” focused on practical implementation. It explored typical paths for large models and intelligent agents in enterprises, key considerations for choosing cross-platform UI frameworks, and the evolution of these frameworks. Panelists discussed questions like: How can AI capabilities be integrated into existing business processes instead of creating an “experimental” pipeline? How should cross-platform solutions be evaluated in terms of performance, ecosystem, and team skillsets? What are the unique opportunities for domestic ecosystems in the global tech landscape? And how can community collaboration help developers quickly adopt best practices? A shared consensus emerged: in the short term, focus on running scenarios; in the long term, return to engineering fundamentals. Both toolchains and methodologies are equally important.
+
+
+
+### In-Depth Sessions
+
+The afternoon featured four breakout sessions, covering a wide range of topics with deep dives into both foundational technologies and real-world project reviews:
+
+- **Frontend and Cross-Platform:** Focused on the progress of Avalonia, Blazor, and WebAssembly, as well as the integrated experience of .NET Aspire in multi-service applications. Speakers shared insights on reusing core logic between desktop and web, shortening cold start times with incremental compilation and resource trimming, and performance profiling and optimization in WASM scenarios.
+- **AI Agents and Enterprise Adoption:** Discussed multi-agent orchestration, the MCP plugin ecosystem, and enterprise data compliance. From common pitfalls of “demo-level” AI to the “five-step method” for moving from POC to production, the session covered use cases like knowledge retrieval, process automation, intelligent customer service, and developer assistants, emphasizing evaluation metrics, prompt engineering, and monitoring governance.
+- **.NET Practices and Engineering:** Focused on the latest capabilities and performance practices of EF Core, the boundaries of NativeAOT, automated testing strategies, and observability implementation. Discussions included database migration strategies, caching and concurrency control for hot paths, end-to-end tracing, and structured logging.
+- **Solutions and Case Studies:** From Clean Architecture/DDD to AI-powered business evolution, topics included application modernization, SaaS transformation, and edge-cloud collaboration in AIoT. Speakers broke down modular governance, team collaboration, and release strategies for complex systems, putting “delivering value continuously” at the center stage.
+
+
+
+## ABP Booth Highlights: Showcases, Conversations, and Fun
+
+The story of ABP began with a promise to create a better starting point. From the frustration of “copy-pasting boilerplate code,” we crafted a modular, opinionated framework. We chose open source and community collaboration. We founded Volosoft to turn our vision into reality with professional tools. Today, tens of thousands of developers explore the ABP framework, and thousands of teams rely on the ABP platform to deliver production-grade .NET applications faster and more securely.
+
+
+
+At .NET Conf China 2025, we brought our “developer platform built for developers” to every visitor. Our booth demonstrations started with “a production-ready skeleton from the start”: modular layered architecture, built-in authentication and authorization systems, multi-tenancy support, audit logging, and localization—all out of the box. On the frontend and backend, ABP offers diverse options like MVC, Blazor, and Angular, enabling teams to quickly implement solutions on familiar stacks while maintaining flexibility for future evolution. We also showcased how ABP integrates with containerization, CI/CD, and observability, emphasizing “engineering built into the framework, not reinvented by every team.”
+
+
+
+**Interaction and Prizes:** Sharing technology should also be warm and engaging. We hosted a QR code raffle at the booth, with prizes including ABP stickers, the book *Mastering ABP Framework*, and Bluetooth headphones. Multiple rounds of raffles and group photos made the interactions more memorable. Many developers shared their ABP experiences and plans for improvement right at the booth, and a few impromptu “code walkthroughs” naturally happened. The love and joy for technology were captured in every handshake and discussion.
+
+
+
+## Looking Ahead: Building the Ecosystem Together
+
+From an open-source journey to a complete development platform for the future, we’ve always believed that developers deserve a better starting point. Around performance, intelligence, and cross-platform capabilities, we will continue investing in engineering, ecosystem collaboration, and best practice sharing. We also welcome more partners to contribute through documentation and examples, share your experiences, and submit your ideas. Together, let’s make “useful infrastructure” more stable, efficient, and business-friendly.
+
+We look forward to exchanging ideas, sharing practices, and building the ecosystem together at the next gathering. Technology meets creativity, and the possibilities are endless. We’re on the road and waiting for you at the next event.
+
+See you next year at .NET Conf China 2026!
+
+
\ No newline at end of file
diff --git a/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/1.png b/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/1.png
new file mode 100644
index 0000000000..beaf49b86e
Binary files /dev/null and b/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/1.png differ
diff --git a/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/2.png b/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/2.png
new file mode 100644
index 0000000000..a081bf99e3
Binary files /dev/null and b/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/2.png differ
diff --git a/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/21.png b/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/21.png
new file mode 100644
index 0000000000..345452360a
Binary files /dev/null and b/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/21.png differ
diff --git a/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/3.png b/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/3.png
new file mode 100644
index 0000000000..b69f36ef66
Binary files /dev/null and b/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/3.png differ
diff --git a/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/4.png b/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/4.png
new file mode 100644
index 0000000000..a3a2ece3e9
Binary files /dev/null and b/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/4.png differ
diff --git a/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/41.png b/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/41.png
new file mode 100644
index 0000000000..19143279aa
Binary files /dev/null and b/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/41.png differ
diff --git a/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/42.png b/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/42.png
new file mode 100644
index 0000000000..730969eb8e
Binary files /dev/null and b/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/42.png differ
diff --git a/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/5.png b/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/5.png
new file mode 100644
index 0000000000..f1a2a437a0
Binary files /dev/null and b/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/5.png differ
diff --git a/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/cover.png b/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/cover.png
new file mode 100644
index 0000000000..f0eb6cea5f
Binary files /dev/null and b/docs/en/Community-Articles/2025-11-30-NET-Conf-China-2025/images/cover.png differ
diff --git a/docs/en/cli/index.md b/docs/en/cli/index.md
index 7decaa658c..3a3d0c2304 100644
--- a/docs/en/cli/index.md
+++ b/docs/en/cli/index.md
@@ -7,11 +7,7 @@
# ABP CLI
-ABP CLI (Command Line Interface) is a command line tool to perform some common operations for ABP based solutions or ABP Studio features.
-
-> With **v8.2+**, the old/legacy ABP CLI has been replaced with a new CLI system to align with the new templating system and [ABP Studio](../studio/index.md). The new ABP CLI commands are explained in this documentation. However, if you want to learn more about the differences between the old and new CLIs, want to learn the reason for the change, or need guidance to use the old ABP CLI, please refer to the [Old vs New CLI](differences-between-old-and-new-cli.md) documentation.
->
-> You may need to remove the Old CLI before installing the New CLI, by running the following command: `dotnet tool uninstall -g Volo.Abp.Cli`
+ABP CLI (Command Line Interface) is a command line tool to perform some common operations for ABP based solutions or [ABP Studio](../studio/index.md) features.
## Installation
@@ -29,16 +25,16 @@ dotnet tool update -g Volo.Abp.Studio.Cli
## Global Options
-While each command may have a set of options, there are some global options that can be used with any command;
+While each command may have a set of options, there are some global options that can be used with any command:
-* `--skip-cli-version-check` or `-scvc`: Skips to check the latest version of the ABP CLI. If you don't specify, it will check the latest version and shows a warning message if there is a newer version of the ABP CLI.
-- `--skip-extension-version-check` or `-sevc`: Skips to check the latest version of the ABP CLI extensions. If you don't specify, it will check the latest version and download the latest version if there is a newer version of the ABP CLI extensions.
+* `--skip-cli-version-check` or `-scvc`: Skips checking the latest version of the ABP CLI. If you don't specify, it will check the latest version and shows a warning message if there is a newer version of the ABP CLI.
+- `--skip-extension-version-check` or `-sevc`: Skips checking the latest version of the ABP CLI extensions. If you don't specify, it will check the latest version and download the latest version if there is a newer version of the ABP CLI extensions.
* `--old`: ABP CLI has two variations: `Volo.Abp.Studio.Cli` and `Volo.Abp.Cli`. New features/templates are added to the `Volo.Abp.Studio.Cli`. But if you want to use the old version, you can use this option **at the end of your commands**. For example, `abp new Acme.BookStore --old`.
* `--help` or `-h`: Shows help for the specified command.
## Commands
-Here, is the list of all available commands before explaining their details:
+Here is the list of all available commands before explaining their details:
* **[`help`](../cli#help)**: Shows help on the usage of the ABP CLI.
* **[`cli`](../cli#cli)**: Update or remove ABP CLI.
diff --git a/docs/en/contribution/angular-ui.md b/docs/en/contribution/angular-ui.md
index 6aefa43fa8..e3445b12bd 100644
--- a/docs/en/contribution/angular-ui.md
+++ b/docs/en/contribution/angular-ui.md
@@ -12,7 +12,7 @@
- Dotnet core SDK https://dotnet.microsoft.com/en-us/download
- Nodejs LTS https://nodejs.org/en/
- Docker https://docs.docker.com/engine/install
-- Angular CLI. https://angular.io/guide/what-is-angular#angular-cli
+- Angular CLI. https://angular.dev/tools/cli
- Abp CLI https://docs.abp.io/en/abp/latest/cli
- A code editor
diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json
index 10e2251b8e..08b4553d64 100644
--- a/docs/en/docs-nav.json
+++ b/docs/en/docs-nav.json
@@ -1557,6 +1557,10 @@
"text": "Service Proxies",
"path": "framework/ui/angular/service-proxies.md"
},
+ {
+ "text": "SSR Configuration",
+ "path": "framework/ui/angular/ssr-configuration.md"
+ },
{
"text": "PWA Configuration",
"path": "framework/ui/angular/pwa-configuration.md"
@@ -1641,7 +1645,7 @@
"path": "framework/ui/angular/list-service.md"
},
{
- "text": "Easy *ngFor trackBy",
+ "text": "Easy @for() track",
"path": "framework/ui/angular/track-by-service.md"
},
{
diff --git a/docs/en/framework/infrastructure/artificial-intelligence/index.md b/docs/en/framework/infrastructure/artificial-intelligence/index.md
index 1d09af594f..bdd1125e9d 100644
--- a/docs/en/framework/infrastructure/artificial-intelligence/index.md
+++ b/docs/en/framework/infrastructure/artificial-intelligence/index.md
@@ -1,4 +1,11 @@
-# Artificial Intelligence
+```json
+//[doc-seo]
+{
+ "Description": "Explore ABP Framework's AI integration, enabling seamless AI capabilities, workspace management, and reusable modules for .NET developers."
+}
+```
+
+# Artificial Intelligence (AI)
ABP Framework provides integration for AI capabilities to your application by using Microsoft's popular AI libraries. The main purpose of this integration is to provide a consistent and easy way to use AI capabilities and manage different AI providers, models and configurations in a single application.
ABP introduces a concept called **AI Workspace**. A workspace allows you to configure isolated AI configurations for a named scope. You can then resolve AI services for a specific workspace when you need to use them.
diff --git a/docs/en/framework/ui/angular/component-replacement.md b/docs/en/framework/ui/angular/component-replacement.md
index 6feebfc409..ec1102f893 100644
--- a/docs/en/framework/ui/angular/component-replacement.md
+++ b/docs/en/framework/ui/angular/component-replacement.md
@@ -584,8 +584,8 @@ Open the generated `nav-items.component.html` in `src/app/nav-items` folder and
class="bg-transparent border-0 text-white"
/>
```
diff --git a/docs/en/framework/ui/angular/data-table-column-extensions.md b/docs/en/framework/ui/angular/data-table-column-extensions.md
index 30b9facf0d..0365336d81 100644
--- a/docs/en/framework/ui/angular/data-table-column-extensions.md
+++ b/docs/en/framework/ui/angular/data-table-column-extensions.md
@@ -171,7 +171,7 @@ It has the following properties:
- **index** is the table index where the record is at.
-- **getInjected** is the equivalent of [Injector.get](https://angular.io/api/core/Injector#get). You can use it to reach injected dependencies of `ExtensibleTableComponent`, including, but not limited to, its parent component.
+- **getInjected** is the equivalent of [Injector.get](https://angular.dev/api/core/Injector). You can use it to reach injected dependencies of `ExtensibleTableComponent`, including, but not limited to, its parent component.
```js
{
diff --git a/docs/en/framework/ui/angular/dynamic-form-extensions.md b/docs/en/framework/ui/angular/dynamic-form-extensions.md
index ee7af81397..a92a06d609 100644
--- a/docs/en/framework/ui/angular/dynamic-form-extensions.md
+++ b/docs/en/framework/ui/angular/dynamic-form-extensions.md
@@ -107,7 +107,7 @@ Extra properties defined on an existing entity will be included in the create an
It has the following properties:
-- **getInjected** is the equivalent of [Injector.get](https://angular.io/api/core/Injector#get). You can use it to reach injected dependencies of `ExtensibleFormPropComponent`, including, but not limited to, its parent components.
+- **getInjected** is the equivalent of [Injector.get](https://angular.dev/api/core/Injector). You can use it to reach injected dependencies of `ExtensibleFormPropComponent`, including, but not limited to, its parent components.
```js
{
diff --git a/docs/en/framework/ui/angular/entity-action-extensions.md b/docs/en/framework/ui/angular/entity-action-extensions.md
index 152ff6636d..5a8e74a2f9 100644
--- a/docs/en/framework/ui/angular/entity-action-extensions.md
+++ b/docs/en/framework/ui/angular/entity-action-extensions.md
@@ -272,7 +272,7 @@ It has the following properties:
- **index** is the table index where the record is at.
-- **getInjected** is the equivalent of [Injector.get](https://angular.io/api/core/Injector#get). You can use it to reach injected dependencies of `GridActionsComponent`, including, but not limited to, its parent component.
+- **getInjected** is the equivalent of [Injector.get](https://angular.dev/api/core/Injector). You can use it to reach injected dependencies of `GridActionsComponent`, including, but not limited to, its parent component.
```js
{
diff --git a/docs/en/framework/ui/angular/form-validation.md b/docs/en/framework/ui/angular/form-validation.md
index 35a54549af..b4ed31842d 100644
--- a/docs/en/framework/ui/angular/form-validation.md
+++ b/docs/en/framework/ui/angular/form-validation.md
@@ -52,7 +52,7 @@ export const appConfig: ApplicationConfig = {
};
```
-When a [validator](https://angular.io/guide/form-validation#defining-custom-validators) or an [async validator](https://angular.io/guide/form-validation#creating-asynchronous-validators) returns an error with the key given to the error blueprints (`uniqueUsername` here), the validation library will be able to display an error message after localizing according to the given key and interpolation params. The result will look like this:
+When a [validator](https://angular.dev/guide/forms/form-validation) or an [async validator](https://angular.dev/guide/forms/form-validation) returns an error with the key given to the error blueprints (`uniqueUsername` here), the validation library will be able to display an error message after localizing according to the given key and interpolation params. The result will look like this:
@@ -146,12 +146,13 @@ import { ChangeDetectionStrategy, Component } from "@angular/core";
selector: "app-validation-error",
imports:[CommonModule, LocalizationPipe],
template: `
-
+ }
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
@@ -250,7 +251,7 @@ buildForm() {
{%{{ 'AbpIdentity::UserInformations' | abpLocalization }}%}
-
+
@@ -263,7 +264,7 @@ buildForm() {
+ />
}
diff --git a/docs/en/framework/ui/angular/http-requests.md b/docs/en/framework/ui/angular/http-requests.md
index 5cb217540d..a5ca0dec66 100644
--- a/docs/en/framework/ui/angular/http-requests.md
+++ b/docs/en/framework/ui/angular/http-requests.md
@@ -9,7 +9,7 @@
## About HttpClient
-Angular has the amazing [HttpClient](https://angular.io/guide/http) for communication with backend services. It is a layer on top and a simplified representation of [XMLHttpRequest Web API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest). It also is the recommended agent by Angular for any HTTP request. There is nothing wrong with using the `HttpClient` in your ABP project.
+Angular has the amazing [HttpClient](https://angular.dev/guide/http/making-requests) for communication with backend services. It is a layer on top and a simplified representation of [XMLHttpRequest Web API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest). It also is the recommended agent by Angular for any HTTP request. There is nothing wrong with using the `HttpClient` in your ABP project.
However, `HttpClient` leaves error handling to the caller (method). In other words, HTTP errors are handled manually and by hooking into the observer of the `Observable` returned.
@@ -93,7 +93,7 @@ postFoo(body: Foo) {
}
```
-You may [check here](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/rest.ts#L23) for complete `Rest.Request` type, which has only a few changes compared to [HttpRequest](https://angular.io/api/common/http/HttpRequest) class in Angular.
+You may [check here](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/rest.ts#L23) for complete `Rest.Request` type, which has only a few changes compared to [HttpRequest](https://angular.dev/api/common/http/HttpRequest) class in Angular.
### How to Disable Default Error Handler of RestService
diff --git a/docs/en/framework/ui/angular/lazy-load-service.md b/docs/en/framework/ui/angular/lazy-load-service.md
index e0942a15f0..9eb1113899 100644
--- a/docs/en/framework/ui/angular/lazy-load-service.md
+++ b/docs/en/framework/ui/angular/lazy-load-service.md
@@ -44,10 +44,13 @@ The first parameter of `load` method expects a `LoadingStrategy`. If you pass a
```js
import { LazyLoadService, LOADING_STRATEGY } from '@abp/ng.core';
import { inject } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
@Component({
template: `
-
+ @if (libraryLoaded$ | async) {
+
+ }
`
})
class DemoComponent {
@@ -59,7 +62,7 @@ class DemoComponent {
}
```
-The `load` method returns an observable to which you can subscibe in your component or with an `async` pipe. In the example above, the `NgIf` directive will render `` only **if the script gets successfully loaded or is already loaded before**.
+The `load` method returns an observable to which you can subscibe in your component or with an `async` pipe. In the example above, the `@if(...)` directive will render `` only **if the script gets successfully loaded or is already loaded before**.
> You can subscribe multiple times in your template with `async` pipe. The Scripts will only be loaded once.
@@ -74,10 +77,13 @@ If you pass a `StyleLoadingStrategy` instance as the first parameter of `load` m
```js
import { LazyLoadService, LOADING_STRATEGY } from '@abp/ng.core';
import { inject } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
@Component({
template: `
-
+ @if (stylesLoaded$ | async) {
+
+ }
`
})
class DemoComponent {
@@ -89,7 +95,7 @@ class DemoComponent {
}
```
-The `load` method returns an observable to which you can subscibe in your component or with an `AsyncPipe`. In the example above, the `NgIf` directive will render `` only **if the style gets successfully loaded or is already loaded before**.
+The `load` method returns an observable to which you can subscibe in your component or with an `AsyncPipe`. In the example above, the `@if(...)` directive will render `` only **if the style gets successfully loaded or is already loaded before**.
> You can subscribe multiple times in your template with `async` pipe. The styles will only be loaded once.
@@ -126,10 +132,13 @@ A common usecase is **loading multiple scripts and/or styles before using a feat
import { LazyLoadService, LOADING_STRATEGY } from '@abp/ng.core';
import { forkJoin } from 'rxjs';
import { inject } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
@Component({
template: `
-
+ @if (scriptsAndStylesLoaded$ | async) {
+
+ }
`
})
class DemoComponent {
@@ -168,10 +177,13 @@ Another frequent usecase is **loading dependent scripts in order**:
import { LazyLoadService, LOADING_STRATEGY } from '@abp/ng.core';
import { concat } from 'rxjs';
import { inject } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
@Component({
template: `
-
+ @if (scriptsLoaded$ | async) {
+
+ }
`
})
class DemoComponent {
diff --git a/docs/en/framework/ui/angular/list-service.md b/docs/en/framework/ui/angular/list-service.md
index f8b0a42249..dab58d0e33 100644
--- a/docs/en/framework/ui/angular/list-service.md
+++ b/docs/en/framework/ui/angular/list-service.md
@@ -126,7 +126,7 @@ Then you can place inputs to the HTML:
## Usage with Observables
-You may use observables in combination with [AsyncPipe](https://angular.io/guide/observables-in-angular#async-pipe) of Angular instead. Here are some possibilities:
+You may use observables in combination with [AsyncPipe](https://angular.dev/ecosystem/rxjs-interop) of Angular instead. Here are some possibilities:
```js
book$ = this.list.hookToQuery(query => this.bookService.getListByInput(query));
diff --git a/docs/en/framework/ui/angular/localization.md b/docs/en/framework/ui/angular/localization.md
index 034e77abf0..9f3122529c 100644
--- a/docs/en/framework/ui/angular/localization.md
+++ b/docs/en/framework/ui/angular/localization.md
@@ -220,7 +220,7 @@ As of v2.9 ABP supports RTL. If you are generating a new project with v2.9 and a
### Step 1. Create Chunks for Bootstrap LTR and RTL
-Find [styles configuration in angular.json](https://angular.io/guide/workspace-config#style-script-config) and make sure the chunks in your project has `bootstrap-rtl.min` and `bootstrap-ltr.min` as shown below.
+Find [styles configuration in angular.json](https://angular.dev/reference/configs/workspace-config) and make sure the chunks in your project has `bootstrap-rtl.min` and `bootstrap-ltr.min` as shown below.
```json
{
@@ -279,7 +279,7 @@ export class AppComponent {}
## Registering a New Locale
-Since ABP has more than one language, Angular locale files load lazily using [Webpack's import function](https://webpack.js.org/api/module-methods/#import-1) to avoid increasing the bundle size and to register the Angular core using the [`registerLocaleData`](https://angular.io/api/common/registerLocaleData) function. The chunks to be included in the bundle are specified by the [Webpack's magic comments](https://webpack.js.org/api/module-methods/#magic-comments) as hard-coded. Therefore a `registerLocale` function that returns Webpack `import` function must be passed to `provideAbpCore(withOptions({...}))`.
+Since ABP has more than one language, Angular locale files load lazily using [Webpack's import function](https://webpack.js.org/api/module-methods/#import-1) to avoid increasing the bundle size and to register the Angular core using the [`registerLocaleData`](https://angular.dev/api/common/registerLocaleData) function. The chunks to be included in the bundle are specified by the [Webpack's magic comments](https://webpack.js.org/api/module-methods/#magic-comments) as hard-coded. Therefore a `registerLocale` function that returns Webpack `import` function must be passed to `provideAbpCore(withOptions({...}))`.
### registerLocaleFn
diff --git a/docs/en/framework/ui/angular/page-toolbar-extensions.md b/docs/en/framework/ui/angular/page-toolbar-extensions.md
index 8214c19889..30c5c9813d 100644
--- a/docs/en/framework/ui/angular/page-toolbar-extensions.md
+++ b/docs/en/framework/ui/angular/page-toolbar-extensions.md
@@ -215,7 +215,7 @@ It has the following properties:
}
```
-- **getInjected** is the equivalent of [Injector.get](https://angular.io/api/core/Injector#get). You can use it to reach injected dependencies of `PageToolbarComponent`, including, but not limited to, its parent component.
+- **getInjected** is the equivalent of [Injector.get](https://angular.dev/api/core/Injector). You can use it to reach injected dependencies of `PageToolbarComponent`, including, but not limited to, its parent component.
```js
{
diff --git a/docs/en/framework/ui/angular/permission-management-component-replacement.md b/docs/en/framework/ui/angular/permission-management-component-replacement.md
index f91fbb42d9..7ee3022b80 100644
--- a/docs/en/framework/ui/angular/permission-management-component-replacement.md
+++ b/docs/en/framework/ui/angular/permission-management-component-replacement.md
@@ -334,7 +334,7 @@ Open the generated `permission-management.component.html` in `src/app/permission
```html
-
+ @if (data.entityDisplayName) {
{%{{{ 'AbpPermissionManagement::Permissions' | abpLocalization }}}%} -
@@ -360,19 +360,22 @@ Open the generated `permission-management.component.html` in `src/app/permission
@@ -393,34 +396,36 @@ Open the generated `permission-management.component.html` in `src/app/permission
}}}%}
-
-
-
-
+ @for (permission of selectedGroupPermissions; track permission.name; let i = $index) {
+
+
+
+
+ }
@@ -433,7 +438,7 @@ Open the generated `permission-management.component.html` in `src/app/permission
'AbpIdentity::Save' | abpLocalization
}}}%}
-
+ }
```
diff --git a/docs/en/framework/ui/angular/pwa-configuration.md b/docs/en/framework/ui/angular/pwa-configuration.md
index 2c042e9d77..ea63f60b96 100644
--- a/docs/en/framework/ui/angular/pwa-configuration.md
+++ b/docs/en/framework/ui/angular/pwa-configuration.md
@@ -37,7 +37,7 @@ Here is the output of the command:
So, Angular CLI updates some files and add a few others:
-- **ngsw-config.json** is where the [service worker configuration](https://angular.io/guide/service-worker-config) is placed. Not all PWAs have this file. It is specific to Angular.
+- **ngsw-config.json** is where the [service worker configuration](https://angular.dev/ecosystem/service-workers/config) is placed. Not all PWAs have this file. It is specific to Angular.
- **manifest.webmanifest** is a [web app manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) and provides information about your app in JSON format.
- **icons** are placeholder icons that are referred to in your web app manifest. We will replace these in a minute.
- **angular.json** has following modifications:
@@ -45,7 +45,7 @@ So, Angular CLI updates some files and add a few others:
- `serviceWorker` is `true` in production build.
- `ngswConfigPath` refers to _ngsw-config.json_.
- **package.json** has _@angular/service-worker_ as a new dependency.
-- **app.config.ts** imports `ServiceWorkerModule` and registers a service worker filename.
+- **app.config.ts** The `provideServiceWorker` provider is imported to register the service worker script.
- **index.html** has following modifications:
- A `` element that refers to _manifest.webmanifest_.
- A `` tag that sets a theme color.
@@ -342,8 +342,8 @@ Open _ngsw-config.json_ file and replace its content with this:
}
```
-In case you want to cache other static files, please refer to the [service worker configuration document](https://angular.io/guide/service-worker-config#assetgroups) on Angular.io.
+In case you want to cache other static files, please refer to the [service worker configuration document](https://angular.dev/ecosystem/service-workers/config) on Angular.dev.
### 3.2 Set Data Groups
-This part is unique to your project. We recommend being very careful about which endpoints to cache. Please refer to [service worker configuration document](https://angular.io/guide/service-worker-config#datagroups) on Angular.io for details.
+This part is unique to your project. We recommend being very careful about which endpoints to cache. Please refer to [service worker configuration document](https://angular.dev/ecosystem/service-workers/config) on Angular.dev for details.
diff --git a/docs/en/framework/ui/angular/quick-start.md b/docs/en/framework/ui/angular/quick-start.md
index f5bc88329f..0e48f0190e 100644
--- a/docs/en/framework/ui/angular/quick-start.md
+++ b/docs/en/framework/ui/angular/quick-start.md
@@ -84,10 +84,10 @@ Now let us take a look at the contents of the source folder.
- **app.config.ts** is the [root configuration](https://angular.dev/api/platform-browser/bootstrapApplication) that includes information about how parts of your application are related and what to run at the initiation of your application.
- **route.provider.ts** is used for [modifying the menu](../angular/modifying-the-menu.md).
- **assets** is for static files. A file (e.g. an image) placed in this folder will be available as is when the application is served.
-- **environments** includes one file per environment configuration. There are two configurations by default, but you may always introduce another one. These files are directly referred to in _angular.json_ and help you have different builds and application variables. Please refer to [configuring Angular application environments](https://angular.io/guide/build#configuring-application-environments) for details.
+- **environments** includes one file per environment configuration. There are two configurations by default, but you may always introduce another one. These files are directly referred to in _angular.json_ and help you have different builds and application variables. Please refer to [configuring Angular application environments](https://angular.dev/tools/cli/environments) for details.
- **index.html** is the HTML page served to visitors and will contain everything required to run your application. Servers should be configured to redirect every request to this page so that the Angular router can take over. Do not worry about how to add JavaScript and CSS files to it, because Angular CLI will do it automatically.
- **main.ts** bootstraps and configures Angular application to run in the browser. It is production-ready, so forget about it.
-- **polyfill.ts** is where you can add polyfills if you want to [support legacy browsers](https://angular.io/guide/browser-support).
+- **polyfill.ts** is where you can add polyfills if you want to [support legacy browsers](https://angular.dev/reference/versions).
- **style.scss** is the default entry point for application styles. You can change this or add new entry points in _angular.json_.
- **test.ts** helps the unit test runner discover and bootstrap spec files.
@@ -106,11 +106,11 @@ Now that you know about the files and folders, we can get the application up and
-You may modify the behavior of the **start script** (in the package.json file) by changing the parameters passed to the `ng serve` command. For instance, if you do not want a browser window to open next time you run the script, remove `--open` from the end of it. Please check [ng serve documentation](https://angular.io/cli/serve) for all available options.
+You may modify the behavior of the **start script** (in the package.json file) by changing the parameters passed to the `ng serve` command. For instance, if you do not want a browser window to open next time you run the script, remove `--open` from the end of it. Please check [ng serve documentation](https://angular.dev/cli/serve) for all available options.
### Angular Live Development Server
-The development server of Angular is based on [Webpack DevServer](https://webpack.js.org/configuration/dev-server/). It tracks changes to source files and syncs the browser window after an incremental re-compilation every time [2](#f-dev-server) you make one. Your experience will be like this:
+The development server runs via Angular's Application Builder and uses a fast, modern dev server under the hood. It tracks changes to source files and refreshes the browser after an incremental compilation every time [2](#f-dev-server) you make one. Your experience will be like this:
@@ -122,13 +122,13 @@ Please keep in mind that you should not use this server in production. To provid
1 _If you see the error above when you run the Angular app, your browser might be blocking access to the API because of the self-signed certificate. Visit that address and allow access to it (once). When you see the Swagger interface, you are good to go._ [↩](#a-certificate-error)
-2 _Sometimes, depending on the file changed, Webpack may miss the change and cannot reflect it in the browser. For example, tsconfig files are not being tracked. In such a case, please restart the development server._ [↩](#a-dev-server)
+2 _Sometimes, depending on the file changed, the development server may not pick up the change (for example, certain configuration files like tsconfig are not watched). In such a case, please restart the development server._ [↩](#a-dev-server)
---
## How to Build the Angular Application
-An Angular application can have multiple [build targets](https://angular.io/guide/glossary#target), i.e. **configurations in angular.json** which define how [Architect](https://angular.io/guide/glossary#architect) will build applications and libraries. Usually, each build configuration has a separate environment variable file. Currently, the project has two: One for development and one for production.
+An Angular application can have multiple build targets, i.e. **configurations in angular.json** which define how [Architect](https://angular.dev/reference/configs/workspace-config) will build applications and libraries. Usually, each build configuration has a separate environment variable file. Currently, the project has two: One for development and one for production.
```js
// this is what environment variables look like
@@ -161,7 +161,7 @@ export const environment = {
} as Config.Environment;
```
-When you run the development server, variables defined in _environment.ts_ take effect. Similarly, in production mode, the default environment is replaced by _environment.prod.ts_ and completely different variables become effective. You may even [create a new build configuration](https://angular.dev/reference/configs/workspace-config#alternate-build-configurations) and set [file replacements](https://angular.io/guide/build#configure-target-specific-file-replacements) to use a completely new environment. For now, we will start a production build:
+When you run the development server, variables defined in _environment.ts_ take effect. Similarly, in production mode, the default environment is replaced by _environment.prod.ts_ and completely different variables become effective. You may even [create a new build configuration](https://angular.dev/reference/configs/workspace-config#alternate-build-configurations) and set [file replacements](https://angular.dev/tools/cli/environments) to use a completely new environment. For now, we will start a production build:
1. Open your terminal and navigate to the root Angular folder.
2. Run `yarn` or `npm install` if you have not installed dependencies already.
@@ -180,18 +180,18 @@ Angular web applications run on the browser and require no server except for a [
```shell
# please replace MyProjectName with your project name
-npx servor dist/MyProjectName index.html 4200 --browse
+npx servor dist/MyProjectName/browser index.html 4200 --browse
```
This command will download and start a simple static server, a browser window at `http://localhost:4200` will open, and the compiled output of your project will be served.
Of course, you need your application to run on an optimized web server and become available to everyone. This is quite straight-forward:
-1. Create a new static web server instance. You can use a service like [Azure App Service](https://azure.microsoft.com/en-us/services/app-service/web/), [Firebase](https://firebase.google.com/docs/hosting), [Netlify](https://www.netlify.com/), [Vercel](https://vercel.com/), or even [GitHub Pages](https://angular.io/guide/deployment#deploy-to-github-pages). Another option is maintaining own web server with [NGINX](https://www.nginx.com/), [IIS](https://www.iis.net/), [Apache HTTP Server](https://httpd.apache.org/), or equivalent.
+1. Create a new static web server instance. You can use a service like [Azure App Service](https://azure.microsoft.com/en-us/services/app-service/web/), [Firebase](https://firebase.google.com/docs/hosting), [Netlify](https://www.netlify.com/), [Vercel](https://vercel.com/), or even [GitHub Pages](https://angular.dev/tools/cli/deployment). Another option is maintaining own web server with [NGINX](https://www.nginx.com/), [IIS](https://www.iis.net/), [Apache HTTP Server](https://httpd.apache.org/), or equivalent.
2. Copy the files from `dist/MyProjectName` [1](#f-dist-folder-name) to a publicly served destination on the server via CLI of the service provider, SSH, or FTP (whichever is available). This step would be defined as a job if you have a CI/CD flow.
-3. [Configure the server](https://angular.io/guide/deployment#server-configuration) to redirect all requests to the _index.html_ file. Some services do that automatically. Others require you [to add a file to the bundle via assets](https://angular.io/guide/workspace-config#assets-configuration) which describes the server how to do the redirections. Occasionally, you may need to do manual configuration.
+3. [Configure the server](https://angular.dev/tools/cli/deployment#server-configuration) to redirect all requests to the _index.html_ file. Some services do that automatically. Others require you [to add a file to the bundle via assets](https://angular.dev/reference/configs/workspace-config) which describes the server how to do the redirections. Occasionally, you may need to do manual configuration.
-In addition, you can [deploy your application to certain targets using the Angular CLI](https://angular.io/guide/deployment#automatic-deployment-with-the-cli). Here are some deploy targets:
+In addition, you can [deploy your application to certain targets using the Angular CLI](https://angular.dev/tools/cli/deployment#automatic-deployment-with-the-cli). Here are some deploy targets:
- [Azure](https://github.com/Azure/ng-deploy-azure#readme)
- [Firebase](https://github.com/angular/angularfire#readme)
diff --git a/docs/en/framework/ui/angular/router-events.md b/docs/en/framework/ui/angular/router-events.md
index b7b760ae3f..5185c9c922 100644
--- a/docs/en/framework/ui/angular/router-events.md
+++ b/docs/en/framework/ui/angular/router-events.md
@@ -7,7 +7,7 @@
# Router Events Simplified
-`RouterEvents` is a utility service for filtering specific router events and reacting to them. Please see [this page in Angular docs](https://angular.io/api/router/Event) for available router events.
+`RouterEvents` is a utility service for filtering specific router events and reacting to them. Please see [this page in Angular docs](https://angular.dev/api/router/Event) for available router events.
## Benefit
diff --git a/docs/en/framework/ui/angular/service-proxies.md b/docs/en/framework/ui/angular/service-proxies.md
index 51a6c4f5b4..c816158f77 100644
--- a/docs/en/framework/ui/angular/service-proxies.md
+++ b/docs/en/framework/ui/angular/service-proxies.md
@@ -114,7 +114,7 @@ export class BookComponent implements OnInit {
}
```
-The Angular compiler removes the services that have not been injected anywhere from the final output. See the [tree-shakable providers documentation](https://angular.io/guide/dependency-injection-providers#tree-shakable-providers).
+The Angular compiler removes the services that have not been injected anywhere from the final output. See the [tree-shakable providers documentation](https://angular.dev/guide/di/defining-dependency-providers).
### Models
@@ -152,9 +152,11 @@ export class BookComponent implements OnInit {
```
diff --git a/docs/en/framework/ui/angular/ssr-configuration.md b/docs/en/framework/ui/angular/ssr-configuration.md
new file mode 100644
index 0000000000..258fce99b4
--- /dev/null
+++ b/docs/en/framework/ui/angular/ssr-configuration.md
@@ -0,0 +1,280 @@
+```json
+//[doc-seo]
+{
+ "Description": "Learn how to configure Server-Side Rendering (SSR) for your Angular application in the ABP Framework to improve performance and SEO."
+}
+```
+
+# SSR Configuration
+
+[Server-Side Rendering (SSR)](https://angular.io/guide/ssr) is a process that involves rendering pages on the server, resulting in initial HTML content that contains the page state. This allows the browser to show the page to the user immediately, before the JavaScript bundles are downloaded and executed.
+
+SSR improves the **performance** (First Contentful Paint) and **SEO** (Search Engine Optimization) of your application.
+
+## 1. Install ABP Angular SSR
+
+The ABP Framework provides a schematic to easily add SSR support to your Angular application.
+
+Run the following command in the root folder of your Angular application:
+
+```shell
+yarn ng generate @abp/ng.schematics:ssr-add
+```
+
+Alternatively, you can specify the project name if you have a multi-project workspace:
+
+```shell
+yarn ng generate @abp/ng.schematics:ssr-add --project MyProjectName
+```
+
+This command automates the setup process by installing necessary dependencies, creating server-side entry points, and updating your configuration files.
+
+## 2. What Changes?
+
+When you run the schematic, it performs the following actions:
+
+### 2.1. Dependencies
+
+It adds the following packages to your `package.json`:
+
+- **express**: A minimal and flexible Node.js web application framework.
+- **@types/express**: Type definitions for Express.
+- **openid-client**: A library for OpenID Connect (OIDC) relying party (RP) implementation, used for authentication on the server.
+
+```json
+{
+ "dependencies": {
+ "express": "^4.18.2",
+ "openid-client": "^5.6.4"
+ },
+ "devDependencies": {
+ "@types/express": "^4.17.17"
+ }
+}
+```
+
+**For Webpack projects only:**
+- **browser-sync** (Dev dependency): Used for live reloading during development.
+
+### 2.2. Scripts & Configuration
+
+The changes depend on the builder used in your project (Application Builder or Webpack).
+
+#### Application Builder (esbuild)
+
+If your project uses the **Application Builder** (`@angular/build:application`), the schematic:
+
+- **Scripts**: Adds `serve:ssr:project-name` to serve the SSR application.
+- **angular.json**: Updates the `build` target to enable SSR (`outputMode: 'server'`) and sets the SSR entry point.
+
+```json
+{
+ "projects": {
+ "MyProjectName": {
+ "architect": {
+ "build": {
+ "options": {
+ "outputPath": "dist/MyProjectName",
+ "outputMode": "server",
+ "ssr": {
+ "entry": "src/server.ts"
+ }
+ }
+ }
+ }
+ }
+ }
+}
+```
+
+- **tsconfig**: Updates the application's `tsconfig` to include `server.ts`.
+
+#### Webpack Builder
+
+If your project uses the **Webpack Builder** (`@angular-devkit/build-angular:browser`), the schematic:
+
+- **Scripts**: Adds `dev:ssr`, `serve:ssr`, `build:ssr`, and `prerender` scripts.
+- **angular.json**: Adds new targets: `server`, `serve-ssr`, and `prerender`.
+- **tsconfig**: Updates the server's `tsconfig` to include `server.ts`.
+
+### 2.3. Files
+
+- **server.ts**: This file is the main entry point for the server-side application.
+ - **Standalone Projects**: Generates a server entry point compatible with `bootstrapApplication`.
+ - **NgModule Projects**: Generates a server entry point compatible with `platformBrowserDynamic`.
+
+```typescript
+import {
+ AngularNodeAppEngine,
+ createNodeRequestHandler,
+ isMainModule,
+ writeResponseToNodeResponse,
+} from '@angular/ssr/node';
+import express from 'express';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { environment } from './environments/environment';
+import { ServerCookieParser } from '@abp/ng.core';
+import * as oidc from 'openid-client';
+
+// ... (OIDC configuration and setup)
+
+const app = express();
+const angularApp = new AngularNodeAppEngine();
+
+// ... (OIDC routes: /authorize, /logout, /)
+
+/**
+ * Serve static files from /browser
+ */
+app.use(
+ express.static(browserDistFolder, {
+ maxAge: '1y',
+ index: false,
+ redirect: false,
+ }),
+);
+
+/**
+ * Handle all other requests by rendering the Angular application.
+ */
+app.use((req, res, next) => {
+ angularApp
+ .handle(req)
+ .then(response => {
+ if (response) {
+ res.cookie('ssr-init', 'true', {...secureCookie, httpOnly: false});
+ return writeResponseToNodeResponse(response, res);
+ } else {
+ return next()
+ }
+ })
+ .catch(next);
+});
+
+// ... (Start server logic)
+
+export const reqHandler = createNodeRequestHandler(app);
+```
+- **app.routes.server.ts**: Defines server-side routes and render modes (e.g., Prerender, Server, Client). This allows fine-grained control over how each route is rendered.
+
+```typescript
+import { RenderMode, ServerRoute } from '@angular/ssr';
+
+export const serverRoutes: ServerRoute[] = [
+ {
+ path: '**',
+ renderMode: RenderMode.Server
+ }
+];
+```
+
+- **app.config.server.ts**: Merges the application configuration with server-specific providers.
+
+```typescript
+import { mergeApplicationConfig, ApplicationConfig, provideAppInitializer, inject, PLATFORM_ID, TransferState } from '@angular/core';
+import { isPlatformServer } from '@angular/common';
+import { provideServerRendering, withRoutes } from '@angular/ssr';
+import { appConfig } from './app.config';
+import { serverRoutes } from './app.routes.server';
+import { SSR_FLAG } from '@abp/ng.core';
+
+const serverConfig: ApplicationConfig = {
+ providers: [
+ provideAppInitializer(() => {
+ const platformId = inject(PLATFORM_ID);
+ const transferState = inject(TransferState);
+ if (isPlatformServer(platformId)) {
+ transferState.set(SSR_FLAG, true);
+ }
+ }),
+ provideServerRendering(withRoutes(serverRoutes)),
+ ],
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);
+```
+- **index.html**: Removes the loading spinner (``) to prevent hydration mismatches.
+
+## 3. Running the Application
+
+After the installation is complete, you can run your application with SSR support.
+
+### Application Builder
+
+To serve the application with SSR in development:
+
+```shell
+yarn start
+# or
+yarn ng serve
+```
+
+To serve the built application (production):
+
+```shell
+yarn run serve:ssr:project-name
+```
+
+### Webpack Builder
+
+**Development:**
+
+```shell
+yarn run dev:ssr
+```
+
+**Production:**
+
+```shell
+yarn run build:ssr
+yarn run serve:ssr
+```
+
+## 4. Authentication & SSR
+
+The schematic installs `openid-client` to handle authentication on the server side. This ensures that when a user accesses a protected route, the server can validate their session or redirect them to the login page before rendering the content.
+
+> Ensure your OpenID Connect configuration (in `environment.ts` or `app.config.ts`) is compatible with the server environment.
+
+## 5. Deployment
+
+To deploy your Angular SSR application to a production server, follow these steps:
+
+### 5.1. Build the Application
+
+Run the build command to generate the production artifacts:
+
+```shell
+yarn build
+# or if using Webpack builder
+yarn run build:ssr
+```
+
+### 5.2. Prepare Artifacts
+
+After the build is complete, you will find the output in the `dist` folder.
+For the **Application Builder**, the output structure typically looks like this:
+
+```
+dist/MyProjectName/
+├── browser/ # Client-side bundles
+└── server/ # Server-side bundles and entry point (server.mjs)
+```
+
+You need to copy the entire `dist/MyProjectName` folder to your server.
+
+### 5.3. Run the Server
+
+On your server, navigate to the folder where you copied the artifacts and run the server using Node.js:
+
+```shell
+node server/server.mjs
+```
+
+> [!TIP]
+> It is recommended to use a process manager like [PM2](https://pm2.keymetrics.io/) to keep your application alive and handle restarts.
+
+```shell
+pm2 start server/server.mjs --name "my-app"
+```
diff --git a/docs/en/framework/ui/angular/subscription-service.md b/docs/en/framework/ui/angular/subscription-service.md
index b04a3dbf58..c64edb9fe0 100644
--- a/docs/en/framework/ui/angular/subscription-service.md
+++ b/docs/en/framework/ui/angular/subscription-service.md
@@ -7,7 +7,7 @@
# Managing RxJS Subscriptions
-`SubscriptionService` is a utility service to provide an easy unsubscription from RxJS observables in Angular components and directives. Please see [why you should unsubscribe from observables on instance destruction](https://angular.io/guide/lifecycle-hooks#cleaning-up-on-instance-destruction).
+`SubscriptionService` is a utility service to provide an easy unsubscription from RxJS observables in Angular components and directives. Please see [why you should unsubscribe from observables on instance destruction](https://angular.dev/guide/components/lifecycle).
## Getting Started
diff --git a/docs/en/framework/ui/angular/testing.md b/docs/en/framework/ui/angular/testing.md
index c0d5ff312c..ab215f7eba 100644
--- a/docs/en/framework/ui/angular/testing.md
+++ b/docs/en/framework/ui/angular/testing.md
@@ -7,7 +7,7 @@
# Unit Testing Angular UI
-ABP Angular UI is tested like any other Angular application. So, [the guide here](https://angular.io/guide/testing) applies to ABP too. That said, we would like to point out some **unit testing topics specific to ABP Angular applications**.
+ABP Angular UI is tested like any other Angular application. So, [the guide here](https://angular.dev/guide/testing) applies to ABP too. That said, we would like to point out some **unit testing topics specific to ABP Angular applications**.
## Setup
diff --git a/docs/en/framework/ui/angular/theming.md b/docs/en/framework/ui/angular/theming.md
index cb6f8fe8b0..1351a02f33 100644
--- a/docs/en/framework/ui/angular/theming.md
+++ b/docs/en/framework/ui/angular/theming.md
@@ -81,8 +81,8 @@ You can run the following command in **Angular** project directory to copy the s
### Global/Component Styles
-Angular can bundle global style files and component styles with components.
-See the [component styles](https://angular.io/guide/component-styles) guide on Angular documentation for more information.
+Angular can bundle global style files and component styles with components.
+See the [component styles](https://angular.dev/guide/components/styling) guide on Angular documentation for more information.
### Layout Parts
@@ -238,8 +238,10 @@ import { Router } from '@angular/router';
selector: 'abp-current-user-test',
template: `
-
+ @if (data.textTemplate.icon){
+
{%{{{ data.textTemplate.text | abpLocalization }}}%}
+ }
`,
})
diff --git a/docs/en/framework/ui/angular/track-by-service.md b/docs/en/framework/ui/angular/track-by-service.md
index 046935e5b6..15cdd9577f 100644
--- a/docs/en/framework/ui/angular/track-by-service.md
+++ b/docs/en/framework/ui/angular/track-by-service.md
@@ -5,9 +5,9 @@
}
```
-# Easy *ngFor trackBy
+# Easy @for() track
-`TrackByService` is a utility service to provide an easy implementation for one of the most frequent needs in Angular templates: `TrackByFunction`. Please see [this page in Angular docs](https://angular.io/guide/template-syntax#ngfor-with-trackby) for its purpose.
+`TrackByService` is a utility service to provide an easy implementation for one of the most frequent needs in Angular templates: `TrackByFunction`. Please see [this page in Angular docs](https://angular.dev/guide/templates/control-flow) for its purpose.
@@ -54,8 +54,9 @@ You can use `by` to get a `TrackByFunction` that tracks the iterated object base
```html
-
-