Browse Source

update: small keywords about standalone migration for solution templates

pull/23285/head
sumeyye 1 year ago
parent
commit
5e8c823687
  1. 38
      docs/en/solution-templates/application-module/index.md
  2. BIN
      docs/en/solution-templates/layered-web-application/images/angular-folder-structure.png
  3. BIN
      docs/en/solution-templates/layered-web-application/images/angular-template-structure-diagram.png
  4. 26
      docs/en/solution-templates/layered-web-application/web-applications.md
  5. 9
      docs/en/solution-templates/microservice/localization-system.md

38
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

BIN
docs/en/solution-templates/layered-web-application/images/angular-folder-structure.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 79 KiB

After

Width:  |  Height:  |  Size: 156 KiB

BIN
docs/en/solution-templates/layered-web-application/images/angular-template-structure-diagram.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 136 KiB

26
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

9
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:

Loading…
Cancel
Save