refactor: update directives/components to use standalone APIs (#92)

Author: brandonroberts

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2020-2021 Brandon Roberts
+Copyright (c) 2020-2022 Brandon Roberts
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -64,6 +64,8 @@ import { ComponentRouterModule } from '@angular-component/router';
 export class FeatureModule {}
 ```
 
+## Usage with Standalone Features (v14+)
+
 After your components are registered, use the `Router` and `Route` components to register some routes.
 
 ```html

angular.json

@@ -25,6 +25,14 @@
             "scripts": []
           },
           "configurations": {
+            "development": {
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "buildOptimizer": false,
+              "sourceMap": true,
+              "optimization": false,
+              "namedChunks": true
+            },
             "production": {
               "fileReplacements": [
                 {
@@ -53,12 +61,13 @@
               ]
             }
           },
-          "outputs": ["{options.outputPath}"]
+          "outputs": ["{options.outputPath}"],
+          "defaultConfiguration": "development"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "example-app:build"
+            "browserTarget": "example-app:build:development"
           },
           "configurations": {
             "production": {

apps/example-app/src/app/app.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ComponentRouterModule } from '@angular-component/router';
+import { provideComponentRouter } from '@angular-component/router';
 
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
@@ -21,7 +21,6 @@ import { AppComponent } from '@example-app/core/containers';
     BrowserModule,
     BrowserAnimationsModule,
     HttpClientModule,
-    ComponentRouterModule.forRoot(),
 
     /**
      * StoreModule.forRoot is imported once in the root module, accepting a reducer
@@ -74,5 +73,6 @@ import { AppComponent } from '@example-app/core/containers';
     CoreModule,
   ],
   bootstrap: [AppComponent],
+  providers: [provideComponentRouter()],
 })
 export class AppModule {}

libs/router/LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2020-2021 Brandon Roberts
+Copyright (c) 2020-2022 Brandon Roberts
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

libs/router/package.json

@@ -22,9 +22,9 @@
   },
   "homepage": "https://github.com/angular-component/router#readme",
   "peerDependencies": {
-    "@angular/common": ">=9.0.0",
-    "@angular/core": ">=9.0.0",
-    "rxjs": ">=7.4.0"
+    "@angular/common": ">=14.0.0-rc.0",
+    "@angular/core": ">=14.0.0-rc.0",
+    "rxjs": ">=7.5.0"
   },
   "sideEffects": false
 }

libs/router/src/lib/link-active.directive.ts

@@ -35,7 +35,7 @@ export const LINK_ACTIVE_OPTIONS: LinkActiveOptions = {
  *  </li>
  * </ol>
  */
-@Directive({ selector: '[linkActive]' })
+@Directive({ selector: '[linkActive]', standalone: true })
 export class LinkActive implements AfterContentInit, OnDestroy, OnChanges {
   @ContentChildren(LinkTo, { descendants: true })
   public links: QueryList<LinkTo>;

libs/router/src/lib/link-to.directive.ts

@@ -20,7 +20,7 @@ const DEFAULT_TARGET = '_self';
  * <a linkTo="/home/page" [queryParams]="{ id: 123 }">Home Page</a>
  * <a [linkTo]="'/pages' + page.id">Page 1</a>
  */
-@Directive({ selector: 'a[linkTo]' })
+@Directive({ selector: 'a[linkTo]', standalone: true })
 export class LinkTo {
   @Input() target = DEFAULT_TARGET;
   @HostBinding('href') linkHref?: string | null;

libs/router/src/lib/route-component.directive.ts

@@ -2,6 +2,7 @@ import { Directive, Input } from '@angular/core';
 
 @Directive({
   selector: '[routeComponent]',
+  standalone: true,
 })
 export class RouteComponentTemplate {
   @Input() routeComponent: any;

libs/router/src/lib/route.component.ts

@@ -1,17 +1,17 @@
+import { CommonModule } from '@angular/common';
 import {
   Component,
   OnInit,
   Input,
   Type,
   ViewContainerRef,
-  ComponentFactoryResolver,
   ContentChild,
   TemplateRef,
   ChangeDetectionStrategy,
   Self,
-  NgModuleFactory,
-  Compiler,
   OnDestroy,
+  NgModuleRef,
+  createNgModuleRef,
 } from '@angular/core';
 
 import { Subject, BehaviorSubject, of, from } from 'rxjs';
@@ -24,7 +24,7 @@ import {
   map,
 } from 'rxjs/operators';
 
-import { Load, Route, RouteOptions } from './route';
+import { Load, ModuleWithRoute, Route, RouteOptions } from './route';
 import { Params, RouteParams, RoutePath } from './route-params.service';
 import { RouterComponent } from './router.component';
 import { Router } from './router.service';
@@ -46,6 +46,8 @@ interface State {
 @Component({
   // tslint:disable-next-line:component-selector
   selector: 'route',
+  standalone: true,
+  imports: [CommonModule],
   template: `
     <ng-container
       *ngIf="(shouldRender$ | async) && template"
@@ -110,9 +112,7 @@ export class RouteComponent implements OnInit, OnDestroy {
   constructor(
     private router: Router,
     private routerComponent: RouterComponent,
-    private resolver: ComponentFactoryResolver,
-    private viewContainerRef: ViewContainerRef,
-    private compiler: Compiler
+    private viewContainerRef: ViewContainerRef
   ) {}
 
   ngOnInit(): void {
@@ -176,32 +176,26 @@ export class RouteComponent implements OnInit, OnDestroy {
   private loadAndRender(route: Route) {
     if (route.load) {
       return from(
-        route.load().then((componentOrModule) => {
-          if (componentOrModule instanceof NgModuleFactory) {
-            const moduleRef = componentOrModule.create(
-              this.viewContainerRef.injector
-            );
-            const component = moduleRef.instance.routeComponent;
-
-            this.renderComponent(component);
-          } else if (componentOrModule.ɵmod) {
-            return this.compiler
-              .compileModuleAsync(componentOrModule as Type<any>)
-              .then((moduleFactory) => {
-                const moduleRef = moduleFactory.create(
-                  this.viewContainerRef.injector
-                );
-                const component = moduleRef.instance.routeComponent;
-                this.renderComponent(component);
-
-                return true;
-              });
-          } else {
-            this.renderComponent(componentOrModule);
-          }
+        route
+          .load()
+          .then(
+            (componentOrModule: NgModuleRef<ModuleWithRoute> | Type<any>) => {
+              let component: Type<any>;
+
+              if ((componentOrModule as any).ɵmod) {
+                const moduleRef: NgModuleRef<ModuleWithRoute> =
+                  createNgModuleRef(
+                    componentOrModule as Type<any>,
+                    this.viewContainerRef.injector
+                  );
+                component = moduleRef.instance.routeComponent;
+              } else {
+                component = componentOrModule as Type<any>;
+              }
 
-          return true;
-        })
+              this.renderComponent(component);
+            }
+          )
       );
     } else {
       this.showTemplate();
@@ -210,14 +204,12 @@ export class RouteComponent implements OnInit, OnDestroy {
   }
 
   private renderComponent(component: Type<any>) {
-    const componentFactory = this.resolver.resolveComponentFactory(component);
-
     this.showTemplate();
-    this.viewContainerRef.createComponent(
-      componentFactory,
-      this.viewContainerRef.length,
-      this.viewContainerRef.injector
-    );
+
+    this.viewContainerRef.createComponent(component, {
+      index: this.viewContainerRef.length,
+      injector: this.viewContainerRef.injector,
+    });
   }
 
   private clearComponent() {

libs/router/src/lib/route.ts

@@ -1,8 +1,8 @@
-import { Type, NgModuleFactory } from '@angular/core';
+import { Type, NgModule } from '@angular/core';
 
 import { Params } from './route-params.service';
 
-export type Load = () => Promise<NgModuleFactory<any> | Type<any> | any>;
+export type Load = () => Promise<NgModule | Type<any> | any>;
 
 export interface Route {
   path: string;

libs/router/src/lib/router.component.ts

@@ -27,6 +27,7 @@ interface State {
 @Component({
   // tslint:disable-next-line:component-selector
   selector: 'router',
+  standalone: true,
   template: '<ng-content></ng-content>',
 })
 export class RouterComponent implements OnInit, OnDestroy {

libs/router/src/lib/router.module.ts

@@ -26,20 +26,23 @@ export function getQueryParams(router: Router) {
   return router.queryParams$;
 }
 
+export function provideComponentRouter() {
+  return [
+    UrlParser,
+    { provide: LocationStrategy, useClass: PathLocationStrategy },
+    { provide: QueryParams, deps: [Router], useFactory: getQueryParams },
+  ];
+}
+
 @NgModule({
-  imports: [CommonModule],
-  declarations: [components],
+  imports: [CommonModule, components],
   exports: [components],
 })
 export class ComponentRouterModule {
   static forRoot(): ModuleWithProviders<ComponentRouterModule> {
     return {
       ngModule: ComponentRouterModule,
-      providers: [
-        UrlParser,
-        { provide: LocationStrategy, useClass: PathLocationStrategy },
-        { provide: QueryParams, deps: [Router], useFactory: getQueryParams },
-      ],
+      providers: [provideComponentRouter()],
     };
   }
 }

libs/router/src/lib/router.service.spec.ts

@@ -1,4 +1,5 @@
 import { Location, PlatformLocation } from '@angular/common';
+import { Injector } from '@angular/core';
 
 import { Router } from './router.service';
 import { UrlParser } from './url-parser';
@@ -28,7 +29,16 @@ describe('Router', () => {
 
     urlParser = new UrlParser();
 
-    router = new Router(location, platformLocation, urlParser);
+    const injector = Injector.create({
+      providers: [
+        { provide: Router, deps: [] },
+        { provide: Location, useValue: location },
+        { provide: PlatformLocation, useValue: platformLocation },
+        { provide: UrlParser, useValue: urlParser },
+      ],
+    });
+
+    router = injector.get(Router);
   });
 
   describe('go', () => {

libs/router/src/lib/router.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { PlatformLocation, Location } from '@angular/common';
 
 import { BehaviorSubject } from 'rxjs';
@@ -17,6 +17,10 @@ interface State {
   providedIn: 'root',
 })
 export class Router {
+  private location = inject(Location);
+  private platformLocation = inject(PlatformLocation);
+  private urlParser = inject(UrlParser);
+
   private readonly state$ = new BehaviorSubject<State>({
     url: this.location.path(),
     queryParams: {},
@@ -36,11 +40,7 @@ export class Router {
     distinctUntilChanged(compareParams)
   );
 
-  constructor(
-    private location: Location,
-    private platformLocation: PlatformLocation,
-    private urlParser: UrlParser
-  ) {
+  constructor() {
     this.location.subscribe(() => {
       this.nextState(this.getLocation());
     });

package.json

@@ -40,13 +40,13 @@
     "@angular/platform-browser": "14.0.0-rc.2",
     "@angular/platform-browser-dynamic": "14.0.0-rc.2",
     "@angular/router": "14.0.0-rc.2",
-    "@ngrx/effects": "13.0.2",
-    "@ngrx/entity": "13.0.2",
-    "@ngrx/router-store": "13.0.2",
-    "@ngrx/store": "13.0.2",
+    "@ngrx/effects": "14.0.0-beta.0",
+    "@ngrx/entity": "14.0.0-beta.0",
+    "@ngrx/router-store": "14.0.0-beta.0",
+    "@ngrx/store": "14.0.0-beta.0",
     "@nrwl/angular": "14.1.9",
     "angular-in-memory-web-api": "^0.13.0",
-    "rxjs": "^7.4.0",
+    "rxjs": "^7.5.0",
     "tslib": "^2.4.0",
     "zone.js": "0.11.4"
   },
@@ -55,7 +55,7 @@
     "@angular/cli": "14.0.0-rc.2",
     "@angular/compiler-cli": "14.0.0-rc.2",
     "@angular/language-service": "14.0.0-rc.2",
-    "@ngrx/store-devtools": "13.0.2",
+    "@ngrx/store-devtools": "14.0.0-beta.0",
     "@nrwl/cli": "14.1.9",
     "@nrwl/cypress": "14.1.9",
     "@nrwl/jest": "14.1.9",