Angular - Documentation updates for standalone migration

docs/en/framework/architecture/multi-tenancy/index.md

@@ -231,18 +231,20 @@ services.Configure<AbpAspNetCoreMultiTenancyOptions>(options =>
 If you change the `TenantKey`, make sure to pass it to `provideAbpCore` via `withOptions` method in the Angular client as follows:
 
 ```js
-@NgModule({
+// app.config.ts
+// ...
+export const appConfig: ApplicationConfig = {
   providers: [
+    // ...
     provideAbpCore(
       withOptions({
         // ...
         tenantKey: "MyTenantKey",
       })
     ),
+    // ...
   ],
-  // ...
-})
-export class AppModule {}
+};
 ```
 
 If you need to access it, you can inject it as follows:

docs/en/framework/ui/angular/account-module.md

@@ -17,36 +17,35 @@ npm install @abp/ng.account
 
 > Make sure v4.3 or higher version is installed.
 
-Open the `app.module.ts` and add `provideAccountConfig()` to the providers array as shown below:
+Open the `app.config.ts` and add `provideAccountConfig()` to the providers array as shown below:
 
 ```js
-// app.module.ts
+// app.config.ts
 
 import { provideAccountConfig } from "@abp/ng.account/config";
-//...
+// ...
 
-@NgModule({
+export const appConfig: ApplicationConfig = {
   providers: [
-    //...
+    // ...
     provideAccountConfig(),
+    // ...
   ],
-  //...
-})
-export class AppModule {}
+};
 ```
 
-Open the `app-routing.module.ts` and add the `account` route to `routes` array as follows:
+Open the `app.routes.ts` and add the `account` route to `APP_ROUTES` array as follows:
 
 ```js
-// app-routing.module.ts
-const routes: Routes = [
+// app.routes.ts
+export const APP_ROUTES: Routes = [
   //...
   {
     path: 'account',
-    loadChildren: () => import('@abp/ng.account').then(m => m.AccountModule.forLazy()),
+    loadChildren: () => import('@abp/ng.account').then(c => c.createRoutes()),
   },
   //...
-export class AppRoutingModule {}
+];
 ```
 
 ## Account Public Module Implementation for Commercial Templates
@@ -59,42 +58,42 @@ npm install @volo/abp.ng.account
 
 > Make sure v4.3 or higher version is installed.
 
-Open the `app.module.ts` and add `AccountPublicConfigModule.forRoot()` to the imports array as shown below:
+Open the `app.config.ts` and add `provideAccountPublicConfig()` to the providers array as shown below:
 
-> Ensure that the `Account Layout Module` has been added if you are using the Lepton X theme. If you miss the step, you will get an error message that says `Account layout not found. Please check your configuration. If you are using LeptonX, please make sure you have added "AccountLayoutModule.forRoot()" to your app.module configuration.` when you try to access the account pages. Otherwise, you can skip adding the `AccountLayoutModule` step.
+> Ensure that the `Account Layout Provider` has been added if you are using the Lepton X theme. If you miss the step, you will get an error message that says `Account layout not found. Please check your configuration. If you are using LeptonX, please make sure you have added "provideAccountLayout()" to your app configuration.` Otherwise, you can skip adding the `provideAccountLayout()` step.
 
 ```js
-// app.module.ts
+// app.config.ts
 
-import { AccountPublicConfigModule } from "@volo/abp.ng.account/public/config";
-// if you are using or want to use Lepton X, you should add AccountLayoutModule
-// import { AccountLayoutModule } from '@volosoft/abp.ng.theme.lepton-x/account'
+import { provideAccountPublicConfig } from "@volo/abp.ng.account/public/config";
+// if you are using or want to use Lepton X, you should add provideAccountLayout
+// import { provideAccountLayout } from '@volosoft/abp.ng.theme.lepton-x/account'
 
 //...
 
-@NgModule({
-  imports: [
-    //...
-    AccountPublicConfigModule.forRoot(),
-    // AccountLayoutModule.forRoot() // Only for Lepton X
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+    provideAccountPublicConfig(),
+    provideAccountLayout() // Only for Lepton X
+    // ...
   ],
-  //...
-})
-export class AppModule {}
+};
 ```
 
-Open the `app-routing.module.ts` and add the `account` route to `routes` array as follows:
+Open the `app.routes.ts` and add the `account` route to `APP_ROUTES` array as follows:
 
 ```js
-// app-routing.module.ts
-const routes: Routes = [
+// app.routes.ts
+
+export const APP_ROUTES: Routes = [
   //...
   {
     path: 'account',
-    loadChildren: () => import('@volo/abp.ng.account/public').then(m => m.AccountPublicModule.forLazy()),
+    loadChildren: () => import('@volo/abp.ng.account/public').then(c => c.createRoutes()),
   },
   //...
-export class AppRoutingModule {}
+];
 ```
 
 ## My Account Page
@@ -108,15 +107,15 @@ When the user changes their own data on the personal settings tab in My Account,
 If you want to disable these warning, You should set `isPersonalSettingsChangedConfirmationActive` false
 
 ```js
-// app-routing.module.ts
-const routes: Routes = [
+// app.routes.ts
+export const APP_ROUTES: Routes = [
   //...
   {
     path: 'account',
-    loadChildren: () => import('@volo/abp.ng.account/public').then(m => m.AccountPublicModule.forLazy({ isPersonalSettingsChangedConfirmationActive:false })),
+    loadChildren: () => import('@volo/abp.ng.account/public').then(c => c.create({ isPersonalSettingsChangedConfirmationActive:false })),
   },
   //...
-export class AppRoutingModule {}
+];
 ```
 
 ## Security Logs Page [COMMERCIAL]

docs/en/framework/ui/angular/authorization.md

@@ -61,15 +61,18 @@ The `AuthErrorFilterService` is an abstract service that needs to be replaced wi
 
 ### Usage
 
-#### 1.Create an auth-filter.provider
+#### 1.Create an auth filter provider
 
 ```js
-import { APP_INITIALIZER, inject } from '@angular/core';
+//auth-filter.provider.ts
+import { inject, provideAppInitializer } from '@angular/core';
 import { AuthErrorFilter, AuthErrorEvent, AuthErrorFilterService } from '@abp/ng.core';
 import { eCustomersAuthFilterNames } from '../enums';
 
 export const CUSTOMERS_AUTH_FILTER_PROVIDER = [
-  { provide: APP_INITIALIZER, useFactory: configureAuthFilter, multi: true },
+  provideAppInitializer(() => {
+      configureAuthFilter()
+  }),
 ];
 
 type Reason = object & { error: { grant_type: string | undefined } };
@@ -100,20 +103,17 @@ function configureAuthFilter() {
   - `executable:` a status for the filter object. If it's false then it won't work, yet it'll stay in the list
   - `execute:` a function that stores the skip logic
 
-#### 2.Add to the FeatureConfigModule
+#### 2.Add to the customer configuration provider
 
 ```js
-import { ModuleWithProviders, NgModule } from "@angular/core";
-import { CUSTOMERS_AUTH_FILTER_PROVIDER } from "./providers/auth-filter.provider";
-
-@NgModule()
-export class CustomersConfigModule {
-  static forRoot(): ModuleWithProviders<CustomersConfigModule> {
-    return {
-      ngModule: CustomersConfigModule,
-      providers: [CUSTOMERS_AUTH_FILTER_PROVIDER],
-    };
-  }
+// customer-config.provider.ts
+import { EnvironmentProviders, makeEnvironmentProviders } from "@angular/core";
+import { CUSTOMERS_AUTH_FILTER_PROVIDER } from "./auth-filter.provider";
+
+export function provideCustomerConfig(): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    CUSTOMERS_AUTH_FILTER_PROVIDER
+  ])
 }
 ```
 

docs/en/framework/ui/angular/basic-theme.md

@@ -11,10 +11,9 @@ The Basic Theme is a theme implementation for the Angular UI. It is a minimalist
 If you need to manually this theme, follow the steps below:
 
 * Install the [@abp/ng.theme.basic](https://www.npmjs.com/package/@abp/ng.theme.basic) NPM package to your Angular project.
-* Open the `src/app/app.module.ts` file, import `ThemeBasicModule`,`provideThemeBasicConfig` (it can be imported from `@abp/ng.theme.basic` package), and add `ThemeBasicModule` to the `imports` array and provide `provideThemeBasicConfig()` to the providers array.
-* Open the `src/app/shared/shared.module` file, import `ThemeBasicModule` (it can be imported from `@abp/ng.theme.basic` package), and add `ThemeBasicModule` to the `imports` and `exports` array.
+* Open the `src/app/app.config.ts` file, import `provideThemeBasicConfig` (it can be imported from `@abp/ng.theme.basic` package), and provide `provideThemeBasicConfig()` to the providers array.
 
-The `ThemeBasicModule` is registered own layouts (`ApplicationLayoutComponent`, `AccountLayoutComponent`, `EmptyLayoutComponent`) to a service which is exposed by `@abp/ng.core` package on application initialization. 
+The `BASIC_THEME_STYLES_PROVIDERS` has registered three layouts being `ApplicationLayoutComponent`, `AccountLayoutComponent`, and `EmptyLayoutComponent`. These are provided inside `provideThemeBasicConfig()` function that is exposed by `@abp/ng.theme.basic` package on application initialization.
 
 ## Application Layout
 

docs/en/framework/ui/angular/caps-lock-directive.md

@@ -5,66 +5,27 @@ In password inputs, You may want to show if Caps Lock is on. To make this even e
 
 ## Getting Started
 
-`TrackCapsLockDirective` is standalone. In order to use the `TrackCapsLockDirective` in an HTML template, import it to related module or your standalone component:
-
-**Importing to NgModule**
-```ts
-import { TrackCapsLockDirective } from '@abp/ng.core';
-
-@NgModule({
-  //...
-  declarations: [
-   ...,
-   TestComponent
-  ],
-  imports: [
-   ...,
-   TrackCapsLockDirective
-  ],
-})
-export class MyFeatureModule {}
-```
-
-## Usage
-
-The `TrackCapsLockDirective` is very easy to use. The directive's selector is **`abpCapsLock`**. By adding the `abpCapsLock` event to an element, you can track the status of Caps Lock. You can use this to warn user.
+`TrackCapsLockDirective` is standalone. In order to use the `TrackCapsLockDirective` in an HTML template, import it to related component. The selector of the directive is **`abpCapsLock`**. By adding the `abpCapsLock` event to an element, you can track the status of Caps Lock. You can use this to warn user.
 
 See an example usage:
 
-**NgModule Component usage**
-```ts
-@Component({
-  selector: 'test-component',
-  template: `
-    <div class="d-flex flex-column">
-      <label>Password</label>
-      <input (abpCapsLock)="capsLock = $event"/>
-      <i *ngIf="capsLock">icon</i>
-    </div>
-  `
-})
-export class TestComponent{
-  capsLock = false;
-}
-```
-
-**Standalone Component usage**
 ```ts
 import { TrackCapsLockDirective } from '@abp/ng.core'
 
 @Component({
-  selector: 'standalone-component',
-  standalone: true,
+  selector: 'sample-component',
   template: `
     <div class="d-flex flex-column">
       <label>Password</label>
       <input (abpCapsLock)="capsLock = $event"/>
-      <i *ngIf="capsLock">icon</i>
+      @if (capslock) {
+        <i>icon</i>
+      }
     </div>
   `,
   imports: [TrackCapsLockDirective]
 })
-export class StandaloneComponent{
+export class SampleComponent{
   capsLock = false;
 }
 ```