Support for Angular v21 and a bug fix!
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
@ifas replacement for*ngIfdirective (currently deprecated) and signals specifically for the_componentRefproperty 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:
- use the link in the /home page to navigate to the child state. the AppChildComponent will replace the content for UIView.
- 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.
- 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