feat: Initial support for Angular 5

e2e/renderer/package.json

@@ -10,20 +10,20 @@
     }
   },
   "dependencies": {
-    "@angular/animations": "~4.4.1",
-    "@angular/common": "~4.4.1",
-    "@angular/compiler": "~4.4.1",
-    "@angular/core": "~4.4.1",
-    "@angular/forms": "~4.4.1",
-    "@angular/http": "~4.4.1",
-    "@angular/platform-browser": "~4.4.1",
-    "@angular/router": "~4.4.1",
+    "@angular/common": "~5.0.0",
+    "@angular/compiler": "~5.0.0",
+    "@angular/core": "~5.0.0",
+    "@angular/forms": "~5.0.0",
+    "@angular/http": "~5.0.0",
+    "@angular/platform-browser": "~5.0.0",
+    "@angular/platform-browser-dynamic": "~5.0.0",
+    "@angular/router": "~5.0.0",
     "nativescript-angular": "file:../../nativescript-angular",
     "nativescript-intl": "^3.0.0",
     "reflect-metadata": "~0.1.8",
-    "rxjs": "~5.3.0",
+    "rxjs": "^5.5.0",
     "tns-core-modules": "next",
-    "zone.js": "~0.8.2"
+    "zone.js": "^0.8.4"
   },
   "devDependencies": {
     "@types/chai": "^4.0.2",
@@ -42,10 +42,11 @@
     "nativescript-dev-appium": "next",
     "nativescript-dev-typescript": "~0.4.0",
     "tslib": "^1.7.1",
-    "typescript": "~2.2.1"
+    "typescript": "~2.4.2"
   },
   "scripts": {
     "e2e": "tsc -p e2e && mocha --opts ./e2e/config/mocha.opts",
-    "compile-tests-w": "tsc -p e2e --watch"
+    "compile-tests-w": "tsc -p e2e --watch",
+    "update-app-ng-deps": "update-app-ng-deps"
   }
 }

e2e/router/package.json

@@ -6,27 +6,28 @@
   "nativescript": {
     "id": "org.nativescript.router",
     "tns-android": {
-      "version": "3.2.0-2017-9-4-1"
+      "version": "next"
     },
     "tns-ios": {
-      "version": "3.2.0"
+      "version": "next"
     }
   },
   "dependencies": {
     "@angular/animations": "~4.4.1",
-    "@angular/common": "~4.4.1",
-    "@angular/compiler": "~4.4.1",
-    "@angular/core": "~4.4.1",
-    "@angular/forms": "~4.4.1",
-    "@angular/http": "~4.4.1",
-    "@angular/platform-browser": "~4.4.1",
-    "@angular/router": "~4.4.1",
+    "@angular/common": "~5.0.0",
+    "@angular/compiler": "~5.0.0",
+    "@angular/core": "~5.0.0",
+    "@angular/forms": "~5.0.0",
+    "@angular/http": "~5.0.0",
+    "@angular/platform-browser": "~5.0.0",
+    "@angular/router": "~5.0.0",
     "nativescript-angular": "file:../../nativescript-angular",
     "nativescript-intl": "^3.0.0",
     "reflect-metadata": "~0.1.8",
-    "rxjs": "~5.3.0",
+    "rxjs": "^5.5.0",
     "tns-core-modules": "next",
-    "zone.js": "~0.8.2"
+    "zone.js": "^0.8.4",
+    "@angular/platform-browser-dynamic": "~5.0.0"
   },
   "devDependencies": {
     "@types/chai": "^4.0.2",
@@ -45,10 +46,11 @@
     "nativescript-dev-appium": "next",
     "nativescript-dev-typescript": "~0.4.0",
     "tslib": "^1.7.1",
-    "typescript": "~2.2.1"
+    "typescript": "~2.4.2"
   },
   "scripts": {
     "e2e": "tsc -p e2e && mocha --opts ./e2e/config/mocha.opts",
-    "compile-tests-w": "tsc -p e2e --watch"
+    "compile-tests-w": "tsc -p e2e --watch",
+    "update-app-ng-deps": "update-app-ng-deps"
   }
-}
+}

nativescript-angular/animations/animation-driver.ts

