diff --git a/npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts b/npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts deleted file mode 100644 index 0d9f82ea25..0000000000 --- a/npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -const routes: Routes = [ - { - path: '', - 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()), - }, - { - path: 'tenant-management', - loadChildren: () => - import('@abp/ng.tenant-management').then(m => m.TenantManagementModule.forLazy()), - }, - { - path: 'setting-management', - loadChildren: () => - import('@abp/ng.setting-management').then(m => m.SettingManagementModule.forLazy()), - }, -]; - -@NgModule({ - imports: [RouterModule.forRoot(routes, {})], - exports: [RouterModule], -}) -export class AppRoutingModule {} diff --git a/npm/ng-packs/apps/dev-app/src/app/app.component.ts b/npm/ng-packs/apps/dev-app/src/app/app.component.ts index 1b0993cd2f..5220d57353 100644 --- a/npm/ng-packs/apps/dev-app/src/app/app.component.ts +++ b/npm/ng-packs/apps/dev-app/src/app/app.component.ts @@ -1,12 +1,14 @@ import { Component } from '@angular/core'; +import { InternetConnectionStatusComponent, LoaderBarComponent } from '@abp/ng.theme.shared'; +import { DynamicLayoutComponent } from '@abp/ng.core'; @Component({ - standalone: false, selector: 'app-root', template: ` `, + imports: [LoaderBarComponent, DynamicLayoutComponent, InternetConnectionStatusComponent], }) export class AppComponent {} diff --git a/npm/ng-packs/apps/dev-app/src/app/app.config.ts b/npm/ng-packs/apps/dev-app/src/app/app.config.ts new file mode 100644 index 0000000000..3075c477fc --- /dev/null +++ b/npm/ng-packs/apps/dev-app/src/app/app.config.ts @@ -0,0 +1,42 @@ +import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; +import { provideRouter } from '@angular/router'; + +import { appRoutes } from './app.routes'; +import { APP_ROUTE_PROVIDER } from './route.provider'; +import { provideAbpCore, withOptions } from '@abp/ng.core'; +import { environment } from '../environments/environment'; +import { registerLocale } from '@abp/ng.core/locale'; +import { provideAbpOAuth } from '@abp/ng.oauth'; +import { provideAbpThemeShared } from '@abp/ng.theme.shared'; +import { provideSettingManagementConfig } from '@abp/ng.setting-management/config'; +import { provideAccountConfig } from '@abp/ng.account/config'; +import { provideIdentityConfig } from '@abp/ng.identity/config'; +import { provideTenantManagementConfig } from '@abp/ng.tenant-management/config'; +import { provideFeatureManagementConfig } from '@abp/ng.feature-management'; +import { provideThemeBasicConfig } from '@abp/ng.theme.basic'; +import { provideAnimations } from '@angular/platform-browser/animations'; + +export const appConfig: ApplicationConfig = { + providers: [ + provideRouter(appRoutes), + APP_ROUTE_PROVIDER, + provideAbpCore( + withOptions({ + environment, + registerLocaleFn: registerLocale(), + sendNullsAsQueryParam: false, + skipGetAppConfiguration: false, + }), + ), + provideAbpOAuth(), + provideAbpThemeShared(), + provideSettingManagementConfig(), + provideAccountConfig(), + provideIdentityConfig(), + provideTenantManagementConfig(), + provideFeatureManagementConfig(), + provideZoneChangeDetection({ eventCoalescing: true }), + provideThemeBasicConfig(), + provideAnimations(), + ], +}; diff --git a/npm/ng-packs/apps/dev-app/src/app/app.module.ts b/npm/ng-packs/apps/dev-app/src/app/app.module.ts deleted file mode 100644 index 707f1f846f..0000000000 --- a/npm/ng-packs/apps/dev-app/src/app/app.module.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { CoreModule, provideAbpCore, withOptions } from '@abp/ng.core'; -import { registerLocale } from '@abp/ng.core/locale'; -import { - InternetConnectionStatusComponent, - ThemeSharedModule, - provideAbpThemeShared, -} from '@abp/ng.theme.shared'; -import { ThemeLeptonXModule } from '@abp/ng.theme.lepton-x'; -import { SideMenuLayoutModule } from '@abp/ng.theme.lepton-x/layouts'; -import { provideAbpOAuth } from '@abp/ng.oauth'; -import { provideSettingManagementConfig } from '@abp/ng.setting-management/config'; -import { provideAccountConfig } from '@abp/ng.account/config'; -import { provideIdentityConfig } from '@abp/ng.identity/config'; -import { provideTenantManagementConfig } from '@abp/ng.tenant-management/config'; -import { provideFeatureManagementConfig } from '@abp/ng.feature-management'; -import { AccountLayoutModule } from '@abp/ng.theme.lepton-x/account'; -import { environment } from '../environments/environment'; -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { APP_ROUTE_PROVIDER } from './route.provider'; - -@NgModule({ - imports: [ - BrowserModule, - BrowserAnimationsModule, - AppRoutingModule, - CoreModule, - ThemeSharedModule, - ThemeLeptonXModule.forRoot(), - SideMenuLayoutModule.forRoot(), - AccountLayoutModule.forRoot(), - InternetConnectionStatusComponent, - ], - providers: [ - APP_ROUTE_PROVIDER, - provideAbpCore( - withOptions({ - environment, - registerLocaleFn: registerLocale(), - sendNullsAsQueryParam: false, - skipGetAppConfiguration: false, - }), - ), - provideAbpOAuth(), - provideAbpThemeShared(), - provideSettingManagementConfig(), - provideAccountConfig(), - provideIdentityConfig(), - provideTenantManagementConfig(), - provideFeatureManagementConfig(), - ], - declarations: [AppComponent], - bootstrap: [AppComponent], -}) -export class AppModule {} diff --git a/npm/ng-packs/apps/dev-app/src/app/app.routes.ts b/npm/ng-packs/apps/dev-app/src/app/app.routes.ts new file mode 100644 index 0000000000..47462b7f8f --- /dev/null +++ b/npm/ng-packs/apps/dev-app/src/app/app.routes.ts @@ -0,0 +1,25 @@ +import { Routes } from '@angular/router'; + +export const appRoutes: Routes = [ + { + path: '', + pathMatch: 'full', + loadComponent: () => import('./home/home.component').then(m => m.HomeComponent), + }, + { + path: 'account', + loadChildren: () => import('@abp/ng.account').then(m => m.createRoutes()), + }, + { + path: 'identity', + loadChildren: () => import('@abp/ng.identity').then(m => m.createRoutes()), + }, + { + path: 'tenant-management', + loadChildren: () => import('@abp/ng.tenant-management').then(m => m.createRoutes()), + }, + { + path: 'setting-management', + loadChildren: () => import('@abp/ng.setting-management').then(m => m.createRoutes()), + }, +]; diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home-routing.module.ts b/npm/ng-packs/apps/dev-app/src/app/home/home-routing.module.ts deleted file mode 100644 index 7089990134..0000000000 --- a/npm/ng-packs/apps/dev-app/src/app/home/home-routing.module.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; -import { HomeComponent } from './home.component'; - -const routes: Routes = [{ path: '', component: HomeComponent }]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule], -}) -export class HomeRoutingModule {} diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts b/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts index ad791cabec..4a6287a7c0 100644 --- a/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts +++ b/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts @@ -1,10 +1,12 @@ -import { AuthService } from '@abp/ng.core'; +import { AuthService, LocalizationPipe } from '@abp/ng.core'; import { Component, inject } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { ButtonComponent, CardBodyComponent, CardComponent } from '@abp/ng.theme.shared'; @Component({ - standalone: false, selector: 'app-home', templateUrl: './home.component.html', + imports: [CommonModule, LocalizationPipe, CardComponent, CardBodyComponent, ButtonComponent], }) export class HomeComponent { protected readonly authService = inject(AuthService); diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home.module.ts b/npm/ng-packs/apps/dev-app/src/app/home/home.module.ts deleted file mode 100644 index 72d20ccc65..0000000000 --- a/npm/ng-packs/apps/dev-app/src/app/home/home.module.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { NgModule } from '@angular/core'; -import { SharedModule } from '../shared/shared.module'; -import { HomeRoutingModule } from './home-routing.module'; -import { HomeComponent } from './home.component'; - -@NgModule({ - declarations: [HomeComponent], - imports: [SharedModule, HomeRoutingModule], -}) -export class HomeModule {} diff --git a/npm/ng-packs/apps/dev-app/src/app/shared/shared.module.ts b/npm/ng-packs/apps/dev-app/src/app/shared/shared.module.ts deleted file mode 100644 index 964170499d..0000000000 --- a/npm/ng-packs/apps/dev-app/src/app/shared/shared.module.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { CoreModule } from '@abp/ng.core'; -import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'; -import { NgModule } from '@angular/core'; -import { ThemeSharedModule } from '@abp/ng.theme.shared'; -import { NgxValidateCoreModule } from '@ngx-validate/core'; - -@NgModule({ - declarations: [], - imports: [CoreModule, ThemeSharedModule, NgbDropdownModule, NgxValidateCoreModule], - exports: [CoreModule, ThemeSharedModule, NgbDropdownModule, NgxValidateCoreModule], - providers: [], -}) -export class SharedModule {} diff --git a/npm/ng-packs/apps/dev-app/src/main.ts b/npm/ng-packs/apps/dev-app/src/main.ts index fa4e0aef33..7180ec1a32 100644 --- a/npm/ng-packs/apps/dev-app/src/main.ts +++ b/npm/ng-packs/apps/dev-app/src/main.ts @@ -1,13 +1,5 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { appConfig } from './app/app.config'; +import { AppComponent } from './app/app.component'; -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch(err => console.error(err)); +bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err)); diff --git a/npm/ng-packs/packages/account/src/lib/account.module.ts b/npm/ng-packs/packages/account/src/lib/account.module.ts index 58df433232..31c629bb4d 100644 --- a/npm/ng-packs/packages/account/src/lib/account.module.ts +++ b/npm/ng-packs/packages/account/src/lib/account.module.ts @@ -1,49 +1,33 @@ -import { CoreModule, LazyModuleFactory } from '@abp/ng.core'; -import { ThemeSharedModule } from '@abp/ng.theme.shared'; +import { LazyModuleFactory } from '@abp/ng.core'; import { ModuleWithProviders, NgModule, NgModuleFactory } from '@angular/core'; -import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'; -import { NgxValidateCoreModule } from '@ngx-validate/core'; -import { AccountRoutingModule } from './account-routing.module'; -import { ChangePasswordComponent } from './components/change-password/change-password.component'; -import { LoginComponent } from './components/login/login.component'; -import { ManageProfileComponent } from './components/manage-profile/manage-profile.component'; -import { PersonalSettingsComponent } from './components/personal-settings/personal-settings.component'; -import { RegisterComponent } from './components/register/register.component'; import { AccountConfigOptions } from './models/config-options'; import { ACCOUNT_CONFIG_OPTIONS } from './tokens/config-options.token'; import { accountConfigOptionsFactory } from './utils/factory-utils'; import { AuthenticationFlowGuard } from './guards/authentication-flow.guard'; -import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component'; -import { ResetPasswordComponent } from './components/reset-password/reset-password.component'; import { RE_LOGIN_CONFIRMATION_TOKEN } from './tokens'; import { ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS } from './tokens/extensions.token'; import { AccountExtensionsGuard } from './guards/extensions.guard'; -import { PersonalSettingsHalfRowComponent } from './components/personal-settings/personal-settings-half-row.component'; -import { ExtensibleModule } from "@abp/ng.components/extensible"; - -const declarations = [ +import { + ForgotPasswordComponent, LoginComponent, - RegisterComponent, - ChangePasswordComponent, ManageProfileComponent, - PersonalSettingsComponent, - ForgotPasswordComponent, + RegisterComponent, ResetPasswordComponent, - PersonalSettingsHalfRowComponent, -]; +} from './components'; +import { AccountRoutingModule } from './account-routing.module'; @NgModule({ - declarations: [...declarations], + declarations: [], imports: [ - CoreModule, + LoginComponent, + RegisterComponent, + ForgotPasswordComponent, + ResetPasswordComponent, + ManageProfileComponent, AccountRoutingModule, - ThemeSharedModule, - NgbDropdownModule, - NgxValidateCoreModule, - ExtensibleModule, ], - exports: [...declarations], + exports: [], }) export class AccountModule { static forChild(options = {} as AccountConfigOptions): ModuleWithProviders { @@ -69,7 +53,9 @@ export class AccountModule { ], }; } - + /** + * @deprecated `AccountModule.forLazy()` is deprecated. You can use `createRoutes` **function** instead. + */ static forLazy(options = {} as AccountConfigOptions): NgModuleFactory { return new LazyModuleFactory(AccountModule.forChild(options)); } diff --git a/npm/ng-packs/packages/account/src/lib/account.routes.ts b/npm/ng-packs/packages/account/src/lib/account.routes.ts new file mode 100644 index 0000000000..5fb4236ee1 --- /dev/null +++ b/npm/ng-packs/packages/account/src/lib/account.routes.ts @@ -0,0 +1,119 @@ +import { Routes } from '@angular/router'; +import { + ForgotPasswordComponent, + LoginComponent, + RegisterComponent, + ResetPasswordComponent, + ManageProfileComponent, +} from './components'; +import { eAccountComponents } from './enums'; +import { authenticationFlowGuard } from './guards'; +import { accountExtensionsResolver } from './resolvers'; +import { + RE_LOGIN_CONFIRMATION_TOKEN, + ACCOUNT_CONFIG_OPTIONS, + ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS, +} from './tokens'; +import { AccountConfigOptions } from './models'; +import { accountConfigOptionsFactory } from './utils'; +import { + authGuard, + ReplaceableComponents, + ReplaceableRouteContainerComponent, + RouterOutletComponent, +} from '@abp/ng.core'; + +export function provideAccount(options: AccountConfigOptions = {}) { + return [ + { provide: ACCOUNT_CONFIG_OPTIONS, useValue: options }, + { + provide: 'ACCOUNT_OPTIONS', + useFactory: accountConfigOptionsFactory, + deps: [ACCOUNT_CONFIG_OPTIONS], + }, + { + provide: RE_LOGIN_CONFIRMATION_TOKEN, + useValue: options.isPersonalSettingsChangedConfirmationActive ?? true, + }, + { + provide: ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS, + useValue: options.editFormPropContributors, + }, + ]; +} + +const canActivate = [authenticationFlowGuard]; + +export const createRoutes = (options: AccountConfigOptions = {}): Routes => [ + { + path: '', + component: RouterOutletComponent, + providers: provideAccount(options), + children: [ + { path: '', pathMatch: 'full', redirectTo: 'login' }, + { + path: 'login', + component: ReplaceableRouteContainerComponent, + canActivate, + data: { + replaceableComponent: { + key: eAccountComponents.Login, + defaultComponent: LoginComponent, + } as ReplaceableComponents.RouteData, + }, + title: 'AbpAccount::Login', + }, + { + path: 'register', + component: ReplaceableRouteContainerComponent, + canActivate, + data: { + replaceableComponent: { + key: eAccountComponents.Register, + defaultComponent: RegisterComponent, + } as ReplaceableComponents.RouteData, + }, + title: 'AbpAccount::Register', + }, + { + path: 'forgot-password', + component: ReplaceableRouteContainerComponent, + canActivate, + + data: { + replaceableComponent: { + key: eAccountComponents.ForgotPassword, + defaultComponent: ForgotPasswordComponent, + } as ReplaceableComponents.RouteData, + }, + title: 'AbpAccount::ForgotPassword', + }, + { + path: 'reset-password', + component: ReplaceableRouteContainerComponent, + canActivate: [], + data: { + tenantBoxVisible: false, + replaceableComponent: { + key: eAccountComponents.ResetPassword, + defaultComponent: ResetPasswordComponent, + } as ReplaceableComponents.RouteData, + }, + title: 'AbpAccount::ResetPassword', + }, + { + path: 'manage', + component: ReplaceableRouteContainerComponent, + canActivate: [authGuard], + resolve: [accountExtensionsResolver], + data: { + replaceableComponent: { + key: eAccountComponents.ManageProfile, + defaultComponent: ManageProfileComponent, + } as ReplaceableComponents.RouteData, + }, + title: 'AbpAccount::MyAccount', + }, + ], + }, +]; diff --git a/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html b/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html index 074b6d53ac..a10e190664 100644 --- a/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html +++ b/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html @@ -1,4 +1,4 @@ -
+ @if (!hideCurrentPassword) {