feat(angular): support for v10 (#2189)

Author: NathanWalker

Diff for: .travis.yml

@@ -4,5 +4,5 @@ node_js:
 script:
   - cd nativescript-angular
   - npm install
-  - npm run tslint
+  - npm run format-check
   - npm pack

Diff for: CHANGELOG.md

@@ -2,6 +2,23 @@
 # [9.0.0](https://github.com/NativeScript/nativescript-angular/compare/8.20.4...9.0.0) (2020-06-03)
 
 
+
+### Bug Fixes
+
+* **bindable:** parent referenced expression-values now load properly using an update call ([#8670](https://github.com/NativeScript/NativeScript/issues/8670)) ([6b0028a](https://github.com/NativeScript/NativeScript/commit/6b0028afd7b554914b039cdf371e8e30f6e02dac)), closes [#8666](https://github.com/NativeScript/NativeScript/issues/8666) [#6981](https://github.com/NativeScript/NativeScript/issues/6981) [#5054](https://github.com/NativeScript/NativeScript/issues/5054)
+* **scroll-view:** android 'isScrollEnabled' will apply if changed while gesture is underway ([#8695](https://github.com/NativeScript/NativeScript/issues/8695)) ([02ec7f1](https://github.com/NativeScript/NativeScript/commit/02ec7f104d327df53df687ddd1b8ac5b1cdc04ba))
+* **snapshots:** android is not defined ([#8691](https://github.com/NativeScript/NativeScript/issues/8691)) ([a8bbd7c](https://github.com/NativeScript/NativeScript/commit/a8bbd7c1e580e77e7ad5ddc7be6845e3d8fb02de))
+* **text-view:** only reload text if hint is showing on ios ([#8662](https://github.com/NativeScript/NativeScript/issues/8662)) ([ec17727](https://github.com/NativeScript/NativeScript/commit/ec17727e91f7a3209ada2c7de0bcf59c98c4e62a))
+
+
+### Features
+
+* **connectivity:** getActiveNetworkInfo and NetworkInfo modern compliance [#8580](https://github.com/NativeScript/NativeScript/issues/8580) ([#8652](https://github.com/NativeScript/NativeScript/issues/8652)) ([635f31f](https://github.com/NativeScript/NativeScript/commit/635f31f81f7826112142c707aff2a66c2b480b0e))
+* **dialog:** ios destructive style from options ([#8676](https://github.com/NativeScript/NativeScript/issues/8676)) ([bb531ce](https://github.com/NativeScript/NativeScript/commit/bb531ce71028f9c4fd4d753df16c82104f158e35))
+* **ImageSource:** resize method ([#8678](https://github.com/NativeScript/NativeScript/issues/8678)) ([bd12baf](https://github.com/NativeScript/NativeScript/commit/bd12bafb4aae8f1c523be4c7e04fa73722092304))
+* **text-view:** allow easy subclassing on ios ([#8663](https://github.com/NativeScript/NativeScript/issues/8663)) ([7d36447](https://github.com/NativeScript/NativeScript/commit/7d364474c23e17acf7696f159d3945d8a73d63e6))
+
+
 ### Features
 
 * angular 9 ivy ([fbe2450](https://github.com/NativeScript/nativescript-angular/commit/fbe2450))

Diff for: build/pack-scripts/pack-scoped.ts

@@ -5,27 +5,29 @@ import { execSync } from "child_process";
 console.log(`Packing @nativescript/angular package`);
 
 const distFolderPath = path.resolve("../../dist");
-const tempFolderPath = path.resolve("./temp-scoped");
 const outFileName = "nativescript-angular-scoped.tgz";
 
 const nsAngularPackagePath = path.resolve("../../nativescript-angular");
+const nsAngularPackageDistPath = path.resolve(nsAngularPackagePath + "/dist");
 
-execSync(`npm install --save-exact`, {
-    cwd: nsAngularPackagePath
-});
+function getFilesFromPath(path, extension) {
+  let files = fs.readdirSync( path );
+  return files.filter(file => file.match(new RegExp(`.*\.(${extension})`, 'ig')));
+}
+
+// execSync(`npm install --save-exact`, {
+//     cwd: nsAngularPackagePath
+// });
 
 // ensure empty temp and dist folders
-fs.emptyDirSync(tempFolderPath);
 fs.ensureDirSync(distFolderPath);
 
 // create .tgz in temp folder
-execSync(`npm pack ${nsAngularPackagePath}`, {
-    cwd: tempFolderPath
-});
+execSync(`cd ${nsAngularPackagePath} && npm run build.pack`);
 
 // assume we have a single file built in temp folder, take its name
-const currentFileName = fs.readdirSync(tempFolderPath)[0];
+const currentFileName = getFilesFromPath(nsAngularPackageDistPath, ".tgz")[0];
+console.log('currentFileName:', currentFileName);
 
 // move built file and remove temp folder
-fs.moveSync(`${tempFolderPath}/${currentFileName}`, `${distFolderPath}/${outFileName}`, { overwrite: true });
-fs.removeSync(`${tempFolderPath}`);
+fs.moveSync(`${nsAngularPackageDistPath}/${currentFileName}`, `${distFolderPath}/${outFileName}`, { overwrite: true });

Diff for: build/pack-scripts/tsconfig.json

@@ -1,7 +1,7 @@
 {
     "compilerOptions": {
         "module": "commonjs",
-        "target": "es5",
+        "target": "es2015",
         "experimentalDecorators": true,
         "emitDecoratorMetadata": true,
         "noEmitHelpers": true,

Diff for: doc/upgrading-zonejs.md

@@ -2,7 +2,7 @@
 
 `nativescript-angular` uses a fork of the `zone.js` package in order to work around incompatibilities between node, browser, and mobile implementations.
 
-The fork resides at https://github.com/NativeScript/zone.js in the `zone-nativescript` branch. It adds a separate `lib/nativescript/nativescript.ts` entry point that is used to generate a new bundle: `dist/zone-nativescript.js`.
+The fork resides at https://github.com/NativeScript/zone.js in the `zone-nativescript` branch. It adds a separate `lib/nativescript/nativescript.ts` entry point that is used to generate a new bundle: `zone-nativescript.js`.
 
 To upgrade to a newer release of `zone.js`:
 
@@ -11,5 +11,5 @@ To upgrade to a newer release of `zone.js`:
 3. Rebuild: `gulp build`
 4. Run the node-based smoke tests: `gulp test/nativescript`
 5. Run the browser tests: `node_modules/.bin/karma start karma.conf.js --single-run` (You need to run node `test/ws-server.js` in a separate console first)
-6. Commit `dist/zone-nativescript.js`, drop the previous `dist/zone-nativescript.js` commit from the branch. Force push the new `zone-nativescript` branch to GitHub.
+6. Commit `zone-nativescript.js`, drop the previous `zone-nativescript.js` commit from the branch. Force push the new `zone-nativescript` branch to GitHub.
 7. Update your copy of `nativescript-angular/zone.js/dist/zone-nativescript.js` with the bundle you just built.

Diff for: e2e/animation-examples/app/App_Resources/iOS/build.xcconfig

@@ -4,4 +4,3 @@
 // To build for device with Xcode 8 you need to specify your development team. More info: https://developer.apple.com/library/prerelease/content/releasenotes/DeveloperTools/RN-Xcode/Introduction.html
 // DEVELOPMENT_TEAM = YOUR_TEAM_ID;
 ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
-ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;

Diff for: e2e/animation-examples/app/animation-builder.component.scss

@@ -0,0 +1,3 @@
+.btn-primary {
+  background-color: pink;
+}

Diff for: e2e/animation-examples/app/animation-builder.component.ts

@@ -4,7 +4,8 @@ import { Component, ViewChild } from '@angular/core';
 @Component({
     template: `
         <Button #button (tap)="makeAnimation()" class="btn btn-primary" automationText="tapToDisappear" text="Tap to disappear!"></Button>
-    `
+    `,
+    styleUrls: ['./animation-builder.component.scss']
 })
 export class AnimationBuilderComponent {
   @ViewChild('button', { static: false }) button;

Diff for: e2e/animation-examples/app/app.module.ts

@@ -24,7 +24,7 @@ export function asyncBoot(): Function {
   return (): Promise<any> => new Promise(resolve => {
     setTimeout(() => {
       resolve();
-    }, 2000);
+    }, 5000);
   })
 }
 

Diff for: e2e/animation-examples/app/app.routing.ts

@@ -1,6 +1,6 @@
 import { NgModule } from "@angular/core";
 import { Routes } from "@angular/router";
-import { NativeScriptRouterModule } from "@nativescript/angular/router";
+import { NativeScriptRouterModule } from "@nativescript/angular";
 
 import { AnimationsListComponent } from "./animations-list.component";
 import { AnimationBuilderComponent } from "./animation-builder.component";

Diff for: e2e/animation-examples/app/hero/hero-routing.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from "@angular/core";
 import { Routes } from "@angular/router";
-import { NativeScriptRouterModule } from "@nativescript/angular/router";
+import { NativeScriptRouterModule } from "@nativescript/angular";
 
 import { HeroTeamBuilderComponent } from './hero-team-builder.component';
 

Diff for: e2e/animation-examples/app/hero/hero.module.ts

@@ -1,5 +1,5 @@
 import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
-import { NativeScriptCommonModule } from "@nativescript/angular/common";
+import { NativeScriptCommonModule } from "@nativescript/angular";
 
 import { HeroRoutingModule, routedComponents } from "./hero-routing.module";
 

Diff for: e2e/animation-examples/app/main.aot.ts

@@ -1,103 +1,74 @@
-import { platformNativeScriptDynamic } from "@nativescript/angular/platform";
-import { animationsTraceCategory } from "@nativescript/angular/trace";
-import { setCategories, enable } from "@nativescript/core/trace";
-import {
-  GridLayout,
-  ItemSpec,
-  GridUnitType,
-} from '@nativescript/core/ui/layouts/grid-layout';
-import {
-  HorizontalAlignment,
-  VerticalAlignment,
-} from '@nativescript/core/ui/enums/enums';
+import { platformNativeScriptDynamic, NativeScriptDebug, AppLaunchView } from "@nativescript/angular";
+import { Trace, GridLayout, GridUnitType, ItemSpec, Application } from "@nativescript/core";
 
 import { AppModule } from "./app.module";
 
-setCategories(animationsTraceCategory);
-enable();
+Trace.setCategories(NativeScriptDebug.animationsTraceCategory);
+Trace.enable();
 
-class LaunchAnimation extends GridLayout {
+class LaunchAnimation extends GridLayout implements AppLaunchView {
   circle: GridLayout;
-  animatedContainer: GridLayout;
   finished = false;
+  complete: () => void;
 
   constructor() {
     super();
+    this.backgroundColor = "#4caef7";
+    this.className = "w-full h-full";
 
-    // setup container to house launch animation
-    this.animatedContainer = new GridLayout();
-    this.animatedContainer.style.zIndex = 100;
-    this.animatedContainer.backgroundColor = '#4caef7';
-    this.animatedContainer.className = 'w-full h-full';
-
-    // any creative animation can be put inside
+    // construct any creative animation
     this.circle = new GridLayout();
     this.circle.width = 30;
     this.circle.height = 30;
     this.circle.borderRadius = 15;
-    this.circle.horizontalAlignment = HorizontalAlignment.center;
-    this.circle.verticalAlignment = VerticalAlignment.center;
-    this.circle.backgroundColor = '#fff';
-    this.animatedContainer.addRow(new ItemSpec(1, GridUnitType.STAR));
-    this.animatedContainer.addRow(new ItemSpec(1, GridUnitType.AUTO));
-    this.animatedContainer.addRow(new ItemSpec(1, GridUnitType.STAR));
-    GridLayout.setRow(this.circle, 1);
-    this.animatedContainer.addChild(this.circle);
+    this.circle.horizontalAlignment = "center";
+    this.circle.verticalAlignment = "middle";
+    this.circle.backgroundColor = "#fff";
 
-    // add animation to top row since booted app will insert into bottom row
-    GridLayout.setRow(this.animatedContainer, 1);
-    this.addChild(this.animatedContainer);
+    this.addChild(this.circle);
   }
 
-  startAnimation() {
-    this.circle
-      .animate({
-        scale: { x: 2, y: 2 },
-        duration: 800,
-      })
-      .then(() => {
-        this.circle
-          .animate({
-            scale: { x: 1, y: 1 },
-            duration: 800,
-          })
-          .then(() => {
-            if (this.finished) {
-              this.circle
-                .animate({
-                  scale: { x: 30, y: 30 },
-                  duration: 400,
-                })
-                .then(() => {
-                  this.fadeOut();
-                });
-            } else {
-              // keep looping
-              this.startAnimation();
-            }
-          });
+  async startAnimation() {
+    await this.circle.animate({
+      scale: { x: 2, y: 2 },
+      duration: 800,
+    });
+
+    await this.circle.animate({
+      scale: { x: 1, y: 1 },
+      duration: 800,
+    });
+
+    if (this.finished) {
+      await this.circle.animate({
+        scale: { x: 30, y: 30 },
+        duration: 400,
       });
+      this.fadeOut();
+    } else {
+      // keep looping
+      this.startAnimation();
+    }
   }
 
   cleanup() {
-    this.finished = true;
+    return new Promise((resolve) => {
+      this.complete = resolve;
+      this.finished = true;
+    });
   }
 
-  fadeOut() {
-    this.animatedContainer
-      .animate({
-        opacity: 0,
-        duration: 400,
-      })
-      .then(() => {
-        this._removeView(this.animatedContainer);
-        this.animatedContainer = null;
-        this.circle = null;
-      });
+  async fadeOut() {
+    await this.animate({
+      opacity: 0,
+      duration: 400,
+    });
+    this.complete();
   }
 }
 
 platformNativeScriptDynamic({
   launchView: new LaunchAnimation(),
-  // backgroundColor: 'purple'
+  // backgroundColor: 'purple',
+  // async: true
 }).bootstrapModule(AppModule);