Chore: Angular v19 support

[lindolo25]

Hi @wawyed!

This PR implements support for angular v19. There are a few changes that I want to explain:

• For v19 angular team is changing the default value for the standalone property of Component/Directive decorators.there are no changes to the project source as components are currently standalone but test needed some updates. Updated test to use standalone: false for the components it creates.
• Added test project for typescript 5.6
• Added test project for v19 non-standalone
• Added test project for v19 standalone
• Removed all older tests for both folders test-angular-version and test-typescript-versions.

Here is the replated change for the sample-app-angular project ui-router/sample-app-angular#793

If you have any question please let me know!

Thanks in advance and happy new year !!!

[lindolo25]

Hi @wawyed, thanks for your time and the suggestions! The changes you requested are ready.

[jpike88]

great works guys. angular team should just ditch their router and use uirouter instead.

[hheexx]

@uirouter/angular-hybrid should also be updated?

[lindolo25]

Hi @hheexx, I only managed to configured a hybrid application up to v9 of angular. At the time Angular's team was introducing Ivy and AOT compilation. I unsuccessfully tried to update that application to v10, instead I focus my attention on finishing migrating the remaining angularjs code. I encourage you to do the same and focus on finishing migrating, regardless, I'm very curious about your case and if you can build an example of an application with hybrid-support using v18, I can look into it and build an update for that package.

[wawyed]

Hmm we have https://github.com/ui-router/sample-app-angular-hybrid to test that hybrid works.

[hheexx]

@lindolo25 We have quite big app. We are in process of migrating but I think we need few years more.
Currently we are on Angular 19 and everything is working.

We have just one bug. When opening ng2 routes in new tab or c/p-ing them in address bar router redirects to home page.
It may or may not be bug on your side.

[hheexx]

btw I see standalone support was added.
Does it mean uirouter can now load standalone components in router?
we use loadChildren for it or something else?

[lindolo25]

@hheexx Are any of those routes lazy-loading their modules? My guess is yes for a large application. I will try discarding lazy-load first. If you have any route, not lazy-loaded, try to replicate the behavior.

[lindolo25]

@hheexx, I'm building a specific property for Ng2StateDeclaration to load standalone components. something like:

const route: Ng2StateDeclaration = {
    name: "about",
    url: "/about",
    loadComponent: () => import("./about.component.ts").then(file => file.AboutComponent)
}

checkout PR #995, still a draft, but I hope to have time to finish it this month.

[hheexx]

Here is debug log when I open new tab.

It starts loading bizcontacts state but then for some reason starts navigating to home.
If I comment out $urlRouterProvider.otherwise('/home'); it stays on bizcontact route.

You are correct.
If I disable lazy loading by substituting loadChildren with component it works.

[lindolo25]

Hi @hheexx,

I had a similar issue to that one myself, it was a few years ago and I never fully investigated it. My scenario was; I had a future state, lets call it parent.**, with many children most of them eager, but some of them future as well, lets call it child.**. The future child state had also multiple children. If I continued the normal navigation pattern of the application everything worked fine, but if I refreshed the page while in one of child.** children routes, the navigation will fail and some rule to catch errors will be triggered. it will only happen with states under child.**, if I repeat the same with an eager state under parent.** it will work fine.

I solved this problem by following the explanation in this comment: #384 (comment)

At the time I had this issue I was also working with @uirouter/angular-hybrid, so it may be possible that it is a bug with this package. I tried yesterday to replicate my scenario using @uirouter/angular and it worked fine, here is the example https://stackblitz.com/edit/stackblitz-starters-5cfjp4ij. I'll try to put together and example for @uirouter/angular-hybrid and try to replicate the issue.

I hope this helps!

[hheexx]

Thanks a lot.
I will wait for standalone implementation, maybe you fix it by accident :)
If not I will switch to eager loading.