angular icon indicating copy to clipboard operation
angular copied to clipboard

Support for Angular v21 and a bug fix!

Open lindolo25 opened this issue 1 month ago • 0 comments

Hi @wawyed! This PR implements support for v21 and fixes a recent bug I notice, specific for zoneless apps. I decided to add these changes together to take the least of your time. If instead you will like for me to treat it as 2 separate changes, I'll be happy to split the changes and create merge request individually.

More about the changes:

  • Angular v21 support.
  • Added downstream test projects for zoneless applications.
  • Changes to UIView that introcudes @if as replacement for *ngIf directive (currently deprecated) and signals specifically for the _componentRef property of the class.
  • Added test suites that for the specific scenario of the bug. It involved add test environments configured to use zoneless.

About the bug: It is only reproducable for applications configure with zoneless change detection or for UIView's instances hosted by a component configured with change detection strategy onPush. It involves the projected content of UIViews. here is an example of the components configuration.

@Component({
  selector: 'app-root',
  imports: [UIView, AnchorUISref, UISref],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <h1>Hello from {{ name }}!</h1>
    <ui-view>
      <a uiSref="root.child">follow this link to open the child state</a>
    </ui-view>
  `,
})
export class AppComponent {
  name = 'UIView Zoneless bug demo';
}

@Component({
  selector: 'app-child',
  imports: [UISref, AnchorUISref],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <a uiSref="^">Use this link to go back</a>
    <p>Use the browser's back button to reproduce the bug.</p>
  `,
})
export class AppChildComponent {}

export const routes: Ng2StateDeclaration[] = [
  {
    name: 'root',
    url: '/home',
    component: AppComponent,
  },
  {
    name: 'root.child',
    url: '/child',
    component: AppChildComponent,
  },
];

bootstrapApplication(UIView, {
  providers: [
    provideZonelessChangeDetection(),
    provideUIRouter({
      states: routes,
      otherwise: '/home',
    }),
  ],
});

Steps to reproduce:

  1. use the link in the /home page to navigate to the child state. the AppChildComponent will replace the content for UIView.
  2. use the link in the /child page to go back to /home. All works fine so far, the projected content for the UIView is restored.
  3. use the browser's back button to go back. The projected content is not restored.

Here are a few links to working examples of this bug:

  • zoneless: https://stackblitz.com/edit/stackblitz-starters-uonxgsrb
  • change detection onPush: https://stackblitz.com/edit/stackblitz-starters-czh5sqlm

Another topic:

The merge request for sample-app-angular that added support for v20 was never merge. I'll be adding a new PR with support for v21. https://github.com/ui-router/sample-app-angular/pull/795

Fixes #1010

lindolo25 avatar Dec 12 '25 00:12 lindolo25