Embedded Nativescript Angular code into existing iOS project, Angular 7 throws Error: Error: A Frame must be used to navigate to a Page

[shankarphadatare]

When i run iOS xcode project with embedded nativescript frameworks and nativescript code, apps gives error when try to show/load nativescript pages into xcode console: Error: Error: A Frame must be used to navigate to a Page.

Below are the my Objective-c Function which starts loading NativeScript pages on iOS button tap event.

Button Tap Event Code in HomeViewController.swift

@IBAction func activateNativeScriptPart(_ sender: Any) {
        let tnsManager = TNSManager.sharedManager() as! TNSManager
        tnsManager._runScript(tnsManager.scriptStringToLoad())
    }

TNSManager.m file's scriptStringToLoad function code

- (NSString*) scriptStringToLoad {
    NSString *source = @"var platform_1 = require('nativescript-angular/platform');"
    "var app_module_1 = require('./app/app.module');"
    "var platform = platform_1.platformNativeScriptDynamic();"
    "platform.bootstrapModule(app_module_1.AppModule);";

    return  source;
}

TNSManager.m file's _runScript function code

- (void)_runScript: (NSString *)source {
    JSValueRef error = NULL;

    JSStringRef script = JSStringCreateWithCFString((__bridge CFStringRef)(source));
    JSEvaluateScript(_runtime.globalContext, script, NULL, NULL, 0, &error);
    JSStringRelease(script);

    if (error) {
        JSStringRef stringifiedError = JSValueToStringCopy(_runtime.globalContext, error, NULL);
        NSLog(@"Error: %@", JSStringCopyCFString(kCFAllocatorDefault, stringifiedError));
        JSStringRelease(stringifiedError);
        return;
    }
}

Below is NativeSctipt part: 1. app.module.ts file code

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

2. app.component.ts file code

import { Component } from "@angular/core";

@Component({ moduleId: module.id, selector: "ns-app", templateUrl: "app.component.html" }) 
export class AppComponent {

onButtonTap() {
    console.log('Hi hello button tapped');
}
}

3. app.component.html file code

<StackLayout > 
<Button text="Button" (tap)="onButtonTap()"></Button> 
<Label class ="backgroundColor" text="Welocme Home"></Label> 
</StackLayout>

Throws error when i click Native iOS button and try to show NativeScript Page. Error is as below. Error: Error: A Frame must be used to navigate to a Page

[zurie]

Can someone please comment on this from the NS team??? We are experiencing the exact same issue with Angular Nativescript + Embedding in IOS. we swap the sample project with a vanilla NS project, it works instantly, swap back to Angular and change the function in the Native IOS app out to bootstrap Angular and it fails again with the exact same error Error: A Frame must be used to navigate to a Page

and our page ONLY contains <page-router-outlet></page-router-outlet>

@tdermendjiev you are the man? any way you can try an Angular7 embed or do you have any ideas on how to fix the Frame must be used error?

[NathanaelA]

@rdlauer @zahhak @NickIliev - I'm not sure who should be tagged for this issue; but apparently NS-Angular apps can't work with this anymore.

[zurie]

The closest thing we've gotten to work (besides Vanilla TS working fine), is telling the bootstrap process to bootInExistingPage: true which doesn't give us a frame error, and actually gives us the Angular is running in the development mode. Call enableProdMode() to enable production mode. console.log, So the angular app starts to work, but when we use the bootInExistingPage, it never actually slides over to a view, it does nothing. Also we are using <page-router-outlet> like we should, so we "shouldn't" be calling bootInExistingPage anyway? correct. I am just trying everything I can to make it work so that was one of my attempts.

[etabakov]

@zurie @shankarphadatare - this was an experimental feature that is not officially supported by the framework. My guess by reading the symptoms is that the latest features in the framework that provide flexibility for the root element of the NS app broke this sample app at some point.

Fixing this sample and providing a reliable story for embedding NativeScript apps into existing native apps is out of the scope of work for the NativeScript team for next releases. Of course, if this is a feature that is important for your project - pull requests are always welcome.

[zurie]

@etabakov can you point me in the right direction regarding your statement? I have been trying to poke around and make something work but haven't had much luck.. It seems like its a simple fix considering the TS version works / the angular version works without the frame, I wonder if someone with more intimate knowledge of the process could give me any insight possible into helping me tackle this one. The documentation is good enough to get it working (on TS) so i think rewriting a story and putting a ton of time fixing this sample isn't necessary but if we found the missing frame issue it would help a lot of people who rely on NativeScript and have chosen angular as their platform.

My guess by reading the symptoms is that the latest features in the framework that provide flexibility for the root element of the NS app broke this sample app at some point.

[shankarphadatare]

@etabakov can you point me in the right direction regarding your statement? I have been trying to poke around and make something work but haven't had much luck.. It seems like its a simple fix considering the TS version works / the angular version works without the frame, I wonder if someone with more intimate knowledge of the process could give me any insight possible into helping me tackle this one. The documentation is good enough to get it working (on TS) so i think rewriting a story and putting a ton of time fixing this sample isn't necessary but if we found the missing frame issue it would help a lot of people who rely on NativeScript and have chosen angular as their platform.

My guess by reading the symptoms is that the latest features in the framework that provide flexibility for the root element of the NS app broke this sample app at some point.

@zurie @etabakov I agree with Zurie if somebody fix frame issue then it would be helpful to the people thinking to use Nativescript platform.

[Kampii]

@zurie @shankarphadatare Guys, did you ever succeed with this? I am trying NS v8 and can't get it to work, the key problem is that I am not able to access the NS runtime from Swift/Objective C.