account component issue after ABP upgrade to v4.3.1 #1456

7 Answer(s)

• 

  0

  Repunjay created 2 years ago

  Hi ABP team - Can you please advise on this issue?

  Save Cancel
• 

  0

  bunyamin created 2 years ago

  Hello,

  Could you try to import eAccountComponents from @volo/abp.ng.account/public? It provides the following enum values which you can use to replace components.

  eAccountComponents {
      AuthWrapper,
      Login,
      Register,
      EmailConfirmation,
      ForgotPassword,
      ResetPassword,
      ManageProfile,
      TenantBox,
      ChangePassword,
      PersonalSettings,
      Logo,
      MySecurityLogs,
      ProfilePicture,
      LinkLogged
  }
  

  Save Cancel
• 

  0

  Repunjay created 2 years ago

  Thanks, but the problem is we don’t have separate components as in the earlier version of code (3.0.4) we replaced the whole page and now with upgraded code (4.3.1) if we do so, it will be a whole lot of effort. We want support for the whole page change as we are not currently planning to componentize the login page

  Save Cancel
• 

  0

  bunyamin created 2 years ago

  The following components have their own routes and act as a full page.

  Login => /account/login Register => /account/register ForgotPassword => /account/forgot-password ResetPassword => /account/reset-password EmailConfirmation => /account/email-confirmation LinkLogged => /account/link-logged SendSecurityCode => /account/send-security-code

  You can also replace AuthWrapper which acts as a layout and contains the components above. Does this not solve your need?

  Save Cancel
• 

  0

  Repunjay created 2 years ago

  We tried the suggested approach but still facing difficulties. Is it possible for you to share a working example of custom page which includes all the components? We can refer it and use it for our use case.

  Save Cancel
• 

  0

  bunyamin created 2 years ago

  Hello again,

  Let's create our own AuthModule and AuthComponent.

  @Component({
    selector: 'app-auth',
    template: '<p>auth works!</p>'
  })
  export class AuthComponent {}
  
  @NgModule({
    declarations: [AuthComponent],
    imports: [CommonModule],
  })
  export class AuthModule {}
  

  Since we will be replacing many components within our custom AuthModule, let's do it at module initialization.

  Simply add a static forRoot method to AuthModule which will replace account components.

  import { NgModule, ModuleWithProviders, APP_INITIALIZER } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { RouterModule } from '@angular/router';
  import { ReplaceableComponentsService } from '@abp/ng.core';
  import { eAccountComponents } from '@volo/abp.ng.account/public';
  import { AuthComponent } from './auth.component';
  
  /**
   * Here I've written a factory function which will replace the components from AccountModule
   */
  function componentReplacer(replaceableComponents: ReplaceableComponentsService) {
    return () => {
      replaceableComponents.add({
        key: eAccountComponents.AuthWrapper,
        component: AuthComponent,
      });
    };
  }
  
  @NgModule({
    declarations: [AuthComponent],
    imports: [CommonModule, RouterModule],
  })
  export class AuthModule {
    static forRoot(): ModuleWithProviders<AuthModule> {
      return {
        ngModule: AuthModule,
        providers: [
          {
            provide: APP_INITIALIZER,
            useFactory: componentReplacer,
            multi: true,
            deps: [ReplaceableComponentsService],
          },
        ],
      };
    }
  }
  

  And change the HTML of AuthComponent to the following:

  <router-outlet></router-outlet>

  Import AuthModule.forRoot in AppModule

  Then you'll get the following page when you navigate to /account/login

  

  Let's replace LoginComponent as well

  First, create a component within AuthModule and call it whatever you'd like it to be, and then replace eAccountComponents.Login within the factory we've just written as follows:

  function componentReplacer(replaceableComponents: ReplaceableComponentsService) {
    return () => {
      replaceableComponents.add({
        key: eAccountComponents.AuthWrapper,
        component: AuthComponent,
      });
      replaceableComponents.add({
        key: eAccountComponents.Login,
        component: LoginComponent,
      });
    };
  }
  

  And then you'll get the following page

  

  Here is the project structure,

  

  You can keep replacing every single one of the components available.

  Save Cancel
• 

  0

  ServiceBot created 2 years ago

  Support Team Automatic process manager

  This question has been automatically marked as stale because it has not had recent activity.

  Save Cancel