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:

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

Answer 1

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