feat: Angular 14 (#72)

Author: NathanWalker

apps/nativescript-demo-ng/project.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/nativescript-demo-ng/src",
   "projectType": "application",
   "prefix": "nativescript",

apps/nativescript-demo-ng/tsconfig.json

@@ -12,5 +12,8 @@
     {
       "path": "./tsconfig.editor.json"
     }
-  ]
+  ],
+  "compilerOptions": {
+    "target": "es2020"
+  }
 }

nx.json

@@ -38,7 +38,5 @@
       }
     ]
   },
-  "cli": {
-    "defaultCollection": "@nstudio/xplat"
-  }
+  "$schema": "./node_modules/nx/schemas/nx-schema.json"
 }

package.json

@@ -35,49 +35,49 @@
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
   },
   "dependencies": {
-    "@angular/animations": "13.3.10",
-    "@angular/common": "13.3.10",
-    "@angular/compiler": "13.3.10",
-    "@angular/core": "13.3.10",
-    "@angular/forms": "13.3.10",
-    "@angular/platform-browser": "13.3.10",
-    "@angular/platform-browser-dynamic": "13.3.10",
-    "@angular/router": "13.3.10",
-    "@nativescript/core": "~8.1.0",
+    "@angular/animations": "14.0.1",
+    "@angular/common": "14.0.1",
+    "@angular/compiler": "14.0.1",
+    "@angular/core": "14.0.1",
+    "@angular/forms": "14.0.1",
+    "@angular/platform-browser": "14.0.1",
+    "@angular/platform-browser-dynamic": "14.0.1",
+    "@angular/router": "14.0.1",
+    "@nativescript/core": "~8.2.0",
     "@nativescript/theme": "~3.0.0",
     "@ngx-translate/core": "~14.0.0",
     "nativescript-ngx-fonticon": "~7.0.0",
     "rxjs": "^7.5.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.11.5"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "13.3.7",
-    "@angular-eslint/eslint-plugin": "13.0.1",
-    "@angular-eslint/eslint-plugin-template": "13.0.1",
-    "@angular-eslint/template-parser": "13.0.1",
-    "@angular/compiler-cli": "13.3.10",
+    "@angular-devkit/build-angular": "14.0.1",
+    "@angular-eslint/eslint-plugin": "13.2.1",
+    "@angular-eslint/eslint-plugin-template": "13.2.1",
+    "@angular-eslint/template-parser": "13.2.1",
+    "@angular/compiler-cli": "14.0.1",
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
     "@nativescript/types": "~8.2.0",
     "@nativescript/unit-test-runner": "^3.0.2",
     "@nativescript/webpack": "~5.0.0",
-    "@ngtools/webpack": "13.3.7",
-    "@nrwl/angular": "14.1.9",
-    "@nrwl/cli": "14.1.9",
-    "@nrwl/eslint-plugin-nx": "14.1.9",
-    "@nrwl/jest": "14.1.9",
-    "@nrwl/js": "14.1.9",
-    "@nrwl/node": "14.1.9",
-    "@nrwl/workspace": "14.1.9",
+    "@ngtools/webpack": "14.0.1",
+    "@nrwl/angular": "14.2.4",
+    "@nrwl/cli": "14.2.4",
+    "@nrwl/eslint-plugin-nx": "14.2.4",
+    "@nrwl/jest": "14.2.4",
+    "@nrwl/js": "14.2.4",
+    "@nrwl/node": "14.2.4",
+    "@nrwl/workspace": "14.2.4",
     "@nstudio/angular": "14.0.1",
     "@nstudio/nativescript": "14.0.1",
     "@nstudio/nativescript-angular": "14.0.1",
     "@nstudio/xplat": "14.0.1",
-    "@types/jasmine": "^3.7.2",
+    "@types/jasmine": "4.0.3",
     "@types/jest": "27.4.1",
-    "@types/node": "14.14.33",
+    "@types/node": "17.0.41",
     "@types/sinon": "^10.0.2",
-    "@typescript-eslint/eslint-plugin": "4.19.0",
-    "@typescript-eslint/parser": "4.19.0",
+    "@typescript-eslint/eslint-plugin": "~5.24.0",
+    "@typescript-eslint/parser": "~5.24.0",
     "conventional-changelog-cli": "^2.1.1",
     "dotenv": "10.0.0",
     "eslint": "7.22.0",
@@ -87,25 +87,25 @@
     "jest": "27.5.1",
     "karma": "6.3.20",
     "karma-coverage": "2.0.3",
-    "karma-jasmine": "4.0.1",
+    "karma-jasmine": "5.0.1",
     "karma-mocha-reporter": "^2.2.5",
     "karma-nativescript-launcher": "0.4.0",
     "karma-sinon": "^1.0.5",
     "lint-staged": "^11.0.0",
-    "ng-packagr": "13.3.1",
-    "nx": "14.1.9",
+    "ng-packagr": "14.0.1",
+    "nx": "14.2.4",
     "nyc": "15.1.0",
     "postcss": "^8.3.9",
     "postcss-import": "14.1.0",
     "postcss-preset-env": "7.5.0",
     "postcss-url": "10.1.3",
-    "prettier": "2.5.1",
+    "prettier": "2.6.2",
     "sass": "^1.32.0",
     "sinon": "^11.1.1",
     "ts-jest": "27.1.4",
-    "ts-node": "9.1.1",
+    "ts-node": "10.8.1",
     "tslib": "^2.1.0",
-    "typescript": "4.6.4"
+    "typescript": "4.7.3"
   },
   "xplat": {
     "prefix": "nativescript",

packages/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/angular",
-  "version": "13.0.4",
+  "version": "14.0.0-rc.0",
   "homepage": "https://nativescript.org/",
   "repository": {
     "type": "git",

packages/angular/project.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "packages/angular/src",
   "projectType": "library",
   "generators": {},

packages/angular/src/lib/animations/animation-driver.ts

@@ -63,6 +63,10 @@ class Selector {
 export class NativeScriptAnimationDriver implements AnimationDriver {
   private static validProperties = [...CssAnimationProperty._getPropertyNames(), 'transform'];
 
+  getParentElement(element: NgView): NgView {
+    return element?.parent as NgView;
+  }
+
   validateStyleProperty(property: string): boolean {
     NativeScriptDebug.animationsLog(`CssAnimationProperty.validateStyleProperty: ${property}`);
     return NativeScriptAnimationDriver.validProperties.indexOf(property) !== -1;

packages/angular/src/lib/animations/utils.ts

@@ -1,9 +1,6 @@
 import { KeyframeAnimation, KeyframeAnimationInfo, KeyframeDeclaration, KeyframeInfo, parseKeyframeDeclarations, animationTimingFunctionConverter } from '@nativescript/core';
 
-export interface Keyframe {
-  [key: string]: string | number;
-  offset: number;
-}
+export type Keyframe = Map<string, string | number> & { offset: number };
 
 const DASH_CASE_REGEXP = /-+([a-z0-9])/g;
 export function dashCaseToCamelCase(input: string): string {

packages/angular/src/lib/legacy/router/ns-location-strategy.ts

@@ -28,6 +28,10 @@ export class NSLocationStrategy extends LocationStrategy {
     }
   }
 
+  getState(): unknown {
+    return this.currentOutlet && this.currentOutlet.peekState();
+  }
+
   path(): string {
     if (!this.currentUrlTree) {
       return this.startPath || '/';

packages/angular/src/lib/legacy/router/page-router-outlet.ts

@@ -1,5 +1,5 @@
-import { Attribute, ChangeDetectorRef, ComponentFactory, ComponentFactoryResolver, ComponentRef, Directive, Inject, InjectionToken, Injector, OnDestroy, EventEmitter, Output, Type, ViewContainerRef, ElementRef, InjectFlags, NgZone } from '@angular/core';
-import { ActivatedRoute, ActivatedRouteSnapshot, ChildrenOutletContexts, PRIMARY_OUTLET } from '@angular/router';
+import { Attribute, ChangeDetectorRef, ComponentFactory, ComponentFactoryResolver, ComponentRef, Directive, Inject, InjectionToken, Injector, OnDestroy, EventEmitter, Output, Type, ViewContainerRef, ElementRef, InjectFlags, NgZone, EnvironmentInjector } from '@angular/core';
+import { ActivatedRoute, ActivatedRouteSnapshot, ChildrenOutletContexts, Data, PRIMARY_OUTLET, RouterOutletContract } from '@angular/router';
 
 import { Frame, Page, NavigatedData, profile, NavigationEntry } from '@nativescript/core';
 
@@ -54,7 +54,7 @@ registerElement('page-router-outlet', () => Frame);
 // eslint-disable-next-line @angular-eslint/directive-selector
 @Directive({ selector: 'page-router-outlet' }) // tslint:disable-line:directive-selector
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
-export class PageRouterOutlet implements OnDestroy {
+export class PageRouterOutlet implements OnDestroy, RouterOutletContract {
   // tslint:disable-line:directive-class-suffix
   private activated: ComponentRef<any> | null = null;
   private _activatedRoute: ActivatedRoute | null = null;
@@ -66,6 +66,9 @@ export class PageRouterOutlet implements OnDestroy {
   private viewUtil: ViewUtil;
   private frame: Frame;
 
+  attachEvents: EventEmitter<unknown> = new EventEmitter();
+  detachEvents: EventEmitter<unknown> = new EventEmitter();
+
   // eslint-disable-next-line @angular-eslint/no-output-rename
   @Output('activate') activateEvents = new EventEmitter<any>(); // tslint:disable-line:no-output-rename
   // eslint-disable-next-line @angular-eslint/no-output-rename
@@ -105,6 +108,13 @@ export class PageRouterOutlet implements OnDestroy {
     return this._activatedRoute;
   }
 
+  get activatedRouteData(): Data {
+    if (this._activatedRoute) {
+      return this._activatedRoute.snapshot.data;
+    }
+    return {};
+  }
+
   constructor(
     private parentContexts: ChildrenOutletContexts,
     private location: ViewContainerRef,
@@ -222,6 +232,7 @@ export class PageRouterOutlet implements OnDestroy {
     const component = this.activated;
     this.activated = null;
     this._activatedRoute = null;
+    this.detachEvents.emit(component.instance);
     return component;
   }
 
@@ -245,6 +256,7 @@ export class PageRouterOutlet implements OnDestroy {
     if (this.isFinalPageRouterOutlet()) {
       this.locationStrategy._finishBackPageNavigation(this.frame);
     }
+    this.attachEvents.emit(ref.instance);
   }
 
   private isFinalPageRouterOutlet() {
@@ -267,7 +279,7 @@ export class PageRouterOutlet implements OnDestroy {
    * This method in turn is responsible for calling the `routerOnActivate` hook of its child.
    */
   @profile
-  activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver | null): void {
+  activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver | EnvironmentInjector | null): void {
     this.outlet = this.outlet || this.getOutlet(activatedRoute.snapshot);
     if (!this.outlet) {
       if (NativeScriptDebug.isLogEnabled()) {
@@ -302,12 +314,21 @@ export class PageRouterOutlet implements OnDestroy {
     this.activateEvents.emit(this.activated.instance);
   }
 
-  private activateOnGoForward(activatedRoute: ActivatedRoute, loadedResolver: ComponentFactoryResolver): void {
+  private activateOnGoForward(activatedRoute: ActivatedRoute, loadedResolver: ComponentFactoryResolver | EnvironmentInjector): void {
     if (NativeScriptDebug.isLogEnabled()) {
       NativeScriptDebug.routerLog('PageRouterOutlet.activate() forward navigation - ' + 'create detached loader in the loader container');
     }
 
-    const factory = this.getComponentFactory(activatedRoute, loadedResolver);
+    let resolver: ComponentFactoryResolver;
+    let ourInjector = this.location.injector;
+    if (!(loadedResolver instanceof ComponentFactoryResolver)) {
+      ourInjector = loadedResolver;
+      resolver = loadedResolver?.get(ComponentFactoryResolver);
+    } else {
+      resolver = loadedResolver;
+    }
+
+    const factory = this.getComponentFactory(activatedRoute, resolver);
     const page = this.pageFactory({
       isNavigation: true,
       componentType: factory.componentType,
@@ -323,7 +344,7 @@ export class PageRouterOutlet implements OnDestroy {
         { provide: ChildrenOutletContexts, useValue: this.parentContexts.getOrCreateContext(this.name).children },
         { provide: PageService, useClass: PageService },
       ],
-      parent: this.location.injector,
+      parent: ourInjector,
     });
 
     const childInjector = new DestructibleInjector(destructables, injector);

packages/angular/src/lib/legacy/router/router.module.ts

@@ -28,7 +28,6 @@ export function provideLocationStrategy(locationStrategy: NSLocationStrategy, fr
 
 @NgModule({
   declarations: [NSRouterLink, NSRouterLinkActive, PageRouterOutlet, NSEmptyOutletComponent],
-  entryComponents: [NSEmptyOutletComponent],
   imports: [RouterModule, NativeScriptCommonModule],
   exports: [RouterModule, NSRouterLink, NSRouterLinkActive, PageRouterOutlet, NSEmptyOutletComponent],
   schemas: [NO_ERRORS_SCHEMA],

packages/angular/src/lib/router/router.module.ts

@@ -131,9 +131,6 @@ export function provideLocationInitialized(startpath: string | Promise<string>)
   declarations: [
     /* NSRouterLink, NSRouterLinkActive, PageRouterOutlet, NSEmptyOutletComponent */
   ],
-  entryComponents: [
-    /* NSEmptyOutletComponent */
-  ],
   imports: [RouterModule, NativeScriptCommonModule],
   exports: [RouterModule /* NSRouterLink, NSRouterLinkActive, PageRouterOutlet, NSEmptyOutletComponent */],
   schemas: [NO_ERRORS_SCHEMA],

packages/angular/tsconfig.json

@@ -9,5 +9,8 @@
     {
       "path": "./tsconfig.spec.json"
     }
-  ]
+  ],
+  "compilerOptions": {
+    "target": "es2020"
+  }
 }

packages/zone-js/project.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "packages/zone-js/src",
   "projectType": "library",
   "targets": {

workspace.json

@@ -4,5 +4,6 @@
     "angular": "packages/angular",
     "nativescript-demo-ng": "apps/nativescript-demo-ng",
     "zone-js": "packages/zone-js"
-  }
+  },
+  "$schema": "./node_modules/nx/schemas/workspace-schema.json"
 }