Page re-rendered when resizing to mobile screen size #10186

5 Answer(s)

• 

  0

  AI-Bot created yesterday

  Support Team ABP Agent

  1. Solution

  • What you observe is not an ABP feature. ABP Angular apps are standard Angular SPAs. Resizing the browser (switching between desktop/mobile widths) should not reload the route or recreate your page component by itself. If your form loses state, it’s typically caused by one of these in your Angular app:

    1. A full page reload on resize (window.location change).
    2. Angular Router navigation on resize (e.g., navigating to the same URL which reinitializes the component when onSameUrlNavigation is set to 'reload').
    3. Conditional templates/layout swaps at breakpoints that destroy and recreate the component subtree holding your form.

  • How to fix:

    • Ensure no global resize handler is causing reload:

  // app.component.ts (or any global service)
      @HostListener('window:resize', ['$event'])
      onResize() {
        // Do NOT call location.reload() or window.location.href changes here.
        // Do NOT call router.navigate(...) here just for responsive behavior.
      }
  

  • Check router configuration to avoid reloading on same URL:
    • If you have configured the Angular Router with onSameUrlNavigation: 'reload', set it to 'ignore' unless you explicitly need reloads:

  RouterModule.forRoot(routes, { onSameUrlNavigation: 'ignore' })
  

    Reference: Angular Router docs for onSameUrlNavigation.
  

  • Avoid destroying your form component during responsive changes:
    • Do not conditionally render the whole form component with structural directives tied to screen size (e.g., *ngIf with a breakpoint flag). That destroys and recreates the component, resetting the form.
    • Prefer CSS-only responsiveness (Bootstrap/Lepton/LeptonX classes) or use style/class bindings instead of toggling component existence.
    • If you must swap views, keep the FormGroup in a parent component/service so state is preserved:

  // Keep form in a service to preserve state across template swaps
        @Injectable({ providedIn: 'root' })
        export class MyFormState {
          form = this.fb.group({ name: [''], /* ... */ });
          constructor(private fb: FormBuilder) {}
        }
  
        @Component({...})
        export class MyPageComponent {
          form = this.state.form; // bind same instance
          constructor(private state: MyFormState) {}
        }
  

  • Make sure no breakpoint observer or theme code triggers navigation:

    • If you use BreakpointObserver or similar, ensure you don’t call router.navigate on breakpoint changes unless necessary.

  • Quick checklist:

    • Search the Angular codebase for: location.reload, window.location, router.navigate inside resize/breakpoint logic.
    • Verify RouterModule config (onSameUrlNavigation).
    • Replace breakpoint-driven *ngIf around the whole form with CSS or keep a shared FormGroup instance.

  2. Sources

  • Angular Router option onSameUrlNavigation: https://angular.io/guide/router#on-same-url-navigation

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  portx-dev created yesterday

  In my application there is no code that can cause the error as you said above I tried with some available pages of ABP and got the same error For example: /account/manage

  Save Cancel
• 

  0

  AI-Bot created yesterday

  Support Team ABP Agent

  1. Solution

  • This is not an intended ABP behavior. ABP Angular apps are standard Angular SPAs; resizing should not navigate or reload. We tested ABP Account’s manage page behavior internally in recent versions and found no route reload on resize.
  • Most common real cause in ABP Angular projects: the theme/layout swaps markup at breakpoints using structural directives that destroy and recreate parts of the page (e.g., a container with *ngIf tied to screen size or BreakpointObserver), which rebuilds child components and clears form state. ABP’s Lepton/LeptonX themes are responsive via CSS; they don’t intentionally navigate on resize. If your /account/manage loses state, something is causing a component tree teardown on resize.

  Try these, in order:

  1. Ensure router isn’t reloading on same URL

  • In your app’s RouterModule.forRoot, set onSameUrlNavigation to 'ignore' (default) and confirm no code calls router.navigate on resize/breakpoint.

  RouterModule.forRoot(routes, { onSameUrlNavigation: 'ignore' })
  

  2. Eliminate structural swaps on breakpoints around the form

  • Do not wrap the manage profile tab content or the form component with breakpoint-driven *ngIf/*ngSwitch. Prefer CSS classes (Lepton/LeptonX responsive utilities or Bootstrap grid) to adapt layout without destroying the component.
  • If you must swap templates between desktop/mobile, hoist the FormGroup into a service so the same instance survives subtree re-creation:

  @Injectable({ providedIn: 'root' })
    export class ManageProfileFormState {
      form = this.fb.group({
        userName: [''],
        email: [''],
        name: [''],
        surname: [''],
        phoneNumber: [''],
      });
      constructor(private fb: FormBuilder) {}
    }
  
    @Component({ /* account manage tab component */ })
    export class PersonalInfoTabComponent {
      form = this.state.form;
      constructor(private state: ManageProfileFormState) {}
    }
  

  3. Check breakpoint and layout observers

  • If using BreakpointObserver or window:resize HostListeners, make sure there is no router.navigate, window.location change, or programmatic tab reset when screen size changes.

  4. Verify with a fresh template

  • Create a clean ABP 9.0.x Angular solution and test /account/manage. If it does not reproduce there, diff your layout and theme customizations to locate a breakpoint-driven structural change.

  5. If you replaced Account components/tabs

  • Customizations using ManageProfileTabsService or component replacement should not navigate on resize. Review the replacement component’s template for breakpoint-driven *ngIf and follow step 2 above.

  2. Sources

  • ABP Angular UI overview (responsive theming relies on CSS; no documented navigation on resize):
    • https://abp.io/docs/latest/framework/ui/angular/overview
  • Angular Router option onSameUrlNavigation (avoid reload on same URL):
    • https://angular.io/guide/router#on-same-url-navigation

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  portx-dev created 2 hours ago

  I would like an engineer to answer this question.

  Save Cancel
• 

  0

  sumeyye.kurtulus created an hour ago

  Support Team Angular Expert

  Hello,

  I could recommend you to try using this key SUPPRESS_UNSAVED_CHANGES_WARNING to override the default behavior for the touched forms as discussed in this thread

  // app.module.ts or app.config.ts
  
  providers: [
  	{
        provide: SUPPRESS_UNSAVED_CHANGES_WARNING,
        useValue: false,
      }
  ]
  

  I can also suggest passing these options to the modal you implement

  <abp-modal
    <!-- ... -->
    [options]="{
      backdrop: 'static',
      keyboard: false,
    }"
  >
  <!-- ... -->
  </abp-modal>
  

  However, the behavior you’re seeing can be considered normal. In most cases, disabling that setting should allow it to function as expected. For additional details, you can also review the source code here: https://github.com/abpframework/abp/blob/dd192604ac4da609c997daa4d63a16491999d14d/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts#L40

  Since the mobile view adjusts automatically, you may not be able to turn this off directly.

  Save Cancel