Upgraded to NS+NG10

mahmoudajawad · mahmoudajawad · commit 2e9723dd0932 · 2020-07-31T06:51:29.000+04:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,69 +1,71 @@
 {
-  "name": "nativescript-pokedex",
-  "nativescript": {
-    "id": "org.nativescript.nativescriptpokedex",
-    "tns-android": {
-      "version": "6.5.1"
-    },
-    "tns-ios": {
-      "version": "6.5.1"
-    }
-  },
-  "version": "0.1.0",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e",
-    "android": "tns run android",
-    "ios": "tns run ios",
-    "mobile": "tns run",
-    "preview": "tns preview"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "~8.2.0",
-    "@angular/common": "~8.2.0",
-    "@angular/compiler": "~8.2.0",
-    "@angular/core": "~8.2.0",
-    "@angular/forms": "~8.2.0",
-    "@angular/http": "~8.0.0-beta.10",
-    "@angular/platform-browser": "~8.2.0",
-    "@angular/platform-browser-dynamic": "~8.2.0",
-    "@angular/router": "~8.2.0",
-    "@nativescript/theme": "~2.2.1",
-    "@ng-bootstrap/ng-bootstrap": "^5.3.1",
-    "core-js": "^2.6.9",
-    "nativescript-angular": "~8.20.0",
-    "reflect-metadata": "~0.1.12",
-    "rxjs": "~6.4.0",
-    "tns-core-modules": "~6.3.0",
-    "tslib": "1.10.0",
-    "zone.js": "~0.9.1"
-  },
-  "devDependencies": {
-    "@angular/cli": "~8.3.0",
-    "@angular/compiler-cli": "~8.2.0",
-    "@angular-devkit/build-angular": "~0.803.0",
-    "@nativescript/schematics": "~1.0.0",
-    "@nativescript/tslint-rules": "~0.0.5",
-    "@types/jasmine": "~3.3.8",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~8.9.4",
-    "codelyzer": "^5.0.0",
-    "jasmine-core": "~3.4.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.1.0",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.0",
-    "nativescript-dev-webpack": "~1.4.0",
-    "protractor": "~5.4.0",
-    "ts-node": "~7.0.0",
-    "tslint": "~5.15.0",
-    "typescript": "~3.5.3"
-  }
+	"name": "nativescript-pokedex",
+	"nativescript": {
+		"id": "org.nativescript.nativescriptpokedex",
+		"tns-android": {
+			"version": "6.5.3"
+		},
+		"tns-ios": {
+			"version": "6.5.2"
+		}
+	},
+	"version": "0.1.0",
+	"scripts": {
+		"clean": "npx rimraf hooks node_modules package-lock.json platforms",
+		"ng": "ng",
+		"start": "ng serve",
+		"build": "ng build",
+		"test": "ng test",
+		"lint": "ng lint",
+		"e2e": "ng e2e",
+		"android": "tns run android --no-hmr",
+		"ios": "tns run ios --no-hmr",
+		"mobile": "tns run",
+		"preview": "tns preview",
+		"ngcc": "ngcc --properties es2015 module main --first-only",
+		"postinstall": "npm run ngcc"
+	},
+	"dependencies": {
+		"@angular/animations": "~10.0.0",
+		"@angular/common": "~10.0.0",
+		"@angular/compiler": "~10.0.0",
+		"@angular/core": "~10.0.0",
+		"@angular/forms": "~10.0.0",
+		"@angular/localize": "^10.0.7",
+		"@angular/platform-browser": "~10.0.0",
+		"@angular/platform-browser-dynamic": "~10.0.0",
+		"@angular/router": "~10.0.0",
+		"@nativescript/angular": "~10.0.0",
+		"@nativescript/core": "rc",
+		"@nativescript/theme": "~2.2.1",
+		"@ng-bootstrap/ng-bootstrap": "7.0.0",
+		"core-js": "^2.6.9",
+		"reflect-metadata": "~0.1.12",
+		"rxjs": "~6.5.5",
+		"tslib": "1.10.0",
+		"zone.js": "~0.10.2"
+	},
+	"devDependencies": {
+		"@angular/cli": "~10.0.0",
+		"@angular/compiler-cli": "~10.0.0",
+		"@angular-devkit/build-angular": "~0.1000.2",
+		"@nativescript/tslint-rules": "~0.0.5",
+		"@types/jasmine": "~3.5.0",
+		"@types/jasminewd2": "~2.0.3",
+		"@types/node": "^12.11.1",
+		"codelyzer": "^5.1.2",
+		"jasmine-core": "~3.5.0",
+		"jasmine-spec-reporter": "~4.2.1",
+		"karma": "~4.4.1",
+		"karma-chrome-launcher": "~3.1.0",
+		"karma-coverage-istanbul-reporter": "~2.1.0",
+		"karma-jasmine": "~3.0.1",
+		"karma-jasmine-html-reporter": "^1.4.2",
+		"@nativescript/webpack": "~2.0.0",
+		"protractor": "~5.4.3",
+		"ts-node": "~8.3.0",
+		"tslint": "~6.1.0",
+		"typescript": "~3.9.0",
+		"node-sass": "^4.7.1"
+	}
 }
diff --git a/src/app/app-routing.module.tns.ts b/src/app/app-routing.module.tns.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
-import { NativeScriptRouterModule } from 'nativescript-angular/router';
+import { NativeScriptRouterModule } from '@nativescript/angular';
+
 import { routes } from '@src/app/app.routes';
 
 @NgModule({
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+
 import { routes } from '@src/app/app.routes';
 
 @NgModule({
diff --git a/src/app/app.component.tns.html b/src/app/app.component.tns.html
@@ -2,4 +2,6 @@
     iOS has issues with nested pages with Page
     Ref: https://github.com/NativeScript/nativescript-angular/issues/1441
 -->
-<page-router-outlet></page-router-outlet>
+<GridLayout>
+	<page-router-outlet></page-router-outlet>
+</GridLayout>
diff --git a/src/app/app.module.tns.ts b/src/app/app.module.tns.ts
@@ -1,8 +1,5 @@
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
-import { NativeScriptCommonModule } from 'nativescript-angular/common';
-import { NativeScriptHttpClientModule } from 'nativescript-angular/http-client';
-import { NativeScriptFormsModule } from 'nativescript-angular/forms';
+import { NativeScriptModule, NativeScriptCommonModule, NativeScriptHttpClientModule, NativeScriptFormsModule } from '@nativescript/angular';
 
 import { AppRoutingModule } from '@src/app/app-routing.module';
 import { AppComponent } from '@src/app/app.component';
diff --git a/src/app/pages/home/home.page.ts b/src/app/pages/home/home.page.ts
@@ -26,6 +26,5 @@ export class HomePage implements OnInit {
 			this.gridLayoutRows = 'auto auto * auto';
 			this.gridElementsRows = ['0', '1', '2', '3'];
 		}
-		this.cdr.detectChanges();
 	}
 }
diff --git a/src/app/services/cache/cache.service.tns.ts b/src/app/services/cache/cache.service.tns.ts
@@ -1,20 +1,20 @@
 import { Injectable } from '@angular/core';
 
-import * as applicationSettings from 'tns-core-modules/application-settings';
+import { ApplicationSettings } from '@nativescript/core';
 
 @Injectable()
 export class CacheService {
 
 	constructor() { }
 
 	get(key: string): string {
-		return applicationSettings.getString(key);
+		return ApplicationSettings.getString(key);
 	}
 	put(key: string, val: string): void {
-		applicationSettings.setString(key, val);
+		ApplicationSettings.setString(key, val);
 	}
 
 	remove(key: string): void {
-		applicationSettings.remove(key);
+		ApplicationSettings.remove(key);
 	}
 }
diff --git a/src/app/utils/app-utils/app-utils.tns.ts b/src/app/utils/app-utils/app-utils.tns.ts
@@ -1,14 +1,13 @@
-import { Injectable, Inject } from '@angular/core';
-import { DEVICE } from 'nativescript-angular/platform-providers';
-import { Device, platformNames, screen } from 'tns-core-modules/platform';
+import { Injectable } from '@angular/core';
+import { isAndroid, isIOS, Screen } from '@nativescript/core';
 
 import { debugLog, camelCaseToSpaced, kebabCaseToSpaced, generatePokemonObject } from '@src/app/utils/app-utils/app-utils.common';
 
 
 @Injectable()
 export class AppUtils {
 
-	constructor(@Inject(DEVICE) private device: Device) { }
+	constructor() { }
 
 	debugLog = debugLog;
 	camelCaseToSpaced = camelCaseToSpaced;
@@ -22,16 +21,16 @@ export class AppUtils {
 
 	platform = (verbose: boolean = false): 'web' | 'mobile' | 'android' | 'ios' => {
 		if (verbose) {
-			if (this.device.os === platformNames.android) {
+			if (isAndroid) {
 				return 'android';
-			} else if (this.device.os === platformNames.ios) {
+			} else if (isIOS) {
 				return 'ios';
 			}
 		}
 		return 'mobile';
 	}
 
 	screenWidth = (): number => {
-		return screen.mainScreen.widthDIPs;
+		return Screen.mainScreen.widthDIPs;
 	}
 }
diff --git a/src/app/utils/hide-action-bar/hide-action-bar.tns.ts b/src/app/utils/hide-action-bar/hide-action-bar.tns.ts
@@ -1,5 +1,5 @@
 import { Directive } from '@angular/core';
-import { Page } from 'tns-core-modules/ui/page/page';
+import { Page } from '@nativescript/core';
 
 @Directive({
 	selector: '[hideActionBar]'
diff --git a/src/app/utils/platform-view/platform-view.tns.ts b/src/app/utils/platform-view/platform-view.tns.ts
@@ -1,6 +1,5 @@
 import { Component, Inject, Input, TemplateRef, ElementRef, ContentChild } from '@angular/core';
-import { Device, platformNames } from 'tns-core-modules/platform';
-import { DEVICE } from 'nativescript-angular/platform-providers';
+import { isAndroid, isIOS, platformNames } from '@nativescript/core';
 
 @Component({
 	selector: 'PlatformView',
@@ -12,14 +11,14 @@ export class PlatformViewComponent {
 	@ContentChild('android', { static: true }) android: TemplateRef<ElementRef>;
 	@ContentChild('ios', { static: true }) ios: TemplateRef<ElementRef>;
 
-	constructor(@Inject(DEVICE) private device: Device) { }
+	constructor() { }
 
 	viewTemplate(): TemplateRef<ElementRef> {
 		if (this.verbose == false) {
 			return this.mobile;
-		} else if (this.verbose == true && this.device.os === platformNames.android) {
+		} else if (isAndroid) {
 			return this.android;
-		} else if (this.verbose == true && this.device.os === platformNames.ios) {
+		} else if (isIOS) {
 			return this.ios;
 		}
 	}
diff --git a/src/livesync-navigation.tns.ts b/src/livesync-navigation.tns.ts
@@ -1,17 +1,17 @@
-import { NgZone } from "@angular/core";
-import { Router } from "@angular/router";
-import { onBeforeLivesync, onAfterLivesync } from "nativescript-angular/platform-common";
-import { RouterExtensions } from "nativescript-angular/router";
+import { NgZone } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { onBeforeLivesync, onAfterLivesync, RouterExtensions } from '@nativescript/angular';
 
 // Ref: https://github.com/NativeScript/nativescript-angular/wiki/NativeScript-5.2-HMR-with-Angular
 
 let cachedUrl: string;
 onBeforeLivesync.subscribe(moduleRef => {
-	console.log("#### onBeforeLivesync");
+	console.log('#### onBeforeLivesync');
 	if (moduleRef) {
 		const router = <Router>moduleRef.injector.get(Router);
 		cachedUrl = router.url;
-		console.log("-------> Caching URL: " + cachedUrl);
+		console.log(`-------> Caching URL: ${cachedUrl}`);
 	}
 });
 
diff --git a/src/main.tns.ts b/src/main.tns.ts
@@ -1,27 +1,26 @@
-import { platformNativeScriptDynamic } from 'nativescript-angular/platform';
-import { AppOptions } from 'nativescript-angular/platform-common';
+import { platformNativeScriptDynamic, AppOptions } from '@nativescript/angular';
 
 import { AppModule } from '@src/app/app.module';
 
 // Optional - attach to livesync hooks and perfrom navigation
-import './livesync-navigation.tns';
+// import './livesync-navigation.tns';
 
 let options: AppOptions = {};
 
-if (module['hot']) {
-	options.hmrOptions = {
-		moduleTypeFactory: () => AppModule,
-		livesyncCallback: (platformReboot) => {
-			setTimeout(platformReboot, 0);
-		},
-	};
+// if (module['hot']) {
+// 	options.hmrOptions = {
+// 		moduleTypeFactory: () => AppModule,
+// 		livesyncCallback: (platformReboot) => {
+// 			setTimeout(platformReboot, 0);
+// 		},
+// 	};
 
-	// Path to your app module.
-	// You might have to change it if your module is in a different place.
-	module['hot'].accept(['./app/app.module'], () => {
-		global['hmrRefresh']();
-	});
-}
+// 	// Path to your app module.
+// 	// You might have to change it if your module is in a different place.
+// 	module['hot'].accept(['./app/app.module'], () => {
+// 		global['hmrRefresh']();
+// 	});
+// }
 
 // Don't forget to pass the options when creating the platform
 platformNativeScriptDynamic(options).bootstrapModule(AppModule);
diff --git a/src/polyfills.ts b/src/polyfills.ts
@@ -1,3 +1,7 @@
+/***************************************************************************************************
+ * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
+ */
+import '@angular/localize/init';
 /**
  * This file includes polyfills needed by Angular and is loaded before the app.
  * You can add your own extra polyfills to this file.
diff --git a/webpack.config.js b/webpack.config.js

Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,5 @@ export class HomePage implements OnInit {`
`26`	`26`	`this.gridLayoutRows = 'auto auto * auto';`
`27`	`27`	`this.gridElementsRows = ['0', '1', '2', '3'];`
`28`	`28`	`}`
`29`		`- this.cdr.detectChanges();`
`30`	`29`	`}`
`31`	`30`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,20 +1,20 @@`
`1`	`1`	`import { Injectable } from '@angular/core';`
`2`	`2`
`3`		`-import * as applicationSettings from 'tns-core-modules/application-settings';`
	`3`	`+import { ApplicationSettings } from '@nativescript/core';`
`4`	`4`
`5`	`5`	`@Injectable()`
`6`	`6`	`export class CacheService {`
`7`	`7`
`8`	`8`	`constructor() { }`
`9`	`9`
`10`	`10`	`get(key: string): string {`
`11`		`- return applicationSettings.getString(key);`
	`11`	`+ return ApplicationSettings.getString(key);`
`12`	`12`	`}`
`13`	`13`	`put(key: string, val: string): void {`
`14`		`- applicationSettings.setString(key, val);`
	`14`	`+ ApplicationSettings.setString(key, val);`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`remove(key: string): void {`
`18`		`- applicationSettings.remove(key);`
	`18`	`+ ApplicationSettings.remove(key);`
`19`	`19`	`}`
`20`	`20`	`}`