Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Standalone applications support #994

Open
wants to merge 14 commits into
base: master
Choose a base branch
from

Conversation

lindolo25
Copy link
Contributor

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
Copy link
Contributor Author

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
Copy link
Member

wawyed commented Oct 26, 2024

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

@lindolo25
Copy link
Contributor Author

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 {}
  1. 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!

@@ -1,8 +1,9 @@
{
"packageDir": "./dist",
"projects": {
"sample-app-angular": "https://github.com/ui-router/sample-app-angular.git",
"sample-app-angular": "https://github.com/lindolo25/sample-app-angular.git",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the change here? Can it be put back as before?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @wawyed! Yes I added that change for test to run. There is a related update for sample-angular-app needed before this change can be reverted. ui-router/sample-app-angular#790

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Example for angular 17 standalone
2 participants