AngularLynx

    Embed in an existing native app

    Already have an iOS or Android app? Show your Angular app as one or more screens inside it, instead of shipping the app that ng build --platform generates.

    This page needs native code

    Embedding means changing your iOS or Android project, in Swift, Objective-C, Kotlin or Java. It's the one place in these docs where you need native knowledge. Work through it with whoever maintains your native app.

    How it fits together

    Your native app adds the Lynx engine, and shows your bundle in a LynxView: a native view that runs a Lynx bundle, like an <iframe> for Lynx content. You place a LynxView in your own screens, as you would any other native view.

    Your native app becomes the host app: the app that loads your bundle and shows it. Build the bundle with plain ng build, as in Build your app.

    Add Lynx to your app

    Lynx's guides cover the native setup:

    The apps ng build --platform generates use Lynx 4.1.0, the version AngularLynx is tested with.

    What your app must do

    Beyond Lynx's own setup, your app has three jobs.

    Load the bundle

    The Lynx engine doesn't fetch bundles itself. Your app gives it a loader that reads them from the app or from the network: a LynxTemplateProvider on iOS, or an AbsTemplateProvider on Android. Lynx's integration guide shows one for each platform.

    Serve static/

    Images and fonts your code imports load from /static/... paths. Either:

    • ship static/ inside your app, and resolve /static/... paths against where you keep it, as the generated apps do; or
    • host it on a server, and set RSpeedy's output.assetPrefix to its URL:
    lynx.config.ts
    import { defineConfig } from '@blotch/angular-lynx-build';

export default defineConfig({
  output: { assetPrefix: 'https://cdn.example.com/my-app/' },
});
    Link XElement, or some elements render nothing

    <input>, <textarea>, <overlay>, <svg>, <blur-view>, <viewpager>, <refresh>, the <scroll-coordinator> family, <webview> and <video> aren't part of Lynx's core. They come from Lynx's XElement library.

    An app that doesn't link XElement and register its elements renders nothing for these tags. On Android, the elements after them can disappear too. Nothing on screen says why.

    • Android: add org.lynxsdk.lynx:xelement, and call addBehaviors(XElementBehaviors().create()) on the LynxViewBuilder.
    • iOS: add the XElement pod.

    Lynx's integration guide has the details. The apps ng build --platform generates already do this, and so does Lynx Explorer.

    Bundled or downloaded

    Your app can ship the bundle inside it, or download it from a server:

    StrategyProsCons
    Bundled: ship it inside the appLoads instantly, works offlineChanging the app needs a store update
    Downloaded: host it on a server/CDNUpdate without a store release, run A/B testsNeeds the network, at least on first launch

    You can combine both: ship a bundle with the app for an instant first launch, then check for a newer one in the background.

    Before you serve updates this way:

    • Match the Lynx version. A bundle only runs on a Lynx engine at least as new as its targetSdkVersion, an AngularLynx plugin option that defaults to 3.2. Every installed version of your app must be able to run what you serve. So raise targetSdkVersion only when every installed version's engine is that new.
    • Check the store rules. Both stores have rules about code an app downloads after review. Read Apple's App Review Guidelines and Google Play's Developer Program Policies before you rely on it.

    Pass data from your app

    Your native app can send values into Angular, such as a signed-in user's ID or the app's theme. See Pass data from your native app.