diff --git a/docs/en/Migration-Guides/Abp-4_3-Angular.md b/docs/en/Migration-Guides/Abp-4_3-Angular.md new file mode 100644 index 0000000000..0b4a90fc72 --- /dev/null +++ b/docs/en/Migration-Guides/Abp-4_3-Angular.md @@ -0,0 +1,90 @@ +# Angular UI v4.3 Migration Guide + +## Breaking Changes + +### Manage Profile Page + +Before v4.3, the "Manage Your Profile" link in the current user dropdown on the top bar redirected the user to MVC's profile management page. As of v4.3, the same link will land on a page in the Angular UI account module instead. So you have to install and implement the account module to your Angular project when you update the ABP to v4.3. + +#### Account Module Implementation + +Install the `@abp/ng.account` NPM package by running the below command: + +```bash +npm install @abp/ng.account@next +``` + +> Make sure v4.3-rc or higher version is installed. + +Open the `app.module.ts` and add `AccountConfigModule.forRoot()` to the imports array as shown below: + +```js +// app.module.ts + +import { AccountConfigModule } from '@abp/ng.account/config'; +//... + +@NgModule({ + imports: [ + //... + AccountConfigModule.forRoot() + ], + //... +}) +export class AppModule {} +``` + +Open the `app-routing.module.ts` and add the `account` route to `routes` array as follows: + +```js +// app-routing.module.ts +const routes: Routes = [ + //... + { + path: 'account', + loadChildren: () => import('@abp/ng.account').then(m => m.AccountModule.forLazy()), + }, + //... +export class AppRoutingModule {} +``` + +#### Account Module Implementation for Commercial Templates + +The pro startup template comes with `@volo/abp.ng.account` package. You should update the package version to v4.3-rc or higher version. The package can be updated by running the following command: + +```bash +npm install @volo/abp.ng.account@next +``` +> Make sure v4.3-rc or higher version is installed. + +`AccountConfigModule` is already imported to `app.module.ts` in the startup template. So no need to import the module to the `AppModule`. If you removed the `AccountConfigModule` from the `AppModule`, you can import it as shown below: + +```js +// app.module.ts + +import { AccountConfigModule } from '@volo/abp.ng.account/config'; +//... + +@NgModule({ + imports: [ + //... + AccountConfigModule.forRoot() + ], + //... +}) +export class AppModule {} +``` + +Open the `app-routing.module.ts` and add the `account` route to `routes` array as follows: + +```js +// app-routing.module.ts +const routes: Routes = [ + //... + { + path: 'account', + loadChildren: () => import('@volo/abp.ng.account').then(m => m.AccountPublicModule.forLazy()), + }, + //... +export class AppRoutingModule {} +``` \ No newline at end of file diff --git a/docs/en/Migration-Guides/Abp-4_3.md b/docs/en/Migration-Guides/Abp-4_3.md new file mode 100644 index 0000000000..491143b0b0 --- /dev/null +++ b/docs/en/Migration-Guides/Abp-4_3.md @@ -0,0 +1,5 @@ +# ABP v4.3 Migration Guide + +## Angular UI + +See the [Angular UI Migration Guide](Abp-4_3-Angular.md). \ No newline at end of file diff --git a/docs/en/Migration-Guides/Index.md b/docs/en/Migration-Guides/Index.md index 26fe825f50..c7bee5a82a 100644 --- a/docs/en/Migration-Guides/Index.md +++ b/docs/en/Migration-Guides/Index.md @@ -1,5 +1,6 @@ # ABP Framework Migration Guides +* [4.2 to 4.3](Abp-4_3.md) * [4.x to 4.2](Abp-4_2.md) * [3.3.x to 4.0](Abp-4_0.md) * [2.9.x to 3.0](../UI/Angular/Migration-Guide-v3.md) diff --git a/templates/app/angular/package.json b/templates/app/angular/package.json index 70e09e2541..b3d96a7af3 100644 --- a/templates/app/angular/package.json +++ b/templates/app/angular/package.json @@ -12,6 +12,7 @@ }, "private": true, "dependencies": { + "@abp/ng.account": "~4.2.2", "@abp/ng.components": "~4.2.2", "@abp/ng.core": "~4.2.2", "@abp/ng.identity": "~4.2.2", diff --git a/templates/app/angular/src/app/app-routing.module.ts b/templates/app/angular/src/app/app-routing.module.ts index 570972c3fc..178c182324 100644 --- a/templates/app/angular/src/app/app-routing.module.ts +++ b/templates/app/angular/src/app/app-routing.module.ts @@ -7,6 +7,10 @@ const routes: Routes = [ pathMatch: 'full', loadChildren: () => import('./home/home.module').then(m => m.HomeModule), }, + { + path: 'account', + loadChildren: () => import('@abp/ng.account').then(m => m.AccountModule.forLazy()), + }, { path: 'identity', loadChildren: () => import('@abp/ng.identity').then(m => m.IdentityModule.forLazy()), diff --git a/templates/app/angular/src/app/app.module.ts b/templates/app/angular/src/app/app.module.ts index 8bd4876ffe..65ef51aea3 100644 --- a/templates/app/angular/src/app/app.module.ts +++ b/templates/app/angular/src/app/app.module.ts @@ -1,3 +1,4 @@ +import { AccountConfigModule } from '@abp/ng.account/config'; import { CoreModule } from '@abp/ng.core'; import { registerLocale } from '@abp/ng.core/locale'; import { IdentityConfigModule } from '@abp/ng.identity/config'; @@ -24,6 +25,7 @@ import { APP_ROUTE_PROVIDER } from './route.provider'; registerLocaleFn: registerLocale(), }), ThemeSharedModule.forRoot(), + AccountConfigModule.forRoot(), IdentityConfigModule.forRoot(), TenantManagementConfigModule.forRoot(), SettingManagementConfigModule.forRoot(), diff --git a/templates/module/angular/package.json b/templates/module/angular/package.json index a322e23558..6fd654ca94 100644 --- a/templates/module/angular/package.json +++ b/templates/module/angular/package.json @@ -15,6 +15,7 @@ }, "private": true, "dependencies": { + "@abp/ng.account": "~4.2.2", "@abp/ng.components": "~4.2.2", "@abp/ng.core": "~4.2.2", "@abp/ng.identity": "~4.2.2", diff --git a/templates/module/angular/projects/dev-app/src/app/app-routing.module.ts b/templates/module/angular/projects/dev-app/src/app/app-routing.module.ts index 9592b27d26..982cf8228b 100644 --- a/templates/module/angular/projects/dev-app/src/app/app-routing.module.ts +++ b/templates/module/angular/projects/dev-app/src/app/app-routing.module.ts @@ -7,6 +7,10 @@ const routes: Routes = [ pathMatch: 'full', loadChildren: () => import('./home/home.module').then(m => m.HomeModule), }, + { + path: 'account', + loadChildren: () => import('@abp/ng.account').then(m => m.AccountModule.forLazy()), + }, { path: 'identity', loadChildren: () => import('@abp/ng.identity').then(m => m.IdentityModule.forLazy()), diff --git a/templates/module/angular/projects/dev-app/src/app/app.module.ts b/templates/module/angular/projects/dev-app/src/app/app.module.ts index fe819f61ff..388f200daf 100644 --- a/templates/module/angular/projects/dev-app/src/app/app.module.ts +++ b/templates/module/angular/projects/dev-app/src/app/app.module.ts @@ -1,3 +1,4 @@ +import { AccountConfigModule } from '@abp/ng.account/config'; import { CoreModule } from '@abp/ng.core'; import { registerLocale } from '@abp/ng.core/locale'; import { IdentityConfigModule } from '@abp/ng.identity/config'; @@ -27,12 +28,13 @@ import { ThemeBasicModule } from '@abp/ng.theme.basic'; skipGetAppConfiguration: false, }), ThemeSharedModule.forRoot(), + AccountConfigModule.forRoot(), IdentityConfigModule.forRoot(), - MyProjectNameConfigModule.forRoot(), TenantManagementConfigModule.forRoot(), SettingManagementConfigModule.forRoot(), - NgxsModule.forRoot(), + MyProjectNameConfigModule.forRoot(), ThemeBasicModule.forRoot(), + NgxsModule.forRoot(), ], providers: [APP_ROUTE_PROVIDER], declarations: [AppComponent],