chore: cleanup

Author: NathanWalker

e2e/animation-examples/app/main.ts

@@ -85,7 +85,7 @@ class LaunchAnimation extends GridLayout implements AppLaunchView {
       })
       .then(() => {
         // done with animation, can safely remove to reveal bootstrapped app
-        (<any>this).removeChild(this.animatedContainer);
+        this.removeChild(this.animatedContainer);
         this.animatedContainer = null;
         this.circle = null;
         if (this.resolve) {

e2e/animation-examples/tsconfig.json

@@ -2,6 +2,7 @@
     "compilerOptions": {
         "module": "ESNext",
         "target": "es2015",
+        "moduleResolution": "node",
         "experimentalDecorators": true,
         "emitDecoratorMetadata": true,
         "noEmitHelpers": true,

e2e/tests-app-ng/app/main/main-page-router-outlet.ts

@@ -58,6 +58,6 @@ export class MainComponent {
 
 @Component({
     selector: "navigation-main",
-    template: `<page-router-outlet></page-router-outlet>`
+    template: `<GridLayout><page-router-outlet></page-router-outlet></GridLayout>`
 })
 export class NavigationMainPageRouterComponent { }

nativescript-angular/app-host-view.ts

@@ -42,3 +42,18 @@ export class AppHostView extends ContentView {
 		}
 	}
 }
+
+export class AppHostLaunchAnimationView extends GridLayout {
+	constructor(backgroundColor: Color) {
+		super();
+		this.backgroundColor = backgroundColor;
+	}
+
+	get ngAppRoot(): View {
+		return this;
+	}
+
+	set ngAppRoot(value: View) {
+		// ignored
+	}
+}

nativescript-angular/element-registry.ts

@@ -1,5 +1,8 @@
 import { View, LayoutBase, Page, Frame, AbsoluteLayout, ActivityIndicator, BottomNavigation, Button, ContentView, DatePicker, DockLayout, GridLayout, HtmlView, Image, Label, ListPicker, ListView, Placeholder, Progress, ProxyViewContainer, Repeater, ScrollView, SearchBar, SegmentedBar, SegmentedBarItem, Slider, StackLayout, FlexboxLayout, Switch, TabView, TabStrip, TabStripItem, TabContentItem, Tabs, TextField, TextView, TimePicker, WebView, WrapLayout, FormattedString, Span } from '@nativescript/core';
 
+export interface ViewClass {
+	new (): View;
+}
 export interface ViewExtensions {
 	meta: ViewClassMeta;
 	nodeType: number;
@@ -13,10 +16,6 @@ export interface ViewExtensions {
 
 export type NgView = View & ViewExtensions;
 
-export interface ViewClass {
-	new (): View;
-}
-
 export abstract class InvisibleNode extends View implements NgView {
 	meta: { skipAddToDom: boolean };
 	nodeType: number;
@@ -87,20 +86,20 @@ export function isInvisibleNode(view: any): view is InvisibleNode {
 	return view instanceof InvisibleNode;
 }
 
-export type ViewResolver = () => ViewClass;
+export type ViewResolver = () => any;
 
 const elementMap = new Map<string, { resolver: ViewResolver; meta?: ViewClassMeta }>();
 const camelCaseSplit = /([a-z0-9])([A-Z])/g;
 const defaultViewMeta: ViewClassMeta = { skipAddToDom: false };
 
 export function registerElement(elementName: string, resolver: ViewResolver, meta?: ViewClassMeta): void {
-	const entry = { resolver: resolver, meta: meta };
+	const entry = { resolver, meta };
 	elementMap.set(elementName, entry);
 	elementMap.set(elementName.toLowerCase(), entry);
 	elementMap.set(elementName.replace(camelCaseSplit, '$1-$2').toLowerCase(), entry);
 }
 
-export function getViewClass(elementName: string): ViewClass {
+export function getViewClass(elementName: string): any {
 	const entry = elementMap.get(elementName) || elementMap.get(elementName.toLowerCase());
 	if (!entry) {
 		throw new TypeError(`No known component for element ${elementName}.`);

nativescript-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/angular",
-  "version": "10.0.0-rc.6",
+  "version": "10.0.0-rc.7",
   "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",

nativescript-angular/platform-common.ts

@@ -7,7 +7,7 @@ import { DOCUMENT } from '@angular/common';
 
 import { NativeScriptDebug } from './trace';
 import { defaultPageFactoryProvider, setRootPage, PageFactory, PAGE_FACTORY, getRootPage } from './platform-providers';
-import { AppHostView } from './app-host-view';
+import { AppHostView, AppHostLaunchAnimationView } from './app-host-view';
 
 export const onBeforeLivesync = new EventEmitter<NgModuleRef<any>>();
 export const onAfterLivesync = new EventEmitter<{
@@ -161,7 +161,6 @@ export class NativeScriptPlatformRef extends PlatformRef {
 	@profile
 	private bootstrapNativeScriptApp() {
 		let rootContent: View;
-		let launchView: AppLaunchView;
 
 		if (NativeScriptDebug.isLogEnabled()) {
 			NativeScriptDebug.bootstrapLog('NativeScriptPlatform bootstrap started.');
@@ -172,12 +171,13 @@ export class NativeScriptPlatformRef extends PlatformRef {
 			}
 
 			let tempAppHostView: AppHostView;
-			let usingCustomLaunchView = false;
+			let animatedHostView: AppHostLaunchAnimationView;
 			if (this.appOptions && this.appOptions.launchView) {
-				launchView = this.appOptions.launchView;
-				usingCustomLaunchView = true;
-				rootContent = launchView;
-				setRootPage(<any>rootContent);
+				animatedHostView = new AppHostLaunchAnimationView(new Color(this.appOptions && this.appOptions.backgroundColor ? this.appOptions.backgroundColor : '#fff'));
+				this.appOptions.launchView.style.zIndex = 1000;
+				animatedHostView.addChild(this.appOptions.launchView);
+				rootContent = animatedHostView.ngAppRoot;
+				setRootPage(<any>animatedHostView);
 			} else {
 				// Create a temp page for root of the renderer
 				tempAppHostView = new AppHostView(new Color(this.appOptions && this.appOptions.backgroundColor ? this.appOptions.backgroundColor : '#fff'));
@@ -193,20 +193,11 @@ export class NativeScriptPlatformRef extends PlatformRef {
 							NativeScriptDebug.bootstrapLog(`Angular bootstrap bootstrap done. uptime: ${profilingUptime()}`);
 						}
 
-						if (launchView && launchView.cleanup) {
-							// cleanup any custom launch views
-							launchView.cleanup().then(() => {
-								// swap launchView with actual booted view
-								// todo: experiment in Angular 11 with a setup like this
-								// Application.resetRootView({
-								//   create: () => {
-								//     // const { page, frame } = this.createFrameAndPage(false);
-								//     // frame._addView(launchView.getChildAt(0));
-								//     const rootView = launchView.getChildAt(0);
-								//     // launchView.parent._removeView(launchView);
-								//     return rootView;//launchView.getChildAt(0);//page;
-								//   },
-								// });
+						if (this.appOptions.launchView && this.appOptions.launchView.cleanup) {
+							this.appOptions.launchView.cleanup().then(() => {
+								// cleanup any custom launch views
+								animatedHostView.removeChild(this.appOptions.launchView);
+								this.appOptions.launchView = null;
 							});
 						} else {
 							rootContent = tempAppHostView.content;
@@ -236,19 +227,15 @@ export class NativeScriptPlatformRef extends PlatformRef {
 				}
 			};
 
-			if (usingCustomLaunchView) {
-				// Since custom LaunchView could engage with animations, Launch Angular app on next tick
+			if (this.appOptions && this.appOptions.launchView && this.appOptions.launchView.startAnimation) {
+				// start animations on next tick (after initial boot)
 				setTimeout(() => {
-					if (this.appOptions.launchView.startAnimation) {
-						// ensure launch animation is executed after launchView added to view stack
-						this.appOptions.launchView.startAnimation();
-					}
-					bootstrap();
+					// ensure launch animation is executed after launchView added to view stack
+					this.appOptions.launchView.startAnimation();
 				});
-			} else {
-				bootstrap();
 			}
-			if (!bootstrapPromiseCompleted && !usingCustomLaunchView) {
+			bootstrap();
+			if (!bootstrapPromiseCompleted) {
 				const errorMessage = "Bootstrap promise didn't resolve";
 				if (NativeScriptDebug.isLogEnabled()) {
 					NativeScriptDebug.bootstrapLogError(errorMessage);