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.
ui-router · Nov 1, 2024 · 6b496c2 · 6b496c2
1 parent e7b978e
commit 6b496c2
Show file tree

Hide file tree

Showing 28 changed files with 531 additions and 7 deletions.
diff --git a/downstream_projects.json b/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"
   }
 }
diff --git a/package.json b/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",

diff --git a/src/directives/uiSref.ts b/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 {
   /**

diff --git a/src/directives/uiSrefActive.ts b/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[] = [];

diff --git a/src/directives/uiSrefStatus.ts b/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 */

diff --git a/src/directives/uiView.ts b/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>

diff --git a/src/index.ts b/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';
diff --git a/src/provideUiRouter.ts b/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),
+  ]);
+}
diff --git a/src/uiRouterNgModule.ts b/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 {

diff --git a/test-angular-versions/v18-standalone/README.md b/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.
diff --git a/test-angular-versions/v18-standalone/angular.json b/test-angular-versions/v18-standalone/angular.json
@@ -0,0 +1,124 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "yarn"
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "v18": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:class": {
+          "skipTests": true
+        },
+        "@schematics/angular:component": {
+          "skipTests": true
+        },
+        "@schematics/angular:directive": {
+          "skipTests": true
+        },
+        "@schematics/angular:guard": {
+          "skipTests": true
+        },
+        "@schematics/angular:interceptor": {
+          "skipTests": true
+        },
+        "@schematics/angular:pipe": {
+          "skipTests": true
+        },
+        "@schematics/angular:resolver": {
+          "skipTests": true
+        },
+        "@schematics/angular:service": {
+          "skipTests": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/v18",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kB",
+                  "maximumError": "4kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "v18:build:production"
+            },
+            "development": {
+              "buildTarget": "v18:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/test-angular-versions/v18-standalone/cypress.config.ts b/test-angular-versions/v18-standalone/cypress.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  video: false,
+  e2e: {
+    setupNodeEvents(on, config) {},
+    baseUrl: 'http://localhost:4000',
+    supportFile: false
+  },
+})
diff --git a/test-angular-versions/v18-standalone/cypress/e2e/sample_app.cy.js b/test-angular-versions/v18-standalone/cypress/e2e/sample_app.cy.js
@@ -0,0 +1,69 @@
+describe('Angular app', () => {
+  beforeEach(() => {
+    window.sessionStorage.clear();
+  });
+
+  it('loads', () => {
+    cy.visit('');
+  });
+
+  it('loads home state by default', () => {
+    cy.visit('');
+    cy.url().should('include', '/home');
+  });
+
+  it('renders uisref as links', () => {
+    cy.visit('');
+    cy.get('a').contains('home');
+    cy.get('a').contains('about');
+    cy.get('a').contains('lazy');
+    cy.get('a').contains('lazy.child');
+    cy.get('a').contains('lazy.child.viewtarget');
+  });
+
+  it('renders home', () => {
+    cy.visit('/home');
+    cy.get('a').contains('home').should('have.class', 'active');
+    cy.get('a').contains('about').should('not.have.class', 'active');
+    cy.get('#default').contains('home works');
+  });
+
+  it('renders about', () => {
+    cy.visit('/home');
+    cy.visit('/about');
+    cy.get('a').contains('home').should('not.have.class', 'active');
+    cy.get('a').contains('about').should('have.class', 'active');
+    cy.get('#default').contains('about works');
+  });
+
+  it('loads lazy routes', () => {
+    cy.visit('/home');
+    cy.visit('/lazy');
+    cy.get('a').contains('home').should('not.have.class', 'active');
+    cy.get('a').contains('lazy').should('have.class', 'active');
+    cy.get('#default').contains('lazy works');
+  });
+
+  it('routes to lazy routes', () => {
+    cy.visit('/lazy');
+    cy.get('a').contains('home').should('not.have.class', 'active');
+    cy.get('a').contains('lazy').should('have.class', 'active');
+    cy.get('#default').contains('lazy works');
+  });
+
+  it('routes to lazy child routes', () => {
+    cy.visit('/lazy/child');
+    cy.get('a').contains('home').should('not.have.class', 'active');
+    cy.get('a').contains('lazy.child').should('have.class', 'active');
+    cy.get('#default').contains('lazy.child works');
+  });
+
+  it('targets named views', () => {
+    cy.visit('/lazy/child/viewtarget');
+    cy.get('a').contains('home').should('not.have.class', 'active');
+    cy.get('a').contains('lazy.child').should('have.class', 'active');
+    cy.get('#default').contains('lazy.child works');
+    cy.get('#header').contains('lazy.child.viewtarget works');
+    cy.get('#footer').contains('lazy.child.viewtarget works');
+  });
+});