diff --git a/docs/en/solution-templates/application-module/index.md b/docs/en/solution-templates/application-module/index.md index 2b6de263fc..48013d2d90 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 95bfc8986f..5128a670b0 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 dd7a4e5cc7..3a04da8201 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 8a1b71fda7..ce67866815 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 a350de6848..e11232236e 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: