feat: add support for standalone angular applications (#994)

* Updated uiSref directive to be an standalone directive

* Updated uiSrefActive directive to be a standalone directive

* Updated uiSrefStatus directive to be a standalone directive

* Updated uiView component to be a standalone component

* Imported directives instead of declaring them in UIRouterModule

* Created a root provider function for UIRouter.

* Fixed bug in uiView component not loading the CommonModule.

* Updated downstream sample app for the tests.

* Updated UISrefActive to use hostDirectives to implement the UISrefStatus directive.

* Added provideUiRouter to global exports.

* added a standalone v18 test project.

* Added standalone version for downstream projects.

* Updated package minor version

* Add documentation for provideUIRouter() function.

* Revert "Updated downstream sample app for the tests."

This reverts commit 2955b86.

* updated package version from 14.1.0 to 15.0.0. This change is introducing a potencial breaking change if projects use ui-view component as the bootstrap component.

Author: lindolo25

downstream_projects.json

@@ -3,6 +3,7 @@
   "projects": {
     "sample-app-angular": "https://github.com/ui-router/sample-app-angular.git",
     "angular18": "./test-angular-versions/v18",
+    "angular18standalone": "./test-angular-versions/v18-standalone",
     "typescript54": "./test-typescript-versions/typescript5.4"
   }
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@uirouter/angular",
   "description": "State-based routing for Angular",
-  "version": "14.0.0",
+  "version": "15.0.0",
   "scripts": {
     "clean": "shx rm -rf lib lib-esm _bundles _doc dist",
     "compile": "npm run clean && ngc",

src/directives/uiSref.ts

@@ -17,7 +17,10 @@ import { ReplaySubject, Subscription } from 'rxjs';
  * @internal
  * # blah blah blah
  */
-@Directive({ selector: 'a[uiSref]' })
+@Directive({
+  selector: 'a[uiSref]',
+  standalone: true
+})
 export class AnchorUISref {
   constructor(public _el: ElementRef, public _renderer: Renderer2) {}
 
@@ -78,6 +81,7 @@ export class AnchorUISref {
 @Directive({
   selector: '[uiSref]',
   exportAs: 'uiSref',
+  standalone: true
 })
 export class UISref implements OnChanges {
   /**

src/directives/uiSrefActive.ts

@@ -82,6 +82,11 @@ import { Subscription } from 'rxjs';
  */
 @Directive({
   selector: '[uiSrefActive],[uiSrefActiveEq]',
+  hostDirectives: [{
+    directive: UISrefStatus,
+    outputs: ['uiSrefStatus']
+  }],
+  standalone: true
 })
 export class UISrefActive {
   private _classes: string[] = [];

src/directives/uiSrefStatus.ts

@@ -180,8 +180,9 @@ function mergeSrefStatus(left: SrefStatus, right: SrefStatus): SrefStatus {
  * This API is subject to change.
  */
 @Directive({
-  selector: '[uiSrefStatus],[uiSrefActive],[uiSrefActiveEq]',
+  selector: '[uiSrefStatus]',
   exportAs: 'uiSrefStatus',
+  standalone: true
 })
 export class UISrefStatus {
   /** current statuses of the state/params the uiSref directive is linking to */

src/directives/uiView.ts

@@ -33,6 +33,7 @@ import {
 } from '@uirouter/core';
 import { Ng2ViewConfig } from '../statebuilders/views';
 import { MergeInjector } from '../mergeInjector';
+import { CommonModule } from '@angular/common';
 
 /** @hidden */
 let id = 0;
@@ -110,6 +111,8 @@ const ng2ComponentInputs = (factory: ComponentFactory<any>): InputMapping[] => {
 @Component({
   selector: 'ui-view, [ui-view]',
   exportAs: 'uiView',
+  standalone: true,
+  imports: [CommonModule],
   template: `
     <ng-template #componentTarget></ng-template>
     <ng-content *ngIf="!_componentRef"></ng-content>

src/index.ts

@@ -7,5 +7,6 @@ export * from './statebuilders/lazyLoad';
 export * from './statebuilders/views';
 export * from './uiRouterConfig';
 export * from './uiRouterNgModule';
+export * from './provideUiRouter';
 
 export * from '@uirouter/core';

src/provideUiRouter.ts

@@ -0,0 +1,37 @@
+import { EnvironmentProviders, makeEnvironmentProviders } from "@angular/core";
+import { locationStrategy, makeRootProviders, RootModule } from "./uiRouterNgModule";
+import { _UIROUTER_INSTANCE_PROVIDERS, _UIROUTER_SERVICE_PROVIDERS } from "./providers";
+
+/**
+ * Sets up providers necessary to enable UI-Router for the application. Intended as a replacement
+ * for [[UIRouterModule.forRoot]] in newer standalone based applications.
+ *
+ * Example:
+ * ```js
+ * const routerConfig = {
+ *   otherwise: '/home',
+ *   states: [homeState, aboutState]
+ * };
+ *
+ * const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideZoneChangeDetection({ eventCoalescing: true }),
+ *     provideUIRouter(routerConfig)
+ *   ]
+ * };
+ *
+ * bootstrapApplication(AppComponent, appConfig)
+ *  .catch((err) => console.error(err));
+ * ```
+ *
+ * @param config declarative UI-Router configuration
+ * @returns an `EnvironmentProviders` which provides the [[UIRouter]] singleton instance
+ */
+export function provideUIRouter(config: RootModule = {}): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    _UIROUTER_INSTANCE_PROVIDERS,
+    _UIROUTER_SERVICE_PROVIDERS,
+    locationStrategy(config.useHash),
+    ...makeRootProviders(config),
+  ]);
+}

src/uiRouterNgModule.ts

@@ -7,9 +7,8 @@ import {
   Injector,
   APP_INITIALIZER,
 } from '@angular/core';
-import { CommonModule, LocationStrategy, HashLocationStrategy, PathLocationStrategy } from '@angular/common';
+import { LocationStrategy, HashLocationStrategy, PathLocationStrategy } from '@angular/common';
 import { _UIROUTER_DIRECTIVES } from './directives/directives';
-import { UIView } from './directives/uiView';
 import { UrlRuleHandlerFn, TargetState, TargetStateDef, UIRouter, TransitionService } from '@uirouter/core';
 import { _UIROUTER_INSTANCE_PROVIDERS, _UIROUTER_SERVICE_PROVIDERS } from './providers';
 
@@ -71,8 +70,9 @@ export function locationStrategy(useHash) {
  * This enables UI-Router to automatically register the states with the [[StateRegistry]] at bootstrap (and during lazy load).
  */
 @NgModule({
-  imports: [CommonModule],
-  declarations: [_UIROUTER_DIRECTIVES],
+  imports: [
+    _UIROUTER_DIRECTIVES
+  ],
   exports: [_UIROUTER_DIRECTIVES],
 })
 export class UIRouterModule {

test-angular-versions/v18-standalone/README.md

@@ -0,0 +1,27 @@
+# V18
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.7.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.