@@ -146,12 +146,13 @@ import { ChangeDetectionStrategy, Component } from "@angular/core";
selector: "app-validation-error",
imports:[CommonModule, LocalizationPipe],
template: `
-
{%{{{ '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
}}}%}
@@ -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) {
+
+
+
+
+ }
-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{%{{{ item.name }}}%}
+@for (item of list; track: track.by('id')) {
+ {%{{{ item.name }}}%}
+}
```
@@ -67,11 +68,11 @@ import { trackBy } from "@abp/ng.core";
@Component({
template: `
-
- {%{{{ item.name }}}%}
-
+ @for (item of list; track: trackById) {
+
+ {%{{{ item.name }}}%}
+
+ }
`,
})
class DemoComponent {
@@ -89,12 +90,11 @@ You can use `byDeep` to get a `TrackByFunction` that tracks the iterated object
```html
-
-
- {%{{{ item.tenant.name }}}%}
-
+@for (item of list; track: track.byDeep('tenant', 'account', 'id')) {
+
+ {%{{{ item.tenant.name }}}%}
+
+}
```
@@ -106,11 +106,11 @@ import { trackByDeep } from "@abp/ng.core";
@Component({
template: `
-
- {%{{{ item.name }}}%}
+ @for (item of list; track: trackByTenantAccountId) {
+
+ {%{{{ item.name }}}%}
+ }
`,
})
class DemoComponent {
diff --git a/docs/en/get-started/layered-web-application.md b/docs/en/get-started/layered-web-application.md
index db8077c3ae..b2bd05454a 100644
--- a/docs/en/get-started/layered-web-application.md
+++ b/docs/en/get-started/layered-web-application.md
@@ -276,4 +276,9 @@ You can start the following application(s):
> For example in non-tiered MVC with public website application:
-
\ No newline at end of file
+
+
+## What's next?
+
+- [TODO Application Tutorial with Layered Solution](../tutorials/todo/layered/index.md)
+- [Web Application Development Tutorial](../tutorials/book-store/index.md)
\ No newline at end of file
diff --git a/docs/en/get-started/single-layer-web-application.md b/docs/en/get-started/single-layer-web-application.md
index 056b7ed85b..9ee87fd439 100644
--- a/docs/en/get-started/single-layer-web-application.md
+++ b/docs/en/get-started/single-layer-web-application.md
@@ -185,3 +185,7 @@ You can then hit *F5* or *Ctrl + F5* to run the web application. It will run and
You can use `admin` as username and `1q2w3E*` as default password to login to the application.
+
+## What's next?
+
+- [TODO Application Tutorial with Single-Layer Solution](../tutorials/todo/single-layer/index.md)
\ No newline at end of file
diff --git a/docs/en/release-info/migration-guides/abp-5-0-angular.md b/docs/en/release-info/migration-guides/abp-5-0-angular.md
index f6abcf10f6..66627b1e8a 100644
--- a/docs/en/release-info/migration-guides/abp-5-0-angular.md
+++ b/docs/en/release-info/migration-guides/abp-5-0-angular.md
@@ -104,7 +104,7 @@ If you don't want to use the NGXS, you should remove all NGXS related imports, i
## @angular/localize package
-[`@angular/localize`](https://angular.io/api/localize) dependency has been removed from `@abp/ng.core` package. The package must be installed in your app. Run the following command to install:
+[`@angular/localize`](https://angular.dev/guide/i18n/add-package) dependency has been removed from `@abp/ng.core` package. The package must be installed in your app. Run the following command to install:
```bash
npm install @angular/localize@12
diff --git a/docs/en/solution-templates/layered-web-application/web-applications.md b/docs/en/solution-templates/layered-web-application/web-applications.md
index 58cc3af078..8400a6dfbe 100644
--- a/docs/en/solution-templates/layered-web-application/web-applications.md
+++ b/docs/en/solution-templates/layered-web-application/web-applications.md
@@ -120,7 +120,7 @@ The required style files are added to the `styles` array in `angular.json`. `App
You should create your tests in the same folder as the file you want to test.
-See the [testing document](https://angular.io/guide/testing).
+See the [testing document](https://angular.dev/guide/testing).
### Depended Packages
diff --git a/docs/en/suite/editing-templates.md b/docs/en/suite/editing-templates.md
index 9c859ba0de..354adc8ead 100644
--- a/docs/en/suite/editing-templates.md
+++ b/docs/en/suite/editing-templates.md
@@ -27,7 +27,7 @@ There's a search box on the templates page. To find the related template, pick a
There's a naming convention for the template files.
* If the template name has `Server` prefix, it's used for backend code like repositories, application services, localizations, controllers, permissions, mappings, unit tests.
-* If the template name has `Frontend.Angular` prefix, it's used for Angular code generation. The Angular code is being generated via [Angular Schematics](https://angular.io/guide/schematics).
+* If the template name has `Frontend.Angular` prefix, it's used for Angular code generation. The Angular code is being generated via [Angular Schematics](https://angular.dev/tools/cli/schematics).
* If the template name has `Frontend.Mvc` prefix, it's used for razor pages, menus, JavaScript, CSS files.
* If the template name has `Frontend.Blazor` prefix, it's used for razor components.
diff --git a/docs/en/suite/generating-crud-page.md b/docs/en/suite/generating-crud-page.md
index cc9df3ee32..afc2536709 100644
--- a/docs/en/suite/generating-crud-page.md
+++ b/docs/en/suite/generating-crud-page.md
@@ -294,7 +294,7 @@ There are some adjustments you may need to make before generating CRUD pages for
- Check if your environment variables have `rootNamespace` defined as explained [here](../framework/ui/angular/service-proxies.md#angular-project-configuration).
-- Check if your [workspace configuration](https://angular.io/guide/workspace-config) satisfies one of the following. Examples assume your solution namespace is `BookStore`, `Acme.BookStore`, or `Acme.Retail.BookStore`.
+- Check if your [workspace configuration](https://angular.dev/reference/configs/workspace-config) satisfies one of the following. Examples assume your solution namespace is `BookStore`, `Acme.BookStore`, or `Acme.Retail.BookStore`.
- Project key is in pascal case. E.g. `BookStore`.
- Project key is in camel case. E.g. `bookStore`.
- Project key is in kebab case. E.g. `book-store`.
diff --git a/docs/en/suite/solution-structure.md b/docs/en/suite/solution-structure.md
index d36ea35e7f..4b15be2f07 100644
--- a/docs/en/suite/solution-structure.md
+++ b/docs/en/suite/solution-structure.md
@@ -303,7 +303,7 @@ Lepton theme uses two logos for each style. You can change these logos with your
You should create your tests in the same folder as the file file you want to test.
-See the [testing document](https://angular.io/guide/testing).
+See the [testing document](https://angular.dev/guide/testing).
### Depended Packages
diff --git a/docs/en/tutorials/book-store/part-03.md b/docs/en/tutorials/book-store/part-03.md
index a2bac2110e..73b2daea4e 100644
--- a/docs/en/tutorials/book-store/part-03.md
+++ b/docs/en/tutorials/book-store/part-03.md
@@ -670,7 +670,7 @@ You can open your browser and click the **New book** button to see the new modal
### Create a Reactive Form
-[Reactive forms](https://angular.io/guide/reactive-forms) provide a model-driven approach to handling form inputs whose values change over time.
+[Reactive forms](https://angular.dev/guide/forms/reactive-forms) provide a model-driven approach to handling form inputs whose values change over time.
Open `/src/app/book/book.component.ts` and replace the content as below:
@@ -742,7 +742,7 @@ export class BookComponent implements OnInit {
* Imported `FormGroup`, `FormBuilder` and `Validators` from `@angular/forms`.
* Added a `form: FormGroup` property.
* Added a `bookTypes` property as a list of `BookType` enum members. That will be used in form options.
-* Injected the `FormBuilder` with the inject function. [FormBuilder](https://angular.io/api/forms/FormBuilder) provides convenient methods for generating form controls. It reduces the amount of boilerplate that is needed to build complex forms.
+* Injected the `FormBuilder` with the inject function. [FormBuilder](https://angular.dev/api/forms/FormBuilder) provides convenient methods for generating form controls. It reduces the amount of boilerplate that is needed to build complex forms.
* Added a `buildForm` method at the end of the file and executed the `buildForm()` in the `createBook` method.
* Added a `save` method.
diff --git a/latest-versions.json b/latest-versions.json
index 672c81cecf..56a156bb81 100644
--- a/latest-versions.json
+++ b/latest-versions.json
@@ -1,4 +1,13 @@
[
+ {
+ "version": "10.0.1",
+ "releaseDate": "",
+ "type": "stable",
+ "message": "",
+ "leptonx": {
+ "version": "5.0.1"
+ }
+ },
{
"version": "10.0.0",
"releaseDate": "",