@@ -68,6 +68,10 @@ class Selector {
 }
 
 export class NativeScriptAnimationDriver implements AnimationDriver {
+    validateStyleProperty(prop: string): boolean {
+        throw new Error("Not implemented!");
+    }
+
     matchesElement(element: NgView, rawSelector: string): boolean {
         traceLog(
             `NativeScriptAnimationDriver.matchesElement ` +

nativescript-angular/bin/update-app-ng-deps

@@ -11,47 +11,34 @@ const pluginPackageJson = JSON.parse(fs.readFileSync(pluginPackageJsonPath, "utf
 
 const isNgDependency = name => name.startsWith("@angular") ||
     name === "rxjs" ||
-    name === "zone.js";
+    name === "zone.js" ||
+    name === "typescript";
 
-function updateDeps(deps, newDeps) {
-    // set app dependencies to ones required from plugin
+function updateDeps(deps, devDeps, newDeps) {
     Object.keys(newDeps)
         .filter(isNgDependency)
-        .filter(dependencyName => deps.hasOwnProperty(dependencyName))
         .map(dependencyName => ({
             dependencyName,
-            version: pluginPackageJson.peerDependencies[dependencyName]
+            version: newDeps[dependencyName]
         }))
-        .filter(({ dependencyName, version }) => deps[dependencyName] !== version)
         .forEach(({ dependencyName, version }) => {
-            deps[dependencyName] = version;
+            if (devDeps[dependencyName]) {
+                devDeps[dependencyName] = version;
+            } else {
+                deps[dependencyName] = version;
+            }
+
             console.log(`Updated dependency ${dependencyName} to version: ${version}.`);
         });
-
-    // remove platform-browser-dynamic if present
-    if (deps.hasOwnProperty(browserDynamicDependency)) {
-        delete deps[browserDynamicDependency];
-        console.log(`Removed ${browserDynamicDependency}`);
-    }
-
-
-    return deps;
 }
 
-let pluginDeps = pluginPackageJson.peerDependencies;
-Object.keys(pluginPackageJson.devDependencies)
-    .filter(isNgDependency)
-    .filter(depName => !pluginDeps.hasOwnProperty(depName))
-    .forEach(depName => {
-        pluginDeps[depName] = pluginPackageJson.devDependencies[depName];
-    });
-
-const projectPath = path.dirname(path.dirname(pluginPath));
+const pluginDeps = pluginPackageJson.peerDependencies;
+const projectPath = process.env.INIT_CWD || path.dirname(path.dirname(pluginPath));
 const appPackageJsonPath = path.join(projectPath, "package.json");
 const appPackageJson = JSON.parse(fs.readFileSync(appPackageJsonPath, "utf8"));
 
-appPackageJson.dependencies = updateDeps(appPackageJson.dependencies, pluginDeps);
-appPackageJson.devDependencies = updateDeps(appPackageJson.devDependencies, pluginDeps);
+const { dependencies, devDependencies } = appPackageJson;
+updateDeps(dependencies, devDependencies, pluginDeps);
 
 fs.writeFileSync(appPackageJsonPath, JSON.stringify(appPackageJson, null, 2));
 

nativescript-angular/directives/list-view-comp.ts

@@ -1,7 +1,6 @@
 import {
     AfterContentInit,
     ChangeDetectionStrategy,
-    ChangeDetectorRef,
     Component,
     ContentChild,
     Directive,
@@ -88,15 +87,14 @@ export class ListViewComponent implements DoCheck, OnDestroy, AfterContentInit {
         }
         if (needDiffer && !this._differ && isListLikeIterable(value)) {
             this._differ = this._iterableDiffers.find(this._items)
-                .create(this._cdr, (_index, item) => { return item; });
+                .create((_index, item) => { return item; });
         }
 
         this.listView.items = this._items;
     }
 
     constructor(_elementRef: ElementRef,
-        private _iterableDiffers: IterableDiffers,
-        private _cdr: ChangeDetectorRef) {
+        private _iterableDiffers: IterableDiffers) {
         this.listView = _elementRef.nativeElement;
 
         this.listView.on("itemLoading", this.onItemLoading, this);

nativescript-angular/dom-adapter.ts

@@ -143,6 +143,7 @@ export class NativeScriptDomAdapter implements ɵDomAdapter {
   templateAwareRoot(_el: any /** TODO #9100 */): any /** TODO #9100 */ { throw new Error("Not implemented!") }
   createHtmlDocument(): HTMLDocument { throw new Error("Not implemented!") }
   defaultDoc(): HTMLDocument { throw new Error("Not implemented!") }
+  getDefaultDocument(): Document { throw new Error("Not implemented!") }
   getBoundingClientRect(_el: any /** TODO #9100 */): any /** TODO #9100 */ { throw new Error("Not implemented!") }
   getTitle(): string { throw new Error("Not implemented!") }
   setTitle(_doc: Document, _newTitle: string): any /** TODO #9100 */ { throw new Error("Not implemented!") }

nativescript-angular/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "nativescript-angular",
-  "version": "4.4.1",
+  "version": "5.0.0",
   "description": "An Angular renderer that lets you build mobile apps with NativeScript.",
   "homepage": "https://www.nativescript.org/",
   "bugs": "https://github.com/NativeScript/nativescript-angular/issues",
@@ -43,32 +43,35 @@
     "reflect-metadata": "^0.1.8"
   },
   "peerDependencies": {
-    "@angular/common": "~4.4.1",
-    "@angular/compiler": "~4.4.1",
-    "@angular/core": "~4.4.1",
-    "@angular/forms": "~4.4.1",
-    "@angular/http": "~4.4.1",
-    "@angular/platform-browser": "~4.4.1",
-    "@angular/router": "~4.4.1",
-    "rxjs": "^5.0.1",
+    "@angular/platform-browser-dynamic": "~5.0.0",
+    "@angular/common": "~5.0.0",
+    "@angular/compiler": "~5.0.0",
+    "@angular/core": "~5.0.0",
+    "@angular/forms": "~5.0.0",
+    "@angular/http": "~5.0.0",
+    "@angular/platform-browser": "~5.0.0",
+    "@angular/router": "~5.0.0",
+    "rxjs": "^5.5.0",
     "tns-core-modules": "^3.1.0 || >3.4.0-",
-    "zone.js": "^0.8.4"
+    "zone.js": "^0.8.4",
+    "typescript": "~2.4.2"
   },
   "devDependencies": {
-    "@angular/animations": "~4.4.1",
-    "@angular/common": "~4.4.1",
-    "@angular/compiler": "~4.4.1",
-    "@angular/compiler-cli": "~4.4.1",
-    "@angular/core": "~4.4.1",
-    "@angular/forms": "~4.4.1",
-    "@angular/http": "~4.4.1",
-    "@angular/platform-browser": "~4.4.1",
-    "@angular/router": "~4.4.1",
-    "codelyzer": "^3.1.2",
-    "rxjs": "^5.4.2",
+    "@angular/platform-browser-dynamic": "~5.0.0",
+    "@angular/animations": "~5.0.0",
+    "@angular/common": "~5.0.0",
+    "@angular/compiler": "~5.0.0",
+    "@angular/compiler-cli": "~5.0.0",
+    "@angular/core": "~5.0.0",
+    "@angular/forms": "~5.0.0",
+    "@angular/http": "~5.0.0",
+    "@angular/platform-browser": "~5.0.0",
+    "@angular/router": "~5.0.0",
+    "codelyzer": "^4.0.0",
+    "rxjs": "^5.5.0",
     "tns-core-modules": "next",
     "tslint": "^5.5.0",
-    "typescript": "^2.5.1",
+    "typescript": "~2.4.2",
     "zone.js": "^0.8.12"
   }
 }

nativescript-angular/platform-common.ts

@@ -16,9 +16,9 @@ import {
     NgModuleFactory,
     NgModuleRef,
     EventEmitter,
-    Provider,
     Sanitizer,
-    InjectionToken
+    InjectionToken,
+    StaticProvider
 } from "@angular/core";
 import { DOCUMENT } from "@angular/common";
 
@@ -54,7 +54,7 @@ export interface AppOptions {
     startPageActionBarHidden?: boolean;
 }
 
-export type PlatformFactory = (extraProviders?: Provider[]) => PlatformRef;
+export type PlatformFactory = (extraProviders?: StaticProvider[]) => PlatformRef;
 
 export class NativeScriptSanitizer extends Sanitizer {
     sanitize(_context: any, value: string): string {
@@ -70,8 +70,8 @@ export class NativeScriptDocument {
 
 export const COMMON_PROVIDERS = [
     defaultPageFactoryProvider,
-    { provide: Sanitizer, useClass: NativeScriptSanitizer },
-    { provide: DOCUMENT, useClass: NativeScriptDocument },
+    { provide: Sanitizer, useClass: NativeScriptSanitizer, deps: [] },
+    { provide: DOCUMENT, useClass: NativeScriptDocument, deps: [] },
 ];
 
 export class NativeScriptPlatformRef extends PlatformRef {

nativescript-angular/platform.ts

@@ -9,17 +9,24 @@ import {
 import {
     ElementSchemaRegistry,
     ResourceLoader,
-    COMPILER_PROVIDERS,
-    platformCoreDynamic
 } from "@angular/compiler";
 
+import {
+    ɵplatformCoreDynamic as platformCoreDynamic
+} from "@angular/platform-browser-dynamic";
+
+import {
+    ɵINTERNAL_BROWSER_PLATFORM_PROVIDERS as INTERNAL_BROWSER_PLATFORM_PROVIDERS
+} from "@angular/platform-browser";
+
 import {
     COMPILER_OPTIONS,
     PlatformRef,
     InjectionToken,
     ViewEncapsulation,
     createPlatformFactory,
-    MissingTranslationStrategy
+    MissingTranslationStrategy,
+    StaticProvider,
 } from "@angular/core";
 
 // Work around a TS bug requiring an imports of
@@ -35,18 +42,16 @@ if ((<any>global).___TS_UNUSED) {
 import "./dom-adapter";
 
 import { NativeScriptElementSchemaRegistry } from "./schema-registry";
-import { NSFileSystem } from "./file-system/ns-file-system";
 import { FileSystemResourceLoader } from "./resource-loader";
 
-export const NS_COMPILER_PROVIDERS = [
-    COMPILER_PROVIDERS,
+export const NS_COMPILER_PROVIDERS: StaticProvider[] = [
+    INTERNAL_BROWSER_PLATFORM_PROVIDERS,
     {
         provide: COMPILER_OPTIONS,
         useValue: {
             providers: [
-                NSFileSystem,
-                { provide: ResourceLoader, useClass: FileSystemResourceLoader },
-                { provide: ElementSchemaRegistry, useClass: NativeScriptElementSchemaRegistry },
+                { provide: ResourceLoader, useClass: FileSystemResourceLoader, deps: [] },
+                { provide: ElementSchemaRegistry, useClass: NativeScriptElementSchemaRegistry, deps: [] },
             ]
         },
         multi: true

nativescript-angular/resource-loader.ts

@@ -12,8 +12,12 @@ const extensionsFallbacks = [
 
 @Injectable()
 export class FileSystemResourceLoader extends ResourceLoader {
-    constructor(private fs: NSFileSystem) {
+    fs: NSFileSystem;
+
+    constructor() {
         super();
+
+        this.fs = new NSFileSystem();
     }
 
     get(url: string): Promise<string> {
@@ -57,7 +61,7 @@ export class FileSystemResourceLoader extends ResourceLoader {
         const candidates = extensionsFallbacks
             .filter(([extension]) => url.endsWith(extension))
             .map(([extension, fallback]) =>
-                 this.replaceExtension(url, extension, fallback));
+                this.replaceExtension(url, extension, fallback));
 
         const resource = candidates.find(candidate => this.fs.fileExists(candidate));
 

nativescript-angular/router/page-router-outlet.ts

@@ -359,13 +359,11 @@ export class PageRouterOutlet implements OnDestroy, OnInit { // tslint:disable-l
         log("Activated route marked as page: " + routeToString(nodeToMark));
     }
 
-    // NOTE: Using private APIs - potential break point!
     private getComponentFactory(
-        activatedRoute: any,
+        activatedRoute: ActivatedRoute,
         loadedResolver: ComponentFactoryResolver
     ): ComponentFactory<any> {
-        const snapshot = activatedRoute._futureSnapshot;
-        const component = <any>snapshot._routeConfig.component;
+        const { component } = activatedRoute.routeConfig;
 
         return loadedResolver ?
             loadedResolver.resolveComponentFactory(component) :