diff --git a/docs/en/framework/architecture/multi-tenancy/index.md b/docs/en/framework/architecture/multi-tenancy/index.md index 7a5017b369b..2340d241035 100644 --- a/docs/en/framework/architecture/multi-tenancy/index.md +++ b/docs/en/framework/architecture/multi-tenancy/index.md @@ -231,18 +231,20 @@ services.Configure(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: diff --git a/docs/en/framework/ui/angular/account-module.md b/docs/en/framework/ui/angular/account-module.md index eb149af61e4..05b670d4d22 100644 --- a/docs/en/framework/ui/angular/account-module.md +++ b/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] diff --git a/docs/en/framework/ui/angular/authorization.md b/docs/en/framework/ui/angular/authorization.md index dcf6e0c67d5..cef5dca7c48 100644 --- a/docs/en/framework/ui/angular/authorization.md +++ b/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 { - 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 + ]) } ``` diff --git a/docs/en/framework/ui/angular/basic-theme.md b/docs/en/framework/ui/angular/basic-theme.md index 6e32d4e6be8..2332091cf0a 100644 --- a/docs/en/framework/ui/angular/basic-theme.md +++ b/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 diff --git a/docs/en/framework/ui/angular/caps-lock-directive.md b/docs/en/framework/ui/angular/caps-lock-directive.md index f6a9c839313..179027022db 100644 --- a/docs/en/framework/ui/angular/caps-lock-directive.md +++ b/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: ` -
- - - icon -
- ` -}) -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: `
- icon + @if (capslock) { + icon + }
`, imports: [TrackCapsLockDirective] }) -export class StandaloneComponent{ +export class SampleComponent{ capsLock = false; } ``` diff --git a/docs/en/framework/ui/angular/card-component.md b/docs/en/framework/ui/angular/card-component.md index ca056853ff7..e8f1ba4d8e2 100644 --- a/docs/en/framework/ui/angular/card-component.md +++ b/docs/en/framework/ui/angular/card-component.md @@ -23,27 +23,7 @@ In addition to these components, the Card component provides directives like `Ca # Usage -ABP Card Component is a part of the `ThemeSharedModule` module. If you've imported that module into your module, you don't need to import it again. If not, first import it as shown below: - -```ts -// my-feature.module.ts - -import { ThemeSharedModule } from '@abp/ng.theme.shared'; -import { CardDemoComponent } from './card-demo.component'; - -@NgModule({ - imports: [ - ThemeSharedModule , - // ... - ], - declarations: [CardDemoComponent], - // ... -}) -export class MyFeatureModule {} - -``` - -Then, the `abp-card` component can be used. See the examples below: +ABP Card Component is a part of the `theme-shared` package. Once you import the necessary components, you can use them. See the examples below: ## CardBody @@ -51,16 +31,18 @@ Then, the `abp-card` component can be used. See the examples below: // card-demo.component.ts import { Component } from '@angular/core'; +import { CardComponent, CardBodyComponent } from '@abp/ng.theme.shared'; @Component({ selector: 'app-card-demo', + imports: [CardComponent, CardBodyComponent], template: ` This is some text within a card body `, }) -export class CardDemoComponent { } +export class CardDemoComponent {} ``` See the card body result below: @@ -72,22 +54,36 @@ See the card body result below: //card-demo.component.ts import { Component } from '@angular/core'; +import { + CardComponent, + CardBodyComponent, + CardTitleDirective, + CardSubtitleDirective +} from '@abp/ng.theme.shared'; @Component({ selector: 'app-card-demo', + imports: [ + CardComponent, + CardBodyComponent, + CardTitleDirective, + CardSubtitleDirective + ], template: `
Card Title
Card subtitle
-

Some quick example text to build on the card title and make up the bulk of the card's content.

- Card link - Another link +

+ Some quick example text to build on the card title and make up the bulk of the card's content. +

+ Card link + Another link `, }) -export class CardDemoComponent { } +export class CardDemoComponent {} ``` See the card title, text and link result below: @@ -99,19 +95,23 @@ See the card title, text and link result below: //card-demo.component.ts import { Component } from '@angular/core'; +import { CardComponent, CardBodyComponent, CardImgTopDirective } from '@abp/ng.theme.shared'; @Component({ selector: 'app-card-demo', + imports: [CardComponent, CardBodyComponent, CardImgTopDirective], template: ` ... -

Some quick example text to build on the card title and make up the bulk of the card's content.

+

+ Some quick example text to build on the card title and make up the bulk of the card's content. +

`, }) -export class CardDemoComponent { } +export class CardDemoComponent {} ``` See the card image result below: @@ -123,9 +123,11 @@ See the card image result below: //card-demo.component.ts import { Component } from '@angular/core'; +import { CardComponent } from '@abp/ng.theme.shared'; @Component({ selector: 'app-card-demo', + imports: [CardComponent], template: `
    @@ -136,7 +138,7 @@ import { Component } from '@angular/core'; `, }) -export class CardDemoComponent { } +export class CardDemoComponent {} ``` See the group list result below: @@ -148,15 +150,29 @@ See the group list result below: //card-demo.component.ts import { Component } from '@angular/core'; +import { + CardComponent, + CardBodyComponent, + CardImgTopDirective, + CardTitleDirective +} from '@abp/ng.theme.shared'; @Component({ selector: 'app-card-demo', + imports: [ + CardComponent, + CardBodyComponent, + CardImgTopDirective, + CardTitleDirective + ], template: ` ...
    Card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    +

    + Some quick example text to build on the card title and make up the bulk of the card's content. +

    • An item
      • @@ -170,7 +186,7 @@ import { Component } from '@angular/core'; `, }) -export class CardDemoComponent { } +export class CardDemoComponent {} ``` See kitchen sink result below: @@ -182,15 +198,31 @@ See kitchen sink result below: //card-demo.component.ts import { Component } from '@angular/core'; +import { + CardComponent, + CardHeaderComponent, + CardBodyComponent, + CardTitleDirective, + CardFooterComponent +} from '@abp/ng.theme.shared'; @Component({ selector: 'app-card-demo', + imports: [ + CardComponent, + CardHeaderComponent, + CardBodyComponent, + CardTitleDirective, + CardFooterComponent + ], template: ` Featured
      Special title treatment
      -

      With supporting text below as a natural lead-in to additional content.

      +

      + With supporting text below as a natural lead-in to additional content. +

      Go somewhere       @@ -199,7 +231,7 @@ import { Component } from '@angular/core';       `, }) -export class CardDemoComponent { } +export class CardDemoComponent {} ``` See the header and footer result below: diff --git a/docs/en/framework/ui/angular/chart-component.md b/docs/en/framework/ui/angular/chart-component.md index e2bf2c2e1ea..44007eef5b9 100644 --- a/docs/en/framework/ui/angular/chart-component.md +++ b/docs/en/framework/ui/angular/chart-component.md @@ -6,34 +6,16 @@ ABP Chart component exposed by `@abp/ng.components/chart.js` is based on [`chart ## How to Use -First of all, need to import the `ChartModule` to your feature module as follows: - -```ts -// your-feature.module.ts - -import { ChartModule } from "@abp/ng.components/chart.js"; -import { ChartDemoComponent } from "./chart-demo.component"; - -@NgModule({ - imports: [ - ChartModule, - // ... - ], - declarations: [ChartDemoComponent], - // ... -}) -export class YourFeatureModule {} -``` - -Then, `abp-chart` component can be used. See an example: +First of all, need to import the `ChartComponent` to your component. Then, `abp-chart` component can be used. See an example: ```ts // chart-demo.component.ts - import { Component } from "@angular/core"; +import { ChartComponent } from "@abp/ng.components/chart.js"; @Component({ selector: "app-chart-demo", + imports: [ChartComponent], template: ` `, }) export class ChartDemoComponent { @@ -62,9 +44,11 @@ See the result: ```ts import { Component } from "@angular/core"; +import { ChartComponent } from "@abp/ng.components/chart.js"; @Component({ selector: "app-chart-demo", + imports: [ChartComponent], template: ` + /> `, }) export class ChartDemoComponent { @@ -119,16 +103,18 @@ Result: ```ts import { Component } from "@angular/core"; +import { ChartComponent } from "@abp/ng.components/chart.js"; @Component({ selector: "app-chart-demo", + imports: [ChartComponent] template: ` + /> `, }) export class ChartDemoComponent { @@ -158,16 +144,18 @@ Result: ```ts import { Component } from "@angular/core"; +import { ChartComponent } from "@abp/ng.components/chart.js"; @Component({ selector: "app-chart-demo", + imports: [ChartComponent] template: ` + /> + @@ -43,24 +49,17 @@ You can add the `abp-modal` to your component very quickly. See an example: -

      Modal content

      +

      Modal content

       - +       ``` -```js -// sample.component.ts - -@Component(/* component metadata */) -export class SampleComponent { - isModalOpen = false -} -``` - ![Example modal result](./images/modal-result-1.jpg) @@ -136,7 +135,10 @@ import { FormBuilder, Validators } from '@angular/forms'; @Component(/* component metadata */) export class BookComponent { - form = this.fb.group({ + private fb = inject(FormBuilder); + private service = inject(BookService); + + form = this.fb.group({ author: [null, [Validators.required]], name: [null, [Validators.required]], price: [null, [Validators.required, Validators.min(0)]], @@ -148,10 +150,10 @@ export class BookComponent { isModalOpen: boolean; - constructor(private fb: FormBuilder, private service: BookService) {} - save() { - if (this.form.invalid) return; + if (this.form.invalid) { + return; + } this.inProgress = true; @@ -257,19 +259,16 @@ export class NgbdModalOptions { **`suppressUnsavedChangesWarning`** is a boolean input that determines whether the confirmation popup triggering active or not. It can also be set globally as shown below: ```ts -//app.module.ts - -// app.module.ts +// app.config.ts import { SUPPRESS_UNSAVED_CHANGES_WARNING } from '@abp/ng.theme.shared'; -// ... - -@NgModule({ - // ... - providers: [{provide: SUPPRESS_UNSAVED_CHANGES_WARNING, useValue: true}] -}) -export class AppModule {} +export const appConfig: ApplicationConfig = { + providers: [ + // ... + { provide: SUPPRESS_UNSAVED_CHANGES_WARNING, useValue: true } + ], +}; ``` Note: The `suppressUnsavedChangesWarning` input of `abp-modal` value overrides the `SUPPRESS_UNSAVED_CHANGES_WARNING` injection token value. diff --git a/docs/en/framework/ui/angular/modifying-the-menu.md b/docs/en/framework/ui/angular/modifying-the-menu.md index ef5e12782f3..ee3997b9d76 100644 --- a/docs/en/framework/ui/angular/modifying-the-menu.md +++ b/docs/en/framework/ui/angular/modifying-the-menu.md @@ -59,32 +59,33 @@ An alternative and probably cleaner way is to use a route provider. First create ```js // route.provider.ts import { RoutesService, eLayoutType } from '@abp/ng.core'; -import { APP_INITIALIZER } from '@angular/core'; +import { provideAppInitializer } from '@angular/core'; export const APP_ROUTE_PROVIDER = [ - { provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService], multi: true }, + provideAppInitializer(() => { + configureRoutes(); + }), ]; -function configureRoutes(routes: RoutesService) { - return () => { - routes.add([ - { - path: '/your-path', - name: 'Your navigation', - requiredPolicy: 'permission key here', - order: 101, - iconClass: 'fas fa-question-circle', - layout: eLayoutType.application, - }, - { - path: '/your-path/child', - name: 'Your child navigation', - parentName: 'Your navigation', - requiredPolicy: 'permission key here', - order: 1, - }, - ]); - }; +function configureRoutes() { + const routesService = inject(RoutesService); + routes.add([ + { + path: '/your-path', + name: 'Your navigation', + requiredPolicy: 'permission key here', + order: 101, + iconClass: 'fas fa-question-circle', + layout: eLayoutType.application, + }, + { + path: '/your-path/child', + name: 'Your child navigation', + parentName: 'Your navigation', + requiredPolicy: 'permission key here', + order: 1, + }, + ]); } ``` @@ -95,22 +96,21 @@ We can also define a group for navigation elements. It's an optional property // route.provider.ts import { RoutesService } from '@abp/ng.core'; -function configureRoutes(routes: RoutesService) { - return () => { - routes.add([ - { - //etc.. - group: 'ModuleName::GroupName' - }, - { - path: '/your-path/child', - name: 'Your child navigation', - parentName: 'Your navigation', - requiredPolicy: 'permission key here', - order: 1, - }, - ]); - }; +function configureRoutes() { + const routesService = inject(RoutesService); + routes.add([ + { + //etc.. + group: 'ModuleName::GroupName' + }, + { + path: '/your-path/child', + name: 'Your child navigation', + parentName: 'Your navigation', + requiredPolicy: 'permission key here', + order: 1, + }, + ]); } ``` @@ -131,25 +131,23 @@ export class AppComponent { } ``` -...and then in app.module.ts... +...and then in app.config.ts... - The `groupedVisible` method will return the `Others` group for ungrouped items, the default key is `AbpUi::OthersGroup`, we can change this `key` via the `OTHERS_GROUP` injection token ```js -import { NgModule } from '@angular/core'; import { OTHERS_GROUP } from '@abp/ng.core'; import { APP_ROUTE_PROVIDER } from './route.provider'; -@NgModule({ +export const appConfig: ApplicationConfig = { providers: [ + // ... APP_ROUTE_PROVIDER, { provide: OTHERS_GROUP, useValue: 'ModuleName::MyOthersGroupKey', }, ], - // imports, declarations, and bootstrap -}) -export class AppModule {} +}; ``` ### Singularize Route Item @@ -182,9 +180,9 @@ Here is what every property works as: - `invisible` makes the item invisible in the menu. (default: `false`) - `group` is an optional property that is used to group together related routes in an application. (type: `string`, default: `AbpUi::OthersGroup`) -### Via `routes` Property in `AppRoutingModule` +### Via `routes` Property in `APP_ROUTES` -You can define your routes by adding `routes` as a child property to `data` property of a route configuration in the `app-routing.module`. The `@abp/ng.core` package organizes your routes and stores them in the `RoutesService`. +You can define your routes by adding `routes` as a child property to `data` property of a route configuration in the `app.routes.ts`. The `@abp/ng.core` package organizes your routes and stores them in the `RoutesService`. You can add the `routes` property like below: diff --git a/docs/en/framework/ui/angular/multi-tenancy.md b/docs/en/framework/ui/angular/multi-tenancy.md index bfb929cc681..c85ac976a3e 100644 --- a/docs/en/framework/ui/angular/multi-tenancy.md +++ b/docs/en/framework/ui/angular/multi-tenancy.md @@ -133,12 +133,9 @@ Example: ```ts import { TENANT_NOT_FOUND_BY_NAME } from '@abp/ng.core'; -@NgModule({ - imports: [ - // removed for clarity - ], +export const appConfig: ApplicationConfig = { providers: [ - // removed for clarity + // removed for clarity { provide: TENANT_NOT_FOUND_BY_NAME, useFactory: function () { @@ -148,11 +145,7 @@ import { TENANT_NOT_FOUND_BY_NAME } from '@abp/ng.core'; }, }, ], - declarations: [AppComponent], - bootstrap: [AppComponent], -}) -export class AppModule {} - +}; ``` ## See Also diff --git a/docs/en/framework/ui/angular/oauth-module.md b/docs/en/framework/ui/angular/oauth-module.md index 0e67d44d072..8ec30ae4b4e 100644 --- a/docs/en/framework/ui/angular/oauth-module.md +++ b/docs/en/framework/ui/angular/oauth-module.md @@ -2,8 +2,7 @@ The authentication functionality has been moved from @abp/ng.core to @abp/ng.ouath since v7.0. -If your app is version 8.3 or higher, you should include "provideAbpOAuth()" in your app.module.ts as an providers after "provideAbpCore() -". +If your app is version 8.3 or higher, you should include "provideAbpOAuth()" after "provideAbpCore()" in the `appConfig` array of your `app.config.ts`. Those abstractions can be found in the @abp/ng-core packages. diff --git a/docs/en/framework/ui/angular/page-component.md b/docs/en/framework/ui/angular/page-component.md index b9fbc0b0bce..f190597fcfe 100644 --- a/docs/en/framework/ui/angular/page-component.md +++ b/docs/en/framework/ui/angular/page-component.md @@ -14,10 +14,10 @@ Let's look at the following example without `abp-page` component.

      {%{{{ '::Dashboard' | abpLocalization }}}%}

      - +
      @@ -42,22 +42,19 @@ export enum PageParts { ## Usage -Firstly, you need to import `PageModule` from `@abp/ng.components/page` as follows: +Firstly, you need to import Page components from `@abp/ng.components/page` based on your usage. Here is an example: -`dashboard.module.ts` +`dashboard.component.ts` ```javascript -import { PageModule } from '@abp/ng.components/page'; -import { DashboardComponent } from './dashboard.component'; -@NgModule({ - declarations: [DashboardComponent], - imports: [PageModule] +@Component({ + imports: [ PageComponent, ... ] }) -export class DashboardModule {} +export class  DashboardComponent {} ``` -And change the template of `dashboard.component.ts` to the following: +And change the template of `dashboard.component.html` to the following: ```html @@ -75,35 +72,55 @@ And change the template of `dashboard.component.ts` to the following: ## Overriding template -If you need to replace the template of any part, you can use the following sub-components. +If you need to replace the template of any part, you can use the following sub-components. You will need to import these components and modify the html template accordingly. -```html - - -

      Custom Title

      -       - - - - - - - - -       +```javascript +import { + PageComponent, + PageTitleContainerComponent, + PageBreadcrumbContainerComponent, + PageToolbarContainerComponent +} from '@abp/ng.components/page'; + +@Component({ + selector: 'app-sample-component', + template: ` + + +

      Custom Title

      +       + + + + + + + + +       + ` + imports: [ + PageComponent, + PageTitleContainerComponent, + PageBreadcrumbContainerComponent, + MyBreadcrumbComponent, + PageToolbarContainerComponent + ] +}) +export class SampleCompnent {} ``` You do not have to provide them all. You can just use which one you need to replace. These components have priority over the inputs declared above. If you use these components, you can omit the inputs. ## PagePartDirective -`PageModule` provides a structural directive that is used internally within `PageComponent` and can also be used externally. +`Components` package provides a structural directive that is used internally within `PageComponent` and can also be used externally. `PageComponent` employs this directive internally as follows: ```html
      - +
      ``` @@ -111,7 +128,7 @@ It also can take a context input as follows: ```html
      - +
      ``` @@ -194,17 +211,14 @@ export class MyPageRenderStrategy implements PageRenderStrategy { }) export class DashboardComponent {} -@NgModule({ - imports: [PageModule], - declarations: [DashboardComponent], +export const appConfig: ApplicationConfig = { providers: [ { provide: PAGE_RENDER_STRATEGY, useClass: MyPageRenderStrategy, } - ] -}) -export class DashboardModule {} + ], +}; ``` ## See Also diff --git a/docs/en/framework/ui/angular/page-toolbar-extensions.md b/docs/en/framework/ui/angular/page-toolbar-extensions.md index 74f79178dd5..5a741b3d2ff 100644 --- a/docs/en/framework/ui/angular/page-toolbar-extensions.md +++ b/docs/en/framework/ui/angular/page-toolbar-extensions.md @@ -14,7 +14,7 @@ In this example, we will add a "Click Me!" action and log `userName` of all user ### Step 1. Create Toolbar Action Contributors -The following code prepares a constant named `identityToolbarActionContributors`, ready to be imported and used in your root module: +The following code prepares a constant named `identityToolbarActionContributors`, ready to be imported and used in your root application configuration: ```js // src/app/toolbar-action-contributors.ts @@ -53,22 +53,22 @@ The list of actions, conveniently named as `actionList`, is a **doubly linked li ### Step 2. Import and Use Toolbar Action Contributors -Import `identityToolbarActionContributors` in your routing module and pass it to the static `forLazy` method of `IdentityModule` as seen below: +Import `identityToolbarActionContributors` in your routing configuration and pass it to the static `createRoutes` method for `identity` route as seen below: ```js -// src/app/app-routing.module.ts +// src/app/app.routes.ts // other imports import { identityToolbarActionContributors } from './toolbar-action-contributors'; -const routes: Routes = [ +export const APP_ROUTES: Routes = [ // other routes { path: 'identity', loadChildren: () => - import('@abp/ng.identity').then(m => - m.IdentityModule.forLazy({ + import('@abp/ng.identity').then(c => + c.createRoutes({ toolbarActionContributors: identityToolbarActionContributors, }) ), @@ -78,7 +78,7 @@ const routes: Routes = [ ]; ``` -That is it, `logUserNames` toolbar action will be added as the first action on the page toolbar in the users page (`UsersComponent`) of the `IdentityModule`. +That is it, `logUserNames` toolbar action will be added as the first action on the page toolbar in the users page (`UsersComponent`) of the `identity` package. ## How to Add a Custom Component to Page Toolbar @@ -93,9 +93,9 @@ We need to have a component before we can pass it to the toolbar action contribu ```js // src/app/click-me-button.component.ts +import { Component, Inject } from '@angular/core'; import { IdentityUserDto } from '@abp/ng.identity/proxy'; import { ActionData, EXTENSIONS_ACTION_DATA } from '@abp/ng.components/extensible'; -import { Component, Inject } from '@angular/core'; @Component({ selector: 'app-click-me-button', @@ -120,7 +120,7 @@ Here, `EXTENSIONS_ACTION_DATA` token provides us the context from the page toolb ### Step 2. Create Toolbar Action Contributors -The following code prepares a constant named `identityToolbarActionContributors`, ready to be imported and used in your root module. When `ToolbarComponent` is used instead of `ToolbarAction`, we can pass a component in: +The following code prepares a constant named `identityToolbarActionContributors`, ready to be imported and used in your root application configuration. When `ToolbarComponent` is used instead of `ToolbarAction`, we can pass a component in: ```js // src/app/toolbar-action-contributors.ts @@ -156,22 +156,22 @@ The list of actions, conveniently named as `actionList`, is a **doubly linked li ### Step 3. Import and Use Toolbar Action Contributors -Import `identityToolbarActionContributors` in your routing module and pass it to the static `forLazy` method of `IdentityModule` as seen below. +Import `identityToolbarActionContributors` in your routing configuration and pass it to the static `createRoutes` method for `identity` route as seen below. ```js -// src/app/app-routing.module.ts +// src/app/app.routes.ts // other imports import { identityToolbarActionContributors } from './toolbar-action-contributors'; -const routes: Routes = [ +export const APP_ROUTES: Routes = [ // other routes { path: 'identity', loadChildren: () => - import('@abp/ng.identity').then(m => - m.IdentityModule.forLazy({ + import('@abp/ng.identity').then(c => + c.createRoutes({ toolbarActionContributors: identityToolbarActionContributors, }) ), @@ -181,7 +181,7 @@ const routes: Routes = [ ]; ``` -That is it, `logUserNames` toolbar action will be added as the first action on the page toolbar in the users page (`UsersComponent`) of the `IdentityModule` and it will be triggered by a custom button, i.e. `ClickMeButtonComponent`. Please note that **component projection is not limited to buttons** and you may use other UI components. +That is it, `logUserNames` toolbar action will be added as the first action on the page toolbar in the users page (`UsersComponent`) of the `identity` package and it will be triggered by a custom button, i.e. `ClickMeButtonComponent`. Please note that **component projection is not limited to buttons** and you may use other UI components. ## How to Place a Custom Modal and Trigger It by Toolbar Actions @@ -380,7 +380,7 @@ export const identityEntityActionContributors = { ### ToolbarActionContributorCallback\ -`ToolbarActionContributorCallback` is the type that you can pass as toolbar action contributor callbacks to static `forLazy` methods of the modules. +`ToolbarActionContributorCallback` is the type that you can pass as toolbar action contributor callbacks to static `createRoutes` methods of the packages. ```js // exportUsersContributor should have ToolbarActionContributorCallback type diff --git a/docs/en/framework/ui/angular/password-complexity-indicator-component.md b/docs/en/framework/ui/angular/password-complexity-indicator-component.md index 806b686ece0..1733f9543e9 100644 --- a/docs/en/framework/ui/angular/password-complexity-indicator-component.md +++ b/docs/en/framework/ui/angular/password-complexity-indicator-component.md @@ -42,7 +42,7 @@ The `PasswordComplexityIndicatorService` is for calculating the password complex It's easy, imagine you have a password input that you want to add the complexity indicator under. Put this component under the input ```ts - + ``` - Pass the password to the `validatePassword` method of the `PasswordComplexityIndicatorService`, and bind return the value to the `progressBar` property of the `abp-password-complexity-indicator` diff --git a/docs/en/framework/ui/angular/permission-management.md b/docs/en/framework/ui/angular/permission-management.md index c797402003e..5d3ed643516 100644 --- a/docs/en/framework/ui/angular/permission-management.md +++ b/docs/en/framework/ui/angular/permission-management.md @@ -100,11 +100,10 @@ export class CustomPermissionService extends PermissionService { } ``` -- Then, in `app.module.ts`, provide this service as follows: +- Then, in `app.config.ts`, provide this service as follows: ```js -@NgModule({ - // ... +export const appConfig: ApplicationConfig = { providers: [ // ... { @@ -112,9 +111,7 @@ export class CustomPermissionService extends PermissionService { useExisting: CustomPermissionService, }, ], - // ... -}) -export class AppModule {} +}; ``` That's it. Now, when a directive/guard asks for `PermissionService` from angular, it will inject your service. diff --git a/docs/en/framework/ui/angular/pwa-configuration.md b/docs/en/framework/ui/angular/pwa-configuration.md index 918aa4970d8..9825eb0a523 100644 --- a/docs/en/framework/ui/angular/pwa-configuration.md +++ b/docs/en/framework/ui/angular/pwa-configuration.md @@ -38,7 +38,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.module.ts** imports `ServiceWorkerModule` and registers a service worker filename. +- **app.config.ts** imports `ServiceWorkerModule` and registers a service worker filename. - **index.html** has following modifications: - A `` element that refers to _manifest.webmanifest_. - A `` tag that sets a theme color. diff --git a/docs/en/framework/ui/angular/quick-start.md b/docs/en/framework/ui/angular/quick-start.md index 3dd6e2f32d1..77080141ed1 100644 --- a/docs/en/framework/ui/angular/quick-start.md +++ b/docs/en/framework/ui/angular/quick-start.md @@ -54,28 +54,27 @@ Here is what these folders and files are for: - **.vscode** has extension recommendations in it. - **e2e** is a separate app for possible end-to-end tests. - **src** is where the source files for your application are placed. We will have a closer look in a minute. -- **.browserlistrc** helps [configuring browser compatibility of your Angular app](https://angular.io/guide/build#configuring-browser-compatibility). +- **.browserlistrc** helps [configuring browser compatibility of your Angular app](https://angular.dev/tools/cli/build#configuring-browser-compatibility). - **.editorconfig** helps you have a shared coding style for separate editors and IDEs. Check [EditorConfig.org](https://editorconfig.org/) for details. - **.gitignore** defined which files and folders should not be tracked by git. Check [git documentation](https://git-scm.com/docs/gitignore) for details. - **.prettierrc** includes simple coding style choices for [Prettier](https://prettier.io/), an auto-formatter for TypeScript, HTML, CSS, and more. If you install recommended extensions to VS Code, you will never have to format your code anymore. -- **angular.json** is where Angular workspace is defined. It holds project configurations and workspace preferences. Please refer to [Angular workspace configuration](https://angular.io/guide/workspace-config) for details. +- **angular.json** is where Angular workspace is defined. It holds project configurations and workspace preferences. Please refer to [Angular workspace configuration](https://angular.dev/reference/configs/workspace-config) for details. - **karma.conf.js** holds [Karma test runner](https://karma-runner.github.io/) configurations. -- **package.json** is where your [package dependencies](https://angular.io/guide/npm-packages) are listed. It also includes some useful scripts for developing, testing, and building your application. +- **package.json** is where your [package dependencies](https://angular.dev/reference/configs/npm-packages) are listed. It also includes some useful scripts for developing, testing, and building your application. - **README.md** includes some of Angular CLI command examples. You either have to install Angular CLI globally or run these commands starting with `yarn` or `npx` to make them work. -- **start.ps1** is a simple PowerShell script to install dependencies and start a [development server via Angular CLI](https://angular.io/cli/serve), but you probably will not need that after reading this document. -- **tsconfig.json** and all other [tsconfig files](https://angular.io/guide/typescript-configuration) in general, include some TypeScript and Angular compile options. +- **start.ps1** is a simple PowerShell script to install dependencies and start a [development server via Angular CLI](https://angular.dev/cli/serve), but you probably will not need that after reading this document. +- **tsconfig.json** and all other [tsconfig files](https://angular.dev/reference/configs/angular-compiler-options) in general, include some TypeScript and Angular compile options. - **yarn.lock** enables installing consistent package versions across different devices so that working application build will not break because of a package update. Please read [Yarn documentation](https://classic.yarnpkg.com/en/docs/yarn-lock/) if you are interested in more information on the topic. If you have decided to use npm, please remove this file and keep the [package-lock.json](https://docs.npmjs.com/files/package-lock.json) instead. Now let us take a look at the contents of the source folder. Angular project source folder structure -- **app** is the main directory you put your application files in. Any module, component, directive, service, pipe, guard, interceptor, etc. should be placed here. You are free to choose any folder structure, but [organizing Angular applications based on modules](https://angular.io/guide/module-types) is generally a fine practice. -- **home** is a predefined module and acts as a welcome page. It also demonstrates how a feature-based folder structure may look like. More complex features will probably have sub-features, thus inner folders. You may change the home folder however you like. -- **shared** is spared for reusable code that works for several modules. Some, including yours truly, may disagree with using a single module for all shared code, so consider adding standalone sub-modules inside this folder instead of adding everything into **shared.module.ts**. -- **app-routing.module.ts** is where your top-level routes are defined. Angular is capable of [lazy loading feature modules](https://angular.io/guide/lazy-loading-ngmodules), so not all routes will be here. You may think of Angular routing as a tree and this file is the top of the tree. +- **app** is the main directory you put your application files in. Any component, directive, service, pipe, guard, interceptor, etc. should be placed here. You are free to choose any folder structure, but [organizing Angular applications using configuration-based structure](https://angular.dev/reference/configs/file-structure) is generally a fine practice, especially when using standalone APIs. This replaces the older convention of organizing strictly by NgModules. +- **home** is a predefined component and acts as a welcome page. It also demonstrates how a feature-based folder structure may look like. More complex features will probably have sub-features, thus inner folders. You may change the home folder however you like. +- **app.routes.ts** is where your top-level routes are defined. Angular is capable of [lazy loading routes now](https://angular.dev/reference/migrations/route-lazy-loading), so not all routes will be here. You may think of Angular routing as a tree and this file is the top of the tree. - **app.component.ts** is essentially the top component that holds the dynamic application layout. -- **app.module.ts** is the [root module](https://angular.io/guide/bootstrapping) that includes information about how parts of your application are related and what to run at the initiation of your application. +- **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. @@ -155,7 +154,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.io/guide/workspace-config#build-configs) 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.io/guide/build#configure-target-specific-file-replacements) 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. diff --git a/docs/en/framework/ui/angular/show-password-directive.md b/docs/en/framework/ui/angular/show-password-directive.md index cacb2550c59..588aa3a60bc 100644 --- a/docs/en/framework/ui/angular/show-password-directive.md +++ b/docs/en/framework/ui/angular/show-password-directive.md @@ -4,24 +4,20 @@ In password input, text can be shown easily via changing input type attribute to ## Getting Started -`ShowPasswordDirective` is standalone. In order to use the `ShowPasswordDirective` in an HTML template, import it to related module or your standalone component: +`ShowPasswordDirective` is standalone. In order to use the it in an HTML template, import it to your component: -**Importing to NgModule** +**Importing to Component** ```ts import { ShowPasswordDirective } from '@abp/ng.core'; -@NgModule({ +@Component({ //... - declarations: [ - ..., - TestComponent - ], imports: [ - ..., + // ..., ShowPasswordDirective ], }) -export class MyFeatureModule {} +export class TestComponent {} ``` ## Usage @@ -30,28 +26,10 @@ The `ShowPasswordDirective` is very easy to use. The directive's selector is **` See an example usage: -**NgModule Component usage** -```ts -@Component({ - selector: 'test-component', - template: ` -
      - - - icon -
      - ` -}) -export class TestComponent{ - showPassword = false; -} -``` -**Standalone Component usage** ```ts import { ShowPasswordDirective } from '@abp/ng.core'; @Component({ - selector: 'standalone-component', - standalone: true, + selector: 'sample-component', template: `
      @@ -61,7 +39,7 @@ import { ShowPasswordDirective } from '@abp/ng.core'; `, imports: [ShowPasswordDirective] }) -export class StandaloneComponent{ +export class SampleComponent{ showPassword = false; } ``` diff --git a/docs/en/framework/ui/angular/sorting-navigation-elements.md b/docs/en/framework/ui/angular/sorting-navigation-elements.md index 7385a1681c8..a5a9b3db895 100644 --- a/docs/en/framework/ui/angular/sorting-navigation-elements.md +++ b/docs/en/framework/ui/angular/sorting-navigation-elements.md @@ -19,19 +19,18 @@ This documentation describes how the navigation elements are sorted and how to c # How to Customize -**`in app.module.ts`** +**`in app.config.ts`** ```ts import { SORT_COMPARE_FUNC } from "@abp/ng.core"; -@NgModule({ +export const appConfig: ApplicationConfig = { providers: [ - ...{ + // ... + { provide: SORT_COMPARE_FUNC, useFactory: yourCompareFuncFactory, }, ], - // imports, declarations, and bootstrap -}) -export class AppModule {} +}; ``` diff --git a/docs/en/framework/ui/angular/toaster-service.md b/docs/en/framework/ui/angular/toaster-service.md index ad08697eebe..a6c65ccb72a 100644 --- a/docs/en/framework/ui/angular/toaster-service.md +++ b/docs/en/framework/ui/angular/toaster-service.md @@ -4,7 +4,7 @@ You can use the `ToasterService` in @abp/ng.theme.shared package to display mess ## Getting Started -You do not have to provide the `ToasterService` at module or component level, because it is already **provided in root**. You can inject and start using it immediately in your components, directives, or services. +You do not have to provide the `ToasterService` at component level, because it is already **provided in root**. You can inject and start using it immediately in your components, directives, or services. ```js import { ToasterService } from '@abp/ng.theme.shared'; @@ -170,19 +170,19 @@ export class CustomToasterService implements Toaster.Service { ``` ```js -// app.module.ts +// app.config.ts import { ToasterService } from '@abp/ng.theme.shared'; -@NgModule({ +export const appConfig: ApplicationConfig = { providers: [ - // ... + // ... { provide: ToasterService, useClass: CustomToasterService, }, - ] -}) + ], +}; ``` ## API diff --git a/docs/en/images/angular-folder-structure.png b/docs/en/images/angular-folder-structure.png index cfc5c6d0e28..f8b6ea656c6 100644 Binary files a/docs/en/images/angular-folder-structure.png and b/docs/en/images/angular-folder-structure.png differ diff --git a/docs/en/modules/account-pro.md b/docs/en/modules/account-pro.md index c53a6f24ecc..594d51da627 100644 --- a/docs/en/modules/account-pro.md +++ b/docs/en/modules/account-pro.md @@ -301,47 +301,41 @@ See the `AccountPermissions` class members for all permissions defined for this #### Installation -In order to configure the application to use the `AccountPublicModule` and the `AccountAdminModule`, you first need to import `AccountPublicConfigModule` from `@volo/abp.ng.account/public/config` and `AccountAdminConfigModule` from `@volo/abp.ng.account/admin/config` to root module. Config modules has a static `forRoot` method which you should call for a proper configuration. +In order to configure the application to use the public account module and the admin account module, you first need to import `provideAccountPublicConfig` from `@volo/abp.ng.account/public/config` and `provideAccountAdminConfig` from `@volo/abp.ng.account/admin/config`. Then, you will need to append them to the `appConfig` array. ```js -// app.module.ts -import { AccountAdminConfigModule } from '@volo/abp.ng.account/admin/config'; -import { AccountPublicConfigModule } from '@volo/abp.ng.account/public/config'; - -@NgModule({ - imports: [ - // other imports - AccountPublicConfigModule.forRoot(), - AccountAdminConfigModule.forRoot(), - // other imports +// app.config.ts +import { provideAccountPublicConfig } from '@volo/abp.ng.account/public/config'; +import { provideAccountAdminConfig } from '@volo/abp.ng.account/admin/config'; + +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideAccountAdminConfig(), + provideAccountPublicConfig(), ], - // ... -}) -export class AppModule {} +}; ``` -The `AccountPublicModule` should be imported and lazy-loaded in your routing module. It has a static `forLazy` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.account/public`. +The account public package should be imported and lazy-loaded in your routing array. It has a static `createRoutes` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.account/public`. ```js -// app-routing.module.ts -const routes: Routes = [ - // other route definitions +// app.routes.ts +export const APP_ROUTES: Routes = [ + // ... { path: 'account', - loadChildren: () => - import('@volo/abp.ng.account/public').then(m => m.AccountPublicModule.forLazy(/* options here */)), + loadChildren: () => import('@volo/abp.ng.account/public').then(c => c.createRoutes(/* options here */)), }, ]; -@NgModule(/* AppRoutingModule metadata */) -export class AppRoutingModule {} ``` -> If you have generated your project via the startup template, you do not have to do anything, because it already has the modules. +> If you have generated your project via the startup template, you do not have to do anything, because it already has the necessary configurations.

      Options

      -You can modify the look and behavior of the module pages by passing the following options to `AccountModule.forLazy` static method: +You can modify the look and behavior of the module pages by passing the following options to `createRoutes` static method: - **redirectUrl**: Default redirect URL after logging in. - **entityActionContributors:** Changes grid actions. Please check [Entity Action Extensions for Angular](../framework/ui/angular/entity-action-extensions.md) for details. diff --git a/docs/en/modules/audit-logging-pro.md b/docs/en/modules/audit-logging-pro.md index cb32ff52feb..01bb49ec277 100644 --- a/docs/en/modules/audit-logging-pro.md +++ b/docs/en/modules/audit-logging-pro.md @@ -234,45 +234,39 @@ See the `AbpAuditLoggingPermissions` class members for all permissions defined f #### Installation -In order to configure the application to use the `AuditLoggingModule`, you first need to import `AuditLoggingConfigModule` from `@volo/abp.ng.audit-logging/config` to root module. `AuditLoggingConfigModule` has a static `forRoot` method which you should call for a proper configuration. +In order to configure the application to use the audit logging module, you first need to import `provideAuditLoggingConfig` from `@volo/abp.ng.audit-logging/config` to root configuration. Then, you will need to append it to the `appConfig` array. ```js -// app.module.ts -import { AuditLoggingConfigModule } from '@volo/abp.ng.audit-logging/config'; - -@NgModule({ - imports: [ - // other imports - AuditLoggingConfigModule.forRoot(), - // other imports +// app.config.ts +import { provideAuditLoggingConfig } from '@volo/abp.ng.audit-logging/config'; + +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideAuditLoggingConfig(), ], - // ... -}) -export class AppModule {} +}; ``` -The `AuditLoggingModule` should be imported and lazy-loaded in your routing module. It has a static `forLazy` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.audit-logging`. +The audit logging module should be imported and lazy-loaded in your routing array. It has a static `createRoutes` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.audit-logging`. ```js -// app-routing.module.ts -const routes: Routes = [ - // other route definitions +// app.routes.ts +export const APP_ROUTES: Routes = [ + // ... { path: 'audit-logs', - loadChildren: () => - import('@volo/abp.ng.audit-logging').then(m => m.AuditLoggingModule.forLazy(/* options here */)), + loadChildren: () => import('@volo/abp.ng.audit-logging').then(c => c.createRoutes(/* options here */)), }, ]; -@NgModule(/* AppRoutingModule metadata */) -export class AppRoutingModule {} ``` -> If you have generated your project via the startup template, you do not have to do anything, because it already has both `AuditLoggingConfigModule` and `AuditLoggingModule`. +> If you have generated your project via the startup template, you do not have to do anything, because it already has both files configured.

      Options

      -You can modify the look and behavior of the module pages by passing the following options to `AuditLoggingModule.forLazy` static method: +You can modify the look and behavior of the module pages by passing the following options to `createRoutes` static method: - **entityActionContributors:** Changes grid actions. Please check [Entity Action Extensions for Angular](../framework/ui/angular/entity-action-extensions.md) for details. - **toolbarActionContributors:** Changes page toolbar. Please check [Page Toolbar Extensions for Angular](../framework/ui/angular/page-toolbar-extensions.md) for details. diff --git a/docs/en/modules/chat.md b/docs/en/modules/chat.md index 589980ec989..42379b29bc9 100644 --- a/docs/en/modules/chat.md +++ b/docs/en/modules/chat.md @@ -206,38 +206,33 @@ See the [connection strings](../framework/fundamentals/connection-strings.md) do #### Installation -In order to configure the application to use the `ChatModule`, you first need to import `ChatConfigModule` from `@volo/abp.ng.chat/config` to root module. `ChatConfigModule` has a static `forRoot` method which you should call for a proper configuration. +In order to configure the application to use the chat module, you first need to import `provideChatConfig` from `@volo/abp.ng.chat/config` to root application confiuration. Then, you will need to append it to the `appConfig` array. ```js -// app.module.ts -import { ChatConfigModule } from '@volo/abp.ng.chat/config'; - -@NgModule({ - imports: [ - // other imports - ChatConfigModule.forRoot(), - // other imports +// app.config.ts +import { provideChatConfig } from '@volo/abp.ng.chat/config'; + +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideChatConfig(), ], - // ... -}) -export class AppModule {} +}; + ``` -The `ChatModule` should be imported and lazy-loaded in your routing module. It has a static `forLazy` method for configuration. It is available for import from `@volo/abp.ng.chat`. +The chat module should be imported and lazy-loaded in your routing array. It has a static `createRoutes` method for configuration. It is available for import from `@volo/abp.ng.chat`. ```js -// app-routing.module.ts -const routes: Routes = [ - // other route definitions +// app.routes.ts +const APP_ROUTES: Routes = [ + // ... { path: 'chat', loadChildren: () => - import('@volo/abp.ng.chat').then(m => m.ChatModule.forLazy(/* options here */)), + import('@volo/abp.ng.chat').then(c => c.createRoutes(/* options here */)), }, ]; - -@NgModule(/* AppRoutingModule metadata */) -export class AppRoutingModule {} ``` #### Services / Models diff --git a/docs/en/modules/gdpr.md b/docs/en/modules/gdpr.md index bef763a41ac..43e38eb6b27 100644 --- a/docs/en/modules/gdpr.md +++ b/docs/en/modules/gdpr.md @@ -177,45 +177,46 @@ See the [connection strings](../framework/fundamentals/connection-strings.md) do ### Installation -In order to configure the application to use the `GdprModule`, you first need to import `GdprConfigModule` from `@volo/abp.ng.gdpr/config` to the root module. `GdprConfigModule` has a static `forRoot` method which you should call for a proper configuration. +In order to configure the application to use the gdpr module, you first need to import `provideGdprConfig` from `@volo/abp.ng.gdpr/config` to the root configuration. Then, you will need to append it to the `appConfig` array. ```js -// app.module.ts -import { GdprConfigModule } from '@volo/abp.ng.gdpr/config'; - -@NgModule({ - imports: [ - // other imports - GdprConfigModule.forRoot(), - // other imports +// app.config.ts +import { + provideGdprConfig, + withCookieConsentOptions, +} from '@volo/abp.ng.gdpr/config'; + +export const appConfig: ApplicationConfig = { + providers: [ + provideGdprConfig( + withCookieConsentOptions({ + cookiePolicyUrl: '/gdpr-cookie-consent/cookie', + privacyPolicyUrl: '/gdpr-cookie-consent/privacy', + }), + ), ], - // ... -}) -export class AppModule {} +}; ``` -The `GdprModule` should be imported and lazy-loaded in your routing module. It has a static `forLazy` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.gdpr`. +The gdpr module should be imported and lazy-loaded in your routing array. It has a static `createRoutes` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.gdpr`. ```js -// app-routing.module.ts -const routes: Routes = [ +// app.routes.ts +const APP_ROUTES: Routes = [ // other route definitions { path: 'gdpr', loadChildren: () => - import('@volo/abp.ng.gdpr').then(m => m.GdprModule.forLazy(/* options here */)), + import('@volo/abp.ng.gdpr').then(c => c.createRoutes(/* options here */)), }, ]; - -@NgModule(/* AppRoutingModule metadata */) -export class AppRoutingModule {} ``` -> If you have generated your project via the startup template, you do not have to do anything, because it already has both `GdprConfigModule` and `GdprModule`. +> If you have generated your project via the startup template, you do not have to do anything, because it already has both files configured.

      Options

      -You can modify the look and behavior of the module pages by passing the following options to the `GdprModule.forLazy` static method: +You can modify the look and behavior of the module pages by passing the following options to the `createRoutes` static method: - **entityActionContributors:** Changes the grid actions. Please check [Entity Action Extensions for Angular](../framework/ui/angular/entity-action-extensions.md) for details. - **toolbarActionContributors:** Changes the page toolbar. Please check [Page Toolbar Extensions for Angular](../framework/ui/angular/page-toolbar-extensions.md) for details. diff --git a/docs/en/modules/identity-pro.md b/docs/en/modules/identity-pro.md index ab25a8d5c80..6649a335e35 100644 --- a/docs/en/modules/identity-pro.md +++ b/docs/en/modules/identity-pro.md @@ -343,45 +343,39 @@ See the `IdentityPermissions` class members for all permissions defined for this #### Installation -In order to configure the application to use the `IdentityModule`, you first need to import `IdentityConfigModule` from `@volo/abp.ng.identity/config` to root module. `IdentityConfigModule` has a static `forRoot` method which you should call for a proper configuration. +In order to configure the application to use the identity module, you first need to import `provideIdentityConfig` from `@volo/abp.ng.identity/config` to root configuration. Then, you will need to append it to the `appConfig` array. ```js -// app.module.ts -import { IdentityConfigModule } from '@volo/abp.ng.identity/config'; - -@NgModule({ - imports: [ - // other imports - IdentityConfigModule.forRoot(), - // other imports +// app.config.ts +import { provideIdentityConfig } from '@volo/abp.ng.identity/config'; + +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideIdentityConfig(), ], - // ... -}) -export class AppModule {} +}; ``` -The `IdentityModule` should be imported and lazy-loaded in your routing module. It has a static `forLazy` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.identity`. +The identity module should be imported and lazy-loaded in your routing configuration. It has a static `createRoutes` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.identity`. ```js -// app-routing.module.ts -const routes: Routes = [ - // other route definitions +// app.routes.ts +const APP_ROUTES: Routes = [ + // ... { path: 'identity', loadChildren: () => - import('@volo/abp.ng.identity').then(m => m.IdentityModule.forLazy(/* options here */)), + import('@volo/abp.ng.identity').then(c => c.createRoutes(/* options here */)), }, ]; - -@NgModule(/* AppRoutingModule metadata */) -export class AppRoutingModule {} ``` -> If you have generated your project via the startup template, you do not have to do anything, because it already has both `IdentityConfigModule` and `IdentityModule`. +> If you have generated your project via the startup template, you do not have to do anything, because it already has both configurations added.

      Options

      -You can modify the look and behavior of the module pages by passing the following options to `IdentityModule.forLazy` static method: +You can modify the look and behavior of the module pages by passing the following options to `createRoutes` static method: - **entityActionContributors:** Changes grid actions. Please check [Entity Action Extensions for Angular](../framework/ui/angular/entity-action-extensions.md) for details. - **toolbarActionContributors:** Changes page toolbar. Please check [Page Toolbar Extensions for Angular](../framework/ui/angular/page-toolbar-extensions.md) for details. diff --git a/docs/en/modules/identity-server-pro.md b/docs/en/modules/identity-server-pro.md index ce25823ee86..ad197e8a7dd 100644 --- a/docs/en/modules/identity-server-pro.md +++ b/docs/en/modules/identity-server-pro.md @@ -245,45 +245,39 @@ See the `AbpIdentityServerPermissions` class members for all permissions defined #### Installation -In order to configure the application to use the `IdentityServerModule`, you first need to import `IdentityServerConfigModule` from `@volo/abp.ng.identity-server/config` to root module. `IdentityServerConfigModule` has a static `forRoot` method which you should call for a proper configuration. +In order to configure the application to use the identity server, you first need to import `provideIdentityServerConfig` from `@volo/abp.ng.identity-server/config` to root configuration. Then, you will need to append it to the `appConfig` array. ```js -// app.module.ts -import { IdentityServerConfigModule } from '@volo/abp.ng.identity-server/config'; - -@NgModule({ - imports: [ - // other imports - IdentityServerConfigModule.forRoot(), - // other imports +// app.config.ts +import { provideIdentityServerConfig } from '@volo/abp.ng.identity-server/config'; + +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideIdentityServerConfig() ], - // ... -}) -export class AppModule {} +}; ``` -The `IdentityServerModule` should be imported and lazy-loaded in your routing module. It has a static `forLazy` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.identity-server`. +The identity server module should be imported and lazy-loaded in your routing module. It has a static `creatRoutes` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.identity-server`. ```js -// app-routing.module.ts -const routes: Routes = [ +// app.routes.ts +const APP_ROUTES: Routes = [ // other route definitions { path: 'identity-server', loadChildren: () => - import('@volo/abp.ng.identity-server').then(m => m.IdentityServerModule.forLazy(/* options here */)), + import('@volo/abp.ng.identity-server').then(c => c.createRoutes(/* options here */)), }, ]; - -@NgModule(/* AppRoutingModule metadata */) -export class AppRoutingModule {} ``` -> If you have generated your project via the startup template, you do not have to do anything, because it already has both `IdentityServerConfigModule` and `IdentityServerModule`. +> If you have generated your project via the startup template, you do not have to do anything, because it already has both files configured.

      Options

      -You can modify the look and behavior of the module pages by passing the following options to `IdentityServerModule.forLazy` static method: +You can modify the look and behavior of the module pages by passing the following options to `createRoutes` static method: - **entityActionContributors:** Changes grid actions. Please check [Entity Action Extensions for Angular](../framework/ui/angular/entity-action-extensions.md) for details. - **toolbarActionContributors:** Changes page toolbar. Please check [Page Toolbar Extensions for Angular](../framework/ui/angular/page-toolbar-extensions.md) for details. diff --git a/docs/en/modules/language-management.md b/docs/en/modules/language-management.md index 62327378a4f..536abc7ab36 100644 --- a/docs/en/modules/language-management.md +++ b/docs/en/modules/language-management.md @@ -149,45 +149,41 @@ See the `LanguageManagementPermissions` class members for all permissions define #### Installation -To configure the application to use the `LanguageManagementModule`, you first need to import `LanguageManagementConfigModule` from `@volo/abp.ng.language-management/config` to root module. `LanguageManagementConfigModule` has a static `forRoot` method which you should call for a proper configuration. +To configure the application to use the language management module, you first need to import `provideLanguageManagementConfig` from `@volo/abp.ng.language-management/config` to root configuration. Then, you will need to append it to the `appConfig` array. ```js -// app.module.ts -import { LanguageManagementConfigModule } from '@volo/abp.ng.language-management/config'; - -@NgModule({ - imports: [ - // other imports - LanguageManagementConfigModule.forRoot(), - // other imports +// app.config.ts +import { provideLanguageManagementConfig } from '@volo/abp.ng.language-management/config'; + +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideLanguageManagementConfig() ], - // ... -}) -export class AppModule {} +}; + ``` -The `LanguageManagementModule` should be imported and lazy-loaded in your routing module. It has a static `forLazy` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.language-management`. +The language management module should be imported and lazy-loaded in your routing array. It has a static `createRoutes` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.language-management`. ```js -// app-routing.module.ts -const routes: Routes = [ - // other route definitions +// app.routes.ts + +const APP_ROUTES: Routes = [ + // ... { path: 'language-management', loadChildren: () => - import('@volo/abp.ng.language-management').then(m => m.LanguageManagementModule.forLazy(/* options here */)), + import('@volo/abp.ng.language-management').then(c => c.createRoutes(/* options here */)), }, ]; - -@NgModule(/* AppRoutingModule metadata */) -export class AppRoutingModule {} ``` -> If you have generated your project via the startup template, you do not have to do anything because it already has both `LanguageManagementConfigModule` and `LanguageManagementModule`. +> If you have generated your project via the startup template, you do not have to do anything because it already has both configurations implemented.

      Options

      -You can modify the look and behavior of the module pages by passing the following options to `LanguageManagementModule.forLazy` static method: +You can modify the look and behavior of the module pages by passing the following options to `createRoutes` static method: - **entityActionContributors:** Changes grid actions. Please check [Entity Action Extensions for Angular](../framework/ui/angular/entity-action-extensions.md) for details. - **toolbarActionContributors:** Changes page toolbar. Please check [Page Toolbar Extensions for Angular](../framework/ui/angular/page-toolbar-extensions.md) for details. diff --git a/docs/en/modules/payment.md b/docs/en/modules/payment.md index b3fb6de84b8..6a55cc83aeb 100644 --- a/docs/en/modules/payment.md +++ b/docs/en/modules/payment.md @@ -81,38 +81,36 @@ This page is used to send Name, Surname and Email Address of user to PayU. #### Installation -In order to configure the application to use the `PaymentModule`, you first need to import `PaymentAdminConfigModule` from `@volo/abp.ng.payment/admin/config` to the root module. `PaymentAdminConfigModule` has a static `forRoot` method which you should call for a proper configuration: +In order to configure the application to use the payment module, you first need to import `PaymentAdminConfigModule` from `@volo/abp.ng.payment/admin/config` to the root configuration. `PaymentAdminConfigModule` has a static `forRoot` method which you should call for a proper configuration: ```js -// app.module.ts +// app.config.ts +import { ApplicationConfig, importProvidersFrom } from '@angular/core'; import { PaymentAdminConfigModule } from '@volo/abp.ng.payment/admin/config'; -@NgModule({ - imports: [ - // other imports - PaymentAdminConfigModule.forRoot(), - // other imports +export const appConfig: ApplicationConfig = { + providers: [ + // ... + importProvidersFrom([ + PaymentAdminConfigModule.forRoot() + ]), ], - // ... -}) -export class AppModule {} +}; + ``` -The `PaymentAdminModule` should be imported and lazy-loaded in your routing module as below: +The payment admin module should be imported and lazy-loaded in your routing array as below: ```js -// app-routing.module.ts -const routes: Routes = [ - // other route definitions +// app.routes.ts +const APP_ROUTES: Routes = [ + // ... { path: 'payment', loadChildren: () => - import('@volo/abp.ng.payment/admin').then(m => m.PaymentAdminModule.forLazy()), + import('@volo/abp.ng.payment/admin').then(c => c.createRoutes()), }, ]; - -@NgModule(/* AppRoutingModule metadata */) -export class AppRoutingModule {} ``` #### Payment plans page diff --git a/docs/en/modules/saas.md b/docs/en/modules/saas.md index bfd0115853d..f1e85d6cebf 100644 --- a/docs/en/modules/saas.md +++ b/docs/en/modules/saas.md @@ -244,45 +244,39 @@ See the `SaasHostPermissions` class members for all permissions defined for this #### Installation -In order to configure the application to use the `SaasModule`, you first need to import `SaasConfigModule` from `@volo/abp.ng.saas/config` to root module. `SaasConfigModule` has a static `forRoot` method which you should call for a proper configuration. +In order to configure the application to use the saas module, you first need to import `provideSaasConfig` from `@volo/abp.ng.saas/config` to root module. Then, you will need to append it to the `appConfig` array. ```js -// app.module.ts -import { SaasConfigModule } from '@volo/abp.ng.saas/config'; - -@NgModule({ - imports: [ - // other imports - SaasConfigModule.forRoot(), - // other imports +// app.config.ts +import { provideSaasConfig } from '@volo/abp.ng.saas/config'; + +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideSaasConfig(), ], - // ... -}) -export class AppModule {} +}; ``` -The `SaasModule` should be imported and lazy-loaded in your routing module. It has a static `forLazy` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.saas`. +The saas module should be imported and lazy-loaded in your routing configuration. It has a static `createRoutes` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.saas`. ```js -// app-routing.module.ts -const routes: Routes = [ - // other route definitions +// app.routes.ts +const APP_ROUTES: Routes = [ + // ... { path: 'saas', loadChildren: () => - import('@volo/abp.ng.saas').then(m => m.SaasModule.forLazy(/* options here */)), + import('@volo/abp.ng.saas').then(c => c.createRoutes(/* options here */)), }, ]; - -@NgModule(/* AppRoutingModule metadata */) -export class AppRoutingModule {} ``` -> If you have generated your project via the startup template, you do not have to do anything, because it already has both `SaasConfigModule` and `SaasModule`. +> If you have generated your project via the startup template, you do not have to do anything, because it already has both configurations implemented.

      Options

      -You can modify the look and behavior of the module pages by passing the following options to `SaasModule.forLazy` static method: +You can modify the look and behavior of the module pages by passing the following options to `createRoutes` static method: - **entityActionContributors:** Changes grid actions. Please check [Entity Action Extensions for Angular](../framework/ui/angular/entity-action-extensions.md) for details. - **toolbarActionContributors:** Changes page toolbar. Please check [Page Toolbar Extensions for Angular](../framework/ui/angular/page-toolbar-extensions.md) for details. diff --git a/docs/en/modules/text-template-management.md b/docs/en/modules/text-template-management.md index 9b2235314ff..7f045cd8e1c 100644 --- a/docs/en/modules/text-template-management.md +++ b/docs/en/modules/text-template-management.md @@ -162,45 +162,39 @@ See the `TextTemplateManagementPermissions` class members for all permissions de #### Installation -In order to configure the application to use the `TextTemplateManagementModule`, you first need to import `TextTemplateManagementConfigModule` from `@volo/abp.ng.text-template-management/config` to root module. `TextTemplateManagementConfigModule` has a static `forRoot` method which you should call for a proper configuration. +In order to configure the application to use the text template management module, you first need to import `provideTextTemplateManagementConfig` from `@volo/abp.ng.text-template-management/config` to root configuration. Then, you will need to append it to the `appConfig` array. ```js -// app.module.ts -import { TextTemplateManagementConfigModule } from '@volo/abp.ng.text-template-management/config'; - -@NgModule({ - imports: [ - // other imports - TextTemplateManagementConfigModule.forRoot(), - // other imports +// app.config.ts +import { provideTextTemplateManagementConfig } from '@volo/abp.ng.text-template-management/config'; + +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideTextTemplateManagementConfig() ], - // ... -}) -export class AppModule {} +}; ``` -The `TextTemplateManagementModule` should be imported and lazy-loaded in your routing module. It has a static `forLazy` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.text-template-management`. +The text template management module should be imported and lazy-loaded in your routing array. It has a static `createRoutes` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.text-template-management`. ```js -// app-routing.module.ts -const routes: Routes = [ - // other route definitions +// app.routes.ts +const APP_ROUTES: Routes = [ + // ... { path: 'text-template-management', loadChildren: () => - import('@volo/abp.ng.text-template-management').then(m => m.TextTemplateManagementModule.forLazy(/* options here */)), + import('@volo/abp.ng.text-template-management').then(c => c.createRoutes(/* options here */)), }, ]; - -@NgModule(/* AppRoutingModule metadata */) -export class AppRoutingModule {} ``` -> If you have generated your project via the startup template, you do not have to do anything, because it already has both `TextTemplateManagementConfigModule` and `TextTemplateManagementModule`. +> If you have generated your project via the startup template, you do not have to do anything, because it already has both configurations implemented.

      Options

      -You can modify the look and behavior of the module pages by passing the following options to `TextTemplateManagementModule.forLazy` static method: +You can modify the look and behavior of the module pages by passing the following options to `createRoutes` static method: - **entityActionContributors:** Changes grid actions. Please check [Entity Action Extensions for Angular](../framework/ui/angular/entity-action-extensions.md) for details. - **toolbarActionContributors:** Changes page toolbar. Please check [Page Toolbar Extensions for Angular](../framework/ui/angular/page-toolbar-extensions.md) for details. diff --git a/docs/en/solution-templates/application-module/index.md b/docs/en/solution-templates/application-module/index.md index 2b6de263fc1..48013d2d903 100644 --- a/docs/en/solution-templates/application-module/index.md +++ b/docs/en/solution-templates/application-module/index.md @@ -183,45 +183,29 @@ The issue management page is empty in the beginning. You may change the content Now, let's have a closer look at some key elements of your project. -### The Main Module +### The Main Component -`IssueManagementModule` at the _angular/projects/issue-management/src/lib/issue-management.module.ts_ path is the main module of your module project. There are a few things worth mentioning in it: +`IssueManagementComponent` at the _angular/projects/issue-management/src/lib/issue-management.routes.ts_ path is the main component of your module project. There are a few things worth mentioning in it: -- Essential ABP modules, i.e. `CoreModule` and `ThemeSharedModule`, are imported. -- `IssueManagementRoutingModule` is imported. -- `IssueManagementComponent` is declared. -- It is prepared for configurability. The `forLazy` static method enables [a configuration to be passed to the module when it is loaded by the router](https://volosoft.com/blog/how-to-configure-angular-modules-loaded-by-the-router). - - -### The Main Routing Module - -`IssueManagementRoutingModule` at the _angular/projects/issue-management/src/lib/issue-management-routing.module.ts_ path is the main routing module of your module project. It currently does two things: - -- Loads `DynamicLayoutComponent` at base path it is given. -- Loads `IssueManagementComponent` as child to the layout, again at the given base path. - -You can rearrange this module to load more than one component at different routes, but you need to update the route provider at _angular/projects/issue-management/config/src/providers/route.provider.ts_ to match the new routing structure with the routes in the menu. Please check [Modifying the Menu](../../framework/ui/angular/modifying-the-menu.md) to see how route providers work. +- `IssueManagementComponent` is declared as standalone within the latest migration. +- `ISSUE_MANAGEMENT_ROUTES` is configured to be lazy-loaded. ### The Config Module -There is a config module at the _angular/projects/issue-management/config/src/issue-management-config.module.ts_ path. The static `forRoot` method of this module is supposed to be called at the route level. So, you may assume the following will take place: +There is a config module at the _angular/projects/issue-management/config/src/providers/route.provider.ts_ path. The static `provideIssueManagement` method of this module is supposed to be called at the route level. So, you may assume the following will take place: ```js -@NgModule({ - imports: [ - /* other imports */ - - IssueManagementConfigModule.forRoot(), +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideIssueManagement(), + // ... ], - - /* rest of the module meta data */ -}) -export class AppModule {} +}; ``` You can use this static method to configure an application that uses your module project. An example of such configuration is already implemented and the `ISSUE_MANAGEMENT_ROUTE_PROVIDERS` token is provided here. The method can take options which enables further configuration possibilities. -The difference between the `forRoot` method of the config module and the `forLazy` method of the main module is that, for smallest bundle size, the former should only be used when you have to configure an app before your module is even loaded. ### Testing Angular UI diff --git a/docs/en/solution-templates/layered-web-application/images/angular-folder-structure.png b/docs/en/solution-templates/layered-web-application/images/angular-folder-structure.png index 95bfc8986ff..1ee4f87081c 100644 Binary files a/docs/en/solution-templates/layered-web-application/images/angular-folder-structure.png and b/docs/en/solution-templates/layered-web-application/images/angular-folder-structure.png differ diff --git a/docs/en/solution-templates/layered-web-application/images/angular-template-structure-diagram.png b/docs/en/solution-templates/layered-web-application/images/angular-template-structure-diagram.png index dd7a4e5cc73..10841cccd06 100644 Binary files a/docs/en/solution-templates/layered-web-application/images/angular-template-structure-diagram.png and b/docs/en/solution-templates/layered-web-application/images/angular-template-structure-diagram.png differ 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 8a1b71fda78..ce678668151 100644 --- a/docs/en/solution-templates/layered-web-application/web-applications.md +++ b/docs/en/solution-templates/layered-web-application/web-applications.md @@ -49,25 +49,25 @@ The Angular application runs as a client-side SPA in the user's browser and comm ![angular-folder-structure](images/angular-folder-structure.png) -Each of ABP modules is an NPM package. Some ABP modules are added as a dependency in `package.json`. These modules install with their dependencies. To see all ABP packages, you can run the following command in the `angular` folder: +Each of ABP module is an NPM package. Some ABP modules are added as a dependency in `package.json`. These modules are installed with their dependencies. To see all ABP packages, you can run the following command in the `angular` folder: ```bash yarn list --pattern abp ``` -Angular application module structure: +Angular application structure: ![Angular template structure diagram](images/angular-template-structure-diagram.png) -### AppModule +### Application Config -`AppModule` is the root module of the application. Some of the ABP modules and some essential modules are imported to `AppModule`. +Application config is the root configuration of the application. Some of the ABP modules and some essential providers are imported to `appConfig`. -ABP Config modules have also been imported to `AppModule` for initial requirements of the lazy-loadable ABP modules. +ABP Config modules have also been provided in `appConfig` for initial requirements of the lazy-loadable ABP modules. -### AppRoutingModule +### APP_ROUTES -There are lazy-loadable ABP modules in the `AppRoutingModule` as routes. +There are lazy-loadable ABP modules in the `APP_ROUTES` as routes. > Paths of ABP Modules should not be changed. @@ -76,7 +76,7 @@ You should add `routes` property in the `data` object to add a link on the menu ```js { path: 'dashboard', - loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule), + loadComponent: () => import('./dashboard/dashboard.component').then(c => c.DashboardComponent), canActivate: [authGuard, permissionGuard], data: { routes: { @@ -97,19 +97,13 @@ In the above example; After the above `routes` definition, if the user is authorized, the dashboard link will appear on the menu. -### Shared Module - -The modules that may be required for all modules have been imported to the `SharedModule`. You should import `SharedModule` to all modules. - -See the [Sharing Modules](https://angular.io/guide/sharing-ngmodules) document. - ### Environments The files under the `src/environments` folder have the essential configuration of the application. -### Home Module +### Home Component -Home module is an example lazy-loadable module that loads on the root address of the application. +Home component is an example lazy-loadable component that loads on the root address of the application. ### Styles diff --git a/docs/en/solution-templates/microservice/localization-system.md b/docs/en/solution-templates/microservice/localization-system.md index a350de68487..e11232236e6 100644 --- a/docs/en/solution-templates/microservice/localization-system.md +++ b/docs/en/solution-templates/microservice/localization-system.md @@ -92,12 +92,12 @@ You can define new localization entries in the language files under the **Locali Angular UI gets the localization resources from the [`application-localization`](../../framework/api-development/standard-apis/localization.md) API's response and merges these resources in the `ConfigStateService` for the localization entries/resources coming from the backend side. -In addition, you may need to define some localization entries and only use them on the UI side. ABP already provides the related configuration for you, so you don't need to make any configurations related to that and instead you can directly define localization entries in the `app.-module.ts` file of your angular application as follows: +In addition, you may need to define some localization entries and only use them on the UI side. ABP already provides the related configuration for you, so you don't need to make any configurations related to that and instead you can directly define localization entries in the `app.config.ts` file of your angular application as follows: ```ts import { provideAbpCore, withOptions } from '@abp/ng.core'; -@NgModule({ +export const appConfig: ApplicationConfig = { providers: [ // ... provideAbpCore( @@ -119,11 +119,8 @@ import { provideAbpCore, withOptions } from '@abp/ng.core'; ] }), ), - ... ], -}) -export class AppModule {} - +}; ``` After defining the localization entries, it can be used as below: diff --git a/docs/en/suite/solution-structure.md b/docs/en/suite/solution-structure.md index b1949a137a9..5abd50d7514 100644 --- a/docs/en/suite/solution-structure.md +++ b/docs/en/suite/solution-structure.md @@ -226,25 +226,21 @@ Angular application folder structure looks like below: ![angular-folder-structure](../images/angular-folder-structure.png) -Each of ABP modules is an NPM package. Some ABP modules are added as a dependency in `package.json`. These modules install with their dependencies. To see all ABP packages, you can run the following command in the `angular` folder: +Each of ABP module is an NPM package. Some ABP modules are added as a dependency in `package.json`. These modules are installed with their dependencies. To see all ABP packages, you can run the following command in the `angular` folder: ```bash yarn list --pattern abp ``` -Angular application module structure: +### Application Config -![Angular template structure diagram](../images/angular-template-structure-diagram.png) +Application config is the root module of the application. Some of ABP modules and some essential modules are imported to the `appConfig`. -### AppModule +ABP Config modules also have been imported to `appConfig`  for initially requirements of lazy-loadable ABP modules. -`AppModule` is the root module of the application. Some of ABP modules and some essential modules imported to the `AppModule`. +### APP_ROUTES -ABP Config modules also have imported to `AppModule`  for initially requirements of lazy-loadable ABP modules. - -### AppRoutingModule - -There are lazy-loadable ABP modules in the `AppRoutingModule` as routes. +There are lazy-loadable ABP modules in the `APP_ROUTES` as routes. > Paths of ABP Modules should not be changed. @@ -253,7 +249,7 @@ You should add `routes` property in the `data` object to add a link on the menu ```js { path: 'dashboard', - loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule), + loadComponent: () => import('./dashboard/dashboard.component').then(c => c.DashboardComponent), canActivate: [authGuard, permissionGuard], data: { routes: { @@ -274,25 +270,19 @@ In the above example; After the above `routes` definition, if the user is authorized, the dashboard link will appear on the menu. -### Shared Module - -The modules that may be required for all modules have imported to the `SharedModule`. You should import the `SharedModule` to all modules. - -See the [Sharing Modules](https://angular.io/guide/sharing-ngmodules) document. - ### Environments The files under the `src/environments` folder has the essential configuration of the application. -### Home Module +### Home Component -Home module is an example lazy-loadable module that loads on the root address of the application. +Home component is an example lazy-loadable standalone component that loads on the root address of the application. -### Dashboard Module +### Dashboard Component -Dashboard module is a lazy-loadable module. `HostDashboardComponent` and `TenantDashboardComponent` declared to this module. One of these components is shown according to the user's authorization. +Dashboard component is a lazy-loadable component. `HostDashboardComponent` and `TenantDashboardComponent` are declared within this root component. One of these components is shown according to authorization of the user. -There are four widgets in the `HostDashboardComponent` which declared in ABP modules. +There are four widgets in the `HostDashboardComponent` which are declared in ABP modules. ### Styles diff --git a/docs/en/tutorials/microservice/part-05.md b/docs/en/tutorials/microservice/part-05.md index 3fcfc9cac81..9c037617a16 100644 --- a/docs/en/tutorials/microservice/part-05.md +++ b/docs/en/tutorials/microservice/part-05.md @@ -516,14 +516,6 @@ abp generate-proxy -t ng -m ordering -u http://localhost:44311 --target ordering For more information, please refer to the [Service Proxies](https://abp.io/docs/latest/framework/ui/angular/service-proxies) documentation. -### Create Order Module - -Run the following command line to create a new module, named `OrderModule` in the root folder of the angular application: - -```bash -yarn ng generate module order --module ordering-service --project ordering-service --routing --route orders -``` - ### Add Order Route * Create `order-base.routes.ts` file under the `projects/ordering-service/config/src/providers` folder and add the following code: @@ -565,39 +557,102 @@ function configureRoutes() { routesService.add(routes); } ``` +* Open the `projects/ordering-service/config/src/providers/route.provider.ts` file and add `ORDERS_ORDER_ROUTE_PROVIDER` to the `ORDER_SERVICE_PROVIDERS` array as following code: -* Open the `projects/ordering-service/config/src/ordering-service-config.module.ts` file and add `ORDERS_ORDER_ROUTE_PROVIDER` to the `providers` array as following code: - -*ordering-service-config.module.ts* +*route.provider.ts* ```typescript -import { ModuleWithProviders, NgModule } from '@angular/core'; -import { ORDERING_SERVICE_ROUTE_PROVIDERS } from './providers/route.provider'; -import { ORDERS_ORDER_ROUTE_PROVIDER } from './providers/order-route.provider'; - -@NgModule() -export class OrderingServiceConfigModule { - static forRoot(): ModuleWithProviders { - return { - ngModule: OrderingServiceConfigModule, - providers: [ORDERING_SERVICE_ROUTE_PROVIDERS, ORDERS_ORDER_ROUTE_PROVIDER], - }; - } +import { eLayoutType, RoutesService } from '@abp/ng.core'; +import { + EnvironmentProviders, + inject, + makeEnvironmentProviders, + provideAppInitializer, +} from '@angular/core'; +import { eOrderingServiceRouteNames } from '../enums/route-names'; +import { ORDERS_ORDER_ROUTE_PROVIDER } from './order-route.provider'; + + +export const ORDER_SERVICE_ROUTE_PROVIDERS = [ + provideAppInitializer(() => { + configureRoutes(); + }), +]; + +export function configureRoutes() { + const routesService = inject(RoutesService); + routesService.add([ + { + path: '/order-service', + name: eOrderingServiceRouteNames.OrderService, + iconClass: 'fas fa-book', + layout: eLayoutType.application, + order: 3, + }, + ]); +} + +const ORDER_SERVICE_PROVIDERS: EnvironmentProviders[] = [ + ...ORDER_SERVICE_ROUTE_PROVIDERS, + ...ORDERS_ORDER_ROUTE_PROVIDER +]; + +export function provideOrderService() { + return makeEnvironmentProviders(ORDER_SERVICE_PROVIDERS); } ``` +* Do not forget adding `provideOrderService()` to the providers inside `app.config.ts` as follows: + +```typescript +import { provideOrderService } from '@order-service/config'; + +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideOrderService() + ], +}; +``` + +* Lastly, you need to update the `APP_ROUTES` array in `app.routes.ts` file as follows: + +```typescript +// app.routes.ts +export const APP_ROUTES: Routes = [ + // ... + { + path: 'order-service', + children: ORDER_SERVICE_ROUTES, + }, +]; +``` + +```typescript +// order-service.routes.ts +export const ORDER_SERVICE_ROUTES: Routes = [ + { + path: '', + pathMatch: 'full', + component: RouterOutletComponent, + }, + { path: 'orders', children: ORDER_ROUTES }, +]; +``` + ### Create Order Page * Create `order.component.ts` file under the `projects/ordering-service/src/lib/order` folder as following code: ```typescript import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; import { OrderDto, OrderService } from './proxy/ordering-service/services'; @Component({ selector: 'lib-order', - standalone: false, templateUrl: './order.component.html', styleUrl: './order.component.css' + imports: [CommonModule] }) export class OrderComponent { diff --git a/docs/en/ui-themes/lepton-x-lite/angular.md b/docs/en/ui-themes/lepton-x-lite/angular.md index 430bc2ee73b..2943a785246 100644 --- a/docs/en/ui-themes/lepton-x-lite/angular.md +++ b/docs/en/ui-themes/lepton-x-lite/angular.md @@ -31,42 +31,33 @@ yarn add bootstrap-icons Note: You should remove the old theme styles from "angular.json" if you are switching from "ThemeBasic" or "Lepton." Look at the [Theme Configurations](../../framework/ui/angular/theme-configurations.md) list of styles. Depending on your theme, you can alter your styles in angular.json. -- Finally, remove `ThemeBasicModule`, `provideThemeBasicConfig` from `app.module.ts`, and import the related modules in `app.module.ts` +- Finally, remove `provideThemeBasicConfig` from `app.config.ts`, and import the related providers in `app.config.ts` ```js -import { ThemeLeptonXModule } from "@abp/ng.theme.lepton-x"; +import { provideThemeLeptonX } from "@abp/ng.theme.lepton-x"; +import { provideSideMenuLayout } from "@abp/ng.theme.lepton-x/layouts"; -@NgModule({ - imports: [ - // ... - // do not forget to remove ThemeBasicModule or other old theme module - // ThemeBasicModule - ThemeLeptonXModule.forRoot() - ], +export const appConfig: ApplicationConfig = { providers: [ - // do not forget to remove provideThemeBasicConfig or other old theme providers - // provideThemeBasicConfig + // ... + provideSideMenuLayout(), + provideThemeLeptonX(), ], - // ... -}) -export class AppModule {} +}; ``` -Note: If you employ [Resource Owner Password Flow](../../framework/ui/angular/authorization.md#resource-owner-password-flow) for authorization, you should import the following module as well: +Note: If you employ [Resource Owner Password Flow](../../framework/ui/angular/authorization.md#resource-owner-password-flow) for authorization, you should provide the following provider as well: ```js -import { AccountLayoutModule } from "@abp/ng.theme.lepton-x/account"; +import { provideAccountLayout } from "@abp/ng.theme.lepton-x/account"; -@NgModule({ - // ... - imports: [ - // ... - AccountLayoutModule.forRoot(), +export const appConfig: ApplicationConfig = { + providers: [ // ... + provideAccountLayout() ], - // ... -}) -export class AppModule {} +}; + ``` To change the logos and brand color of `LeptonX`, simply add the following CSS to the `styles.scss` diff --git a/docs/en/ui-themes/lepton-x/angular.md b/docs/en/ui-themes/lepton-x/angular.md index 60ad62b5d94..af1713cec8f 100644 --- a/docs/en/ui-themes/lepton-x/angular.md +++ b/docs/en/ui-themes/lepton-x/angular.md @@ -9,51 +9,36 @@ To add `LeptonX` into your existing projects, follow the steps below. Add theme-specific styles into the `styles` array of the file. Check the [Theme Configurations](../../framework/ui/angular/theme-configurations.md#lepton-x-commercial) documentation for more information. -Importing a CSS file as an ECMA module is not supported in Angular 14. Therefore, we need to add the styles in the angular.json file. -- At last, remove `ThemeLeptonModule` from `app.module.ts` and `shared.module.ts`, and import the following modules in `app.module.ts` +- At last, remove `provideThemeLepton` from `app.config.ts`, and add the following providers in `app.config.ts` + ```ts -import { - HttpErrorComponent, - ThemeLeptonXModule, -} from "@volosoft/abp.ng.theme.lepton-x"; -import { SideMenuLayoutModule } from "@volosoft/abp.ng.theme.lepton-x/layouts"; - -@NgModule({ - // ... - imports: [ - // ... - // ThemeLeptonModule.forRoot(), -> remove this line. - ThemeLeptonXModule.forRoot(), - SideMenuLayoutModule.forRoot(), // depends on which layout you choose - // ... +import { provideThemeLeptonX } from '@volosoft/abp.ng.theme.lepton-x'; +import { provideSideMenuLayout } from '@volosoft/abp.ng.theme.lepton-x/layouts'; +// import { provideThemeLepton } from '@volo/abp.ng.theme.lepton'; + +export const appConfig: ApplicationConfig = { + providers: [ + // provideThemeLepton() delete this + provideSideMenuLayout(), // depends on which layout you choose + provideThemeLeptonX(), ], - // ... -}) -export class AppModule {} +}; ``` -If you want to use the **`Top Menu`** instead of the **`Side Menu`**, add TopMenuLayoutModule as below,and [this style imports](https://docs.abp.io/en/abp/7.4/UI/Angular/Theme-Configurations#lepton-x-commercial) +If you want to use the **`Top Menu`** instead of the **`Side Menu`**, add `provideTopMenuLayout` as below,and [this style imports](https://docs.abp.io/en/abp/7.4/UI/Angular/Theme-Configurations#lepton-x-commercial) ```ts -import { - HttpErrorComponent, - ThemeLeptonXModule, -} from "@volosoft/abp.ng.theme.lepton-x"; -import { TopMenuLayoutModule } from "@volosoft/abp.ng.theme.lepton-x/layouts"; - -@NgModule({ - // ... - imports: [ - // ... - // ThemeLeptonModule.forRoot(), -> remove this line. - ThemeLeptonXModule.forRoot(), - TopMenuLayoutModule.forRoot(), +import { provideThemeLeptonX } from '@volosoft/abp.ng.theme.lepton-x'; +import { provideTopMenuLayout } from '@volosoft/abp.ng.theme.lepton-x/layouts'; + +export const appConfig: ApplicationConfig = { + providers: [ + provideTopMenuLayout(), + provideThemeLeptonX(), ], - // ... -}) -export class AppModule {} +}; ``` - At this point, `LeptonX` theme should be up and running within your application. However, you may need to overwrite some css variables based your needs for every theme available as follows: diff --git a/docs/en/ui-themes/lepton-x/angular/how-to-add-a-new-variation-to-lepton-x-for-angular.md b/docs/en/ui-themes/lepton-x/angular/how-to-add-a-new-variation-to-lepton-x-for-angular.md index afea2fd2283..dc858715d05 100644 --- a/docs/en/ui-themes/lepton-x/angular/how-to-add-a-new-variation-to-lepton-x-for-angular.md +++ b/docs/en/ui-themes/lepton-x/angular/how-to-add-a-new-variation-to-lepton-x-for-angular.md @@ -37,26 +37,20 @@ export const NEW_THEME_PROVIDER = [ In this code snippet, we create a new instance of the LpxTheme class called myNewThemeDefinition. We specify the bundles that make up the theme (e.g., "bootstrap-custom" and "custom-theme"), the style name for the theme, a label to display in the UI, and an icon (using Bootstrap icons in this example). ### Step 2: Registering the New Theme Provider -Now that we have defined the new theme appearance, we need to register it as a provider in our Angular project. Open the app.module.ts file (or the module where LeptonX is configured), and add the following code: +Now that we have defined the new theme appearance, we need to register it as a provider in our Angular project. Open the `app.config.ts` file (or the configuration where LeptonX is configured), and add the following code: ```js import { NEW_THEME_PROVIDER } from './new-theme.provider.ts'; -@NgModule({ - imports: [ - // ... - ], +export const appConfig: ApplicationConfig = { providers: [ // ... - NEW_THEME_PROVIDER, + NEW_THEME_PROVIDER ], - // ... -}) -export class AppModule { } - +}; ``` -By importing the `NEW_THEME_PROVIDER` from the file where we defined our theme, we can add it to the providers array of our Angular module. This makes the new theme appearance available throughout the application. +By importing the `NEW_THEME_PROVIDER` from the file where we defined our theme, we can add it to the providers array of our Angular application configuration. This makes the new theme appearance available throughout the application. ### Step 3: Adding the Styles Path to angular.json diff --git a/docs/en/ui-themes/lepton-x/angular/how-to-change-default-theme-option.md b/docs/en/ui-themes/lepton-x/angular/how-to-change-default-theme-option.md index 4b58c4b1061..264091b5614 100644 --- a/docs/en/ui-themes/lepton-x/angular/how-to-change-default-theme-option.md +++ b/docs/en/ui-themes/lepton-x/angular/how-to-change-default-theme-option.md @@ -1,26 +1,25 @@ # Configuring the Default Theme for LeptonX -The LeptonX theme offers multiple appearances to suit your application's visual style. You can easily configure the default theme for your application using the ThemeLeptonXModule provided by LeptonX. +The LeptonX theme offers multiple appearances to suit your application's visual style. You can easily configure the default theme for your application using the `provideThemeLeptonX` provided by LeptonX. ### Configuration Code -To set the default theme, you need to configure the ThemeLeptonXModule using the forRoot() function in your application's main module (often referred to as AppModule). Here's an example: +To set the default theme, you need to configure the `provideThemeLeptonX` using the `withThemeLeptonXOptions({...})` function in the main configuration of your application (often referred to as appConfig). Here's an example: + ```js -import { ThemeLeptonXModule } from 'leptonx'; // Import the LeptonX theme module +import { provideThemeLeptonX, withThemeLeptonXOptions } from '@volosoft/abp.ng.theme.lepton-x'; -@NgModule({ - // ... Other module configurations - imports: [ - // ... Other imported modules - ThemeLeptonXModule.forRoot({ - defaultTheme: 'light', // Set the default theme to 'light' - }), +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideThemeLeptonX( + withThemeLeptonXOptions({ + defaultTheme: 'light' + }) + ), ], - bootstrap: [AppComponent], -}) -export class AppModule {} +}; ``` - -In the example above, we've imported the ThemeLeptonXModule and configured it using the forRoot() function. By providing the defaultTheme parameter and setting its value to 'light', +In the example above, we've imported the `provideThemeLeptonX` and `withThemeLeptonXOptions`, then configured it using the option parameters. By providing the `defaultTheme` parameter and setting its value to 'light'. If you delete the defaultTheme parameter in the configuration object, the LeptonX theme will use the default value of "System" as the default theme appearance. diff --git a/docs/en/ui-themes/lepton-x/how-to-use-lepton-x-components-with-angular-custom-layout.md b/docs/en/ui-themes/lepton-x/how-to-use-lepton-x-components-with-angular-custom-layout.md index f68f3bd90fc..57cdcd0ec9b 100644 --- a/docs/en/ui-themes/lepton-x/how-to-use-lepton-x-components-with-angular-custom-layout.md +++ b/docs/en/ui-themes/lepton-x/how-to-use-lepton-x-components-with-angular-custom-layout.md @@ -5,25 +5,22 @@ First, The custom layout component should be created and implemented for the Ang Related content can be found in the [Component Replacement Document](../../framework/ui/angular/component-replacement.md#how-to-replace-a-layout) - -After creating a custom layout, these imports should be imported in the `app.module.ts` file because the modules contain definitions of the Lepton X components. +After creating a custom layout, these imports should be imported in the `app.config.ts` file because the modules contain definitions of the Lepton X components. ```javascript -// app.module.ts +// app.config.ts import { LpxSideMenuLayoutModule } from '@volosoft/ngx-lepton-x/layouts'; import { LpxResponsiveModule } from '@volo/ngx-lepton-x.core';// optional. Only, if you are using lpxResponsive directive - @NgModule({ - //... removed for clearity - imports: [ - //... removed for clearity - LpxSideMenuLayoutModule, - LpxResponsiveModule // <-- Optional - ] -}) -export class AppModule {} - +export const appConfig: ApplicationConfig = { + providers: [ + importProvidersFrom([ + LpxSideMenuLayoutModule, + LpxResponsiveModule // <-- Optional + ]) + ], +}; ``` Here is the simplified version of the `side-menu-layout.ts` file. Only the ABP Component Replacement code has been removed. diff --git a/docs/en/ui-themes/lepton/customizing-lepton-theme.md b/docs/en/ui-themes/lepton/customizing-lepton-theme.md index fb88742c5be..d626fd27695 100644 --- a/docs/en/ui-themes/lepton/customizing-lepton-theme.md +++ b/docs/en/ui-themes/lepton/customizing-lepton-theme.md @@ -12,19 +12,28 @@ You may want to change certain aspects of your website’s appearance with a cu ## Adding Custom Style -There is a `customStyle` boolean configuration in `ThemeLeptonModule`'s `forRoot` method. If this configuration is true, the style selection box is not included in the theme settings form and `ThemeLeptonModule` does not load its own styles. In this case, a custom style file must be added to the styles array in `angular.json` or must be imported by `style.scss`. +There is a `customStyle` boolean configuration in `provideThemeLepton(withLeptonOptions({...}))` method. If this configuration is true, the style selection box is not included in the theme settings form and `theme-lepton` does not load its own styles. In this case, a custom style file must be added to the styles array in `angular.json` or must be imported by `style.scss`. > Only angular project styles can be changed in this way. If the authorization flow is authorization code flow, MVC pages (login, profile, etc) are not affected by this change. Custom style implementation can be done with the following steps -Set `customStyle` property to `true` where is `ThemeLeptonModule` imported with `forRoot` method. +Set `customStyle` property to `true` where `provideThemeLepton(withLeptonOptions({...}))` method is called. ```javascript -// app.module.ts -ThemeLeptonModule.forRoot({ - customStyle: true -}) +// app.config.ts +import { provideThemeLepton, withOptions as withLeptonOptions } from '@volo/abp.ng.theme.lepton'; + +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideThemeLepton( + withLeptonOptions({ + customStyle: true + }) + ) + ], +}; ``` Import your style file to `src/style.scss` @@ -68,7 +77,7 @@ Or add your style file to the `styles` arrays which in `angular.json` file ## Inserting Custom Content To Lepton Menu -Lepton menu can take custom content both before and after the menu items displayed. In order to achieve this, pass a component as content through the parameters of `ThemeLeptonModule.forRoot` when you import the module in your root module, i.e. `AppModule`. Let's take a look at some examples. +Lepton menu can take custom content both before and after the menu items displayed. In order to achieve this, pass a component as content through the parameters of `provideThemeLepton(withLeptonOptions({...}))` when you import the provider in your root app configuration, i.e. `appConfig`. Let's take a look at some examples. ### Placing Custom Content Before & After Menu Items @@ -76,7 +85,10 @@ Lepton menu can take custom content both before and after the menu items display First step is to create a component which will serve as the custom content. ```js +// ... @Component({ + // ... + imports: [AsyncPipe], template: ` Support Issues @@ -88,27 +100,23 @@ First step is to create a component which will serve as the custom content. export class SupportLinkComponent { issueCount$ = of(26); // dummy count, replace this with an actual service } - -@NgModule({ - declarations: [SupportLinkComponent], - imports: [CommonModule], -}) -export class SupportLinkModule {} ``` -Now, pass this component as `contentAfterRoutes` option to `ThemeLeptonModule`. +Now, pass this component as `contentAfterRoutes` option to `provideThemeLepton(withLeptonOptions({...}))`. ```js -@NgModule({ - imports: [ - // other imports are removed for sake of brevity - SupportLinkModule, - ThemeLeptonModule.forRoot({ - contentAfterRoutes: [SupportLinkComponent], - }) +import { provideThemeLepton, withOptions as withLeptonOptions } from '@volo/abp.ng.theme.lepton'; + +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideThemeLepton( + withLeptonOptions({ + contentAfterRoutes: [SupportLinkComponent], + }) + ) ], -}) -export class AppModule {} +}; ``` If you start the dev server, you must see the inserted content as follows: @@ -124,24 +132,25 @@ Placing the content before menu items is straightforward: Just replace `contentA ### Placing a Search Input Before Menu Items -The Lepton package has a search component designed to work with the routes in the menu. You can simply import the module and pass the component as `contentBeforeRoutes` option to `ThemeLeptonModule`. +The Lepton package has a search component designed to work with the routes in the menu. You can simply import the provider and pass the component as `contentBeforeRoutes` option to `provideThemeLepton(withLeptonOptions({...}))`. ```js -import { MenuSearchComponent, MenuSearchModule } from '@volo/abp.ng.theme.lepton/extensions'; - -@NgModule({ - imports: [ - // other imports are removed for sake of brevity - - MenuSearchModule.forRoot({ +import { provideThemeLepton, withOptions as withLeptonOptions } from '@volo/abp.ng.theme.lepton'; +import { MenuSearchComponent, provideMenuSearch } from '@volo/abp.ng.theme.lepton/extensions'; + +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideThemeLepton( + withLeptonOptions({ + contentBeforeRoutes: [MenuSearchComponent], + }) + ), + provideMenuSearch({ limit: 3 // search result limit (default: Infinity) - }), - ThemeLeptonModule.forRoot({ - contentBeforeRoutes: [MenuSearchComponent], }) ], -}) -export class AppModule {} +}; ``` Here is how the search input works: diff --git a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts index 549702a1ad9..a5c22db1893 100644 --- a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts +++ b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts @@ -103,7 +103,7 @@ export class DynamicLayoutComponent implements OnInit { let message = `Layout ${layoutName} not found.`; if (layoutName === 'account') { message = - '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.'; + 'Account layout not found. Please check your configuration. If you are using LeptonX, please make sure you have added "provideAccountLayout()" to your app configuration.'; } console.warn(message); }