Standalone applications support

[lindolo25]

Hi @wawyed, this is a proposal to implement support for standalone applications. The project v18-standalone under the test-angular-versions has an example of how it can be used.

Fixes #989

[lindolo25]

Hi @wawyed, I understand your time for this project is limited, I just will like to know if you have any feedback or update regarding this change. please let me know when you have time.

Kind regards

[wawyed]

I will try to make some time. Just wondering what's the benefit of this?

[lindolo25]

Hi @wayed, thanks for getting back to me! About this update, it is related to the new Standalone application feature released by the Angular framework a few versions ago, but that will become default for v19. This change in the Angular framework is intended to reduce the amount of boilerplate code needed for creating applications, basically by removing the need for NgModules.

The change I'm proposing to uirouter/angular has 2 parts:

1. Changing all projects components and directives to be standalone. This does not change anything about the implementation for the component/directive, it just changes the way they are declared. So instead of needing to declare the component in an NgModule, components can be directly imported to other components or NgModules. It does not affect projects currently using UIRouterModule as this module will continue to export all components/directive.

@Component({
    standalone: true,
    imports: [UIView],
    selector: 'my-component',
    template: `
        <h1>My Title</h1>
        <div ui-view></div>
    `	
})
export class MyComponent {}

2. The new providerUIRouter(). This functionality is a direct replacement for the forRoot() static method in UIRouterModule. And will work for the new application bootstrapping API.

import { bootstrapApplication } from '@angular/platform-browser';
import { provideUIRouter } from '@uirouter/angular';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
    providers: [
        provideUIRouter({
             otherwise: '/home',
             states: [homeState, aboutState]
        })
    ]
})
    .catch((err) => console.error(err));

As you can see all this changes from the Angular team are intended to make the use of NgModules optional and at the same time reducing boilerplate code in applications. here is the official blob post where Angular Team explains how this feature will become default in v19 https://blog.angular.dev/the-future-is-standalone-475d7edbc706

I hope this explanation helps, If you have any follow up question please let me know.

Thanks for your time!