From c2120c172645dc27329b3a8bc9a9773a0767c9ad Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Mon, 15 Mar 2021 18:20:26 +0300 Subject: [PATCH 1/4] add Angular UI v4.3 Migration Guide --- docs/en/Migration-Guides/Abp-4_3-Angular.md | 90 +++++++++++++++++++++ docs/en/Migration-Guides/Abp-4_3.md | 5 ++ docs/en/Migration-Guides/Index.md | 1 + 3 files changed, 96 insertions(+) create mode 100644 docs/en/Migration-Guides/Abp-4_3-Angular.md create mode 100644 docs/en/Migration-Guides/Abp-4_3.md 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..1c67d7dc26 --- /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 + +Prior to V4.3, the manage your profile link in the current user dropdown on the top bar redirects to MVC's manage profile page. As of v4.3, the URL will be changed as `/account/manage-profile` to redirect users to the manage profile page in the account module of Angular UI instead of MVC. 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) From 7b4d7190f79273f715711dfc86cca7f862486f77 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Mon, 15 Mar 2021 18:20:58 +0300 Subject: [PATCH 2/4] add @abp/ng.account to app template --- templates/app/angular/package.json | 1 + templates/app/angular/src/app/app-routing.module.ts | 4 ++++ templates/app/angular/src/app/app.module.ts | 2 ++ 3 files changed, 7 insertions(+) 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(), From 1d9e6f20ba7d2e2d5ff51f350bb0d52b92758cb8 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Mon, 15 Mar 2021 18:21:06 +0300 Subject: [PATCH 3/4] add @abp/ng.account to module template --- templates/module/angular/package.json | 1 + .../angular/projects/dev-app/src/app/app-routing.module.ts | 4 ++++ .../module/angular/projects/dev-app/src/app/app.module.ts | 6 ++++-- 3 files changed, 9 insertions(+), 2 deletions(-) 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], From 567ba6ec1947f12ce17d52148fc80586e905f75e Mon Sep 17 00:00:00 2001 From: Arman Ozak Date: Tue, 16 Mar 2021 09:18:54 +0300 Subject: [PATCH 4/4] rephrase manage profile page paragraph --- docs/en/Migration-Guides/Abp-4_3-Angular.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/Migration-Guides/Abp-4_3-Angular.md b/docs/en/Migration-Guides/Abp-4_3-Angular.md index 1c67d7dc26..0b4a90fc72 100644 --- a/docs/en/Migration-Guides/Abp-4_3-Angular.md +++ b/docs/en/Migration-Guides/Abp-4_3-Angular.md @@ -4,7 +4,7 @@ ### Manage Profile Page -Prior to V4.3, the manage your profile link in the current user dropdown on the top bar redirects to MVC's manage profile page. As of v4.3, the URL will be changed as `/account/manage-profile` to redirect users to the manage profile page in the account module of Angular UI instead of MVC. So you have to install and implement the account module to your Angular project when you update the ABP to v4.3. +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