How can i embed an NativeScript Angular app in iOS / Android and navigate to certain routes from the existing app

Question

We are looking to integrate NativeScript Angular into existing iOS and Android apps. We would like to have existing menus in our app be able to route to sections of the NS Angular app. /home /contact for example. One of our concerns with embedding an NS Angular app is the large overhead for frameworks / vendor files / etc and having to duplicate these sections over and over for multiple embedded apps. We would rather have one NS Angular app that contains various views and be able to navigate to those views as the starting view based on the initial link tapped in the previous Native app that hosts the embed.

Has anyone achieved this already and can share some examples or any info that would help? Would sending a variable from the native app to the embedded NS Angular app that routes be on option?

in https://github.com/NativeScript/sample-ios-embedded/blob/master/HOWTO.md there is mention of _runScript

- (void)activateNativeScript:(id)sender {
NSString *source = @"var application = require('application');"
"application.start({ moduleName: 'main-page' });";

[self _runScript: source];
}

Would we be able to send routes through _runScript or possibly initialize various sections but still maintain the same vendor bundle.js ?

thanks!

Answer 1

I don't think you could access Angular from outside Angular context. A workaround could be, store the RouterExtensions reference on global variable while your appcomponent.ts is initiated,

export class AppComponent {
    constructor(private routerExtensions: RouterExtensions) {
       (<any>global)._routerExtensions = routerExtensions;
    }
}

You may do this with _runScript then

NSString *source = @"global._routerExtensions.navigate([...])";

But make sure you access _routerExtensions once it's initialised. Also the code to start Angular app is slightly different, you will find it in the same docs if you go down a little further.

- (void)activateNativeScript:(id)sender {
    NSString *source = @"var platform = require('nativescript-angular/platform');"
         "var AppModule = require('./app.module' });"
         "platform.platformNativeScriptDynamic().bootstrapModule(AppModule);";

    [self _runScript: source];
}