AngularLynx

    Bootstrap

    Start an Angular app on Lynx and register the renderer that draws it. import { bootstrapApplication, provideRenderer, loadLazyBundle } from '@blotch/angular-lynx';

    Usage

    src/main.ts
    import { bootstrapApplication } from '@blotch/angular-lynx';
import { App } from './app/app';
import { appConfig } from './app/app.config';

bootstrapApplication(App, appConfig);
    src/app/app.config.ts
    import {
  type ApplicationConfig,
  provideZonelessChangeDetection,
} from '@angular/core';
import { provideRenderer } from '@blotch/angular-lynx';

export const appConfig: ApplicationConfig = {
  providers: [provideZonelessChangeDetection(), provideRenderer()],
};

    ng add @blotch/angular-lynx writes both files for you.

    API

    bootstrapApplication()

    function bootstrapApplication(
  rootComponent: Type<unknown>,
  options?: ApplicationConfig,
): Promise<ApplicationRef>;

    Starts your app on Lynx. Use it instead of the bootstrapApplication from @angular/platform-browser, which needs a browser DOM.

    • Runs twice. Your bundle starts the app on both the main thread and the background thread. See Threads.
    • Waits for Lynx. On the main thread, it waits until Lynx is ready to render the page.
    • Hot reload. Calling it again destroys the running app first, then starts the new one.
    • Returns the ApplicationRef, as Angular's version does.

    provideRenderer()

    function provideRenderer(): EnvironmentProviders;

    Registers the renderer that turns your templates into Lynx elements. Every app needs it, together with provideZonelessChangeDetection().

    It also provides these Angular tokens:

    TokenValueWhat it means for you
    ErrorHandlerLynxErrorHandlerUncaught errors go to Lynx. See Errors and logging. To replace it, add your own ErrorHandler provider after provideRenderer().
    DOCUMENTA stub whose only method, getElementById(), returns nullThere's no DOM document. Don't query elements through inject(DOCUMENT).
    APP_BASE_HREF'/'The router's base path.
    IMAGE_CONFIG{ disableImageSizeWarning: true, disableImageLazyLoadWarning: true }Angular's image warnings scan the DOM and stop the app from starting. If you provide your own IMAGE_CONFIG, keep both flags true.

    loadLazyBundle()

    function loadLazyBundle(source: string): Promise<Type<unknown>>;

    Loads a component from a separately built Lynx bundle at runtime.

    ParameterTypeDescription
    sourcestringURL of the .lynx.bundle file.
    • Resolves with the bundle's default export, or with all its exports when it has no default.
    • Caches by source: repeat calls return the same promise.
    • On the background thread, it rejects when the bundle fails to load or run.
    • On the main thread, it loads synchronously. If loading fails, the promise never settles and the component doesn't appear.
    • Rejects when Lynx's bundle loader isn't available, such as in unit tests.
    src/app/app.routes.ts
    import type { Routes } from '@angular/router';
import { loadLazyBundle } from '@blotch/angular-lynx';

export const routes: Routes = [
  {
    path: 'profile',
    loadComponent: () =>
      loadLazyBundle('https://example.com/profile.lynx.bundle'),
  },
];
    Experimental

    Lazy routes with import() and @defer blocks don't need loadLazyBundle(). The build includes their code for you. These docs don't yet cover how to build a standalone component bundle.

    Types

    This page uses only Angular types: ApplicationConfig, ApplicationRef, EnvironmentProviders and Type from @angular/core.