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

Question

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.

- (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;
}

Below is NativeSctipt part:

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 { }

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');
}
```
}
app.component.html file code

My app.component.html has below code <StackLayout > <Button text="Button" (tap)="onButtonTap()"></Button> <Label class ="backgroundColor" text="Welocme Home"></Label> </StackLayout> — Shankar Phadatare
– Shankar Phadatare, Commented Dec 5, 2018 at 18:59
Your app.component.html should only have <page-router-outlet></page-router-outlet> and to build you can use tns build with --bundle flag to enable webpack build and check. You can follow the structure as in this playground sample - play.nativescript.org/?template=play-ng&id=iayuat — Baskar Rao
– Baskar Rao, Commented Dec 6, 2018 at 19:12

Baskar Rao · Accepted Answer · 2018-12-06 19:16:04Z

0

Your app.component.html should only have

<page-router-outlet></page-router-outlet>

and to build you can use tns build with --bundle flag to enable webpack build and check.

You can follow the structure as in this playground sample - play.nativescript.org/?template=play-ng&id=iayuat

answered Dec 6, 2018 at 19:16

Baskar Rao

4704 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shankar Phadatare Over a year ago

My requirement is to push or present Nativescript page into existing iOS project, not to completely make nativescript as starting point for my existing iOS app. I am trying to run into XCode project which has all nativescript framework embedded. <page-router-outlet></page-router-outlet> is only if you want to use router approach but till now i don't want to route anywhere. just want to show nativescript page i.e "app.component.html" into existing iOS app.

Baskar Rao Over a year ago

Ok got it, You can refer to this - nativescript.org/blog/… , but as per NativeScript it is still an experimental approach. Not sure if it completely supported.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related