#@blotch/angular-lynx-build

The Angular CLI builders behind ng build, ng serve and ng test on Lynx. It's the only build dependency your app needs, as @angular/build is for a web app. RSpeedy (the Lynx build tool), the AngularLynx plugin and the native app builder come with it.

#Usage

ng add @blotch/angular-lynx installs it and points your angular.json targets at it:

"architect": {
  "build": {
    "builder": "@blotch/angular-lynx-build:application",
    "options": {
      "browser": "src/main.ts",
      "tsConfig": "tsconfig.app.json"
    }
  },
  "serve": {
    "builder": "@blotch/angular-lynx-build:dev-server"
  },
  "test": {
    "builder": "@blotch/angular-lynx-build:unit-test"
  }
}

They work like Angular's builders:

• Configurations and flags override options, so -c development and --source-map work.
• optimization picks the build. A build that optimizes scripts is a production build. Any other build is a development build, with dev mode on. There's no mode option.

#application

ng build compiles your app into bundles, the files the Lynx engine runs. For a walkthrough, see Build your app.

#Build options

#Angular options

These are Angular's own application builder options, and they work as they do in a web app:

browser, tsConfig, polyfills, styles, inlineStyleLanguage, fileReplacements, aot (default true), sourceMap, outputHashing, i18nMissingTranslation

A few work differently on Lynx:

#Native app options

ng build --platform reads these. Run on iOS and Android and Publish to the app stores explain how to set them.

The signing fields name environment variables, so no secret goes in angular.json. See signing.

#dev-server

ng serve runs RSpeedy's dev server. Lynx Explorer and the web preview load your app from it.

#unit-test

ng test runs Angular's @angular/build:unit-test builder with Vitest. It takes the same options (include, watch, coverage, setupFiles, providersFile, ...). include defaults to both **/*.spec.ts and **/*.test.ts.

For Lynx, it also:

• defines the compile-time flags the AngularLynx runtime reads;
• loads the setup of @blotch/angular-lynx-testing-library when your project has it, so render() works without a setup file;
• loads imported images, fonts and media as file URLs, as RSpeedy does in the app.

It runs your project's own @angular/build, which must match your Angular version. See Testing for writing tests.

#lynx.config.ts

Your app doesn't need one. Without it, the builders configure RSpeedy from angular.json:

Add a lynx.config.ts to the project root to change anything else RSpeedy supports, or to pass the AngularLynx plugin options. Your settings replace the defaults above, except mode, which always follows optimization.

import { defineConfig, pluginAngularLynx } from '@blotch/angular-lynx-build';

export default defineConfig({
  plugins: [pluginAngularLynx({ enableCSSInheritance: true })],
});

The builders use the plugin you list instead of adding their own. Import from @blotch/angular-lynx-build, not @lynx-js/rspeedy or @blotch/rsbuild-plugin-angular-lynx. Those are its dependencies, not your app's, so strict package managers (pnpm, Yarn PnP) can't resolve them.

#Plugin options

pluginAngularLynx() compiles Angular for Lynx. All of its options are optional.

Build

CSS

Gestures and accessibility

Accepted but not used yet

The plugin accepts these options, but doesn't read them yet: defaultOverflowVisible (default true), enableICU (false), enableParallelElement (true) and pipelineSchedulerConfig (65536).

#Without the Angular CLI

To run RSpeedy yourself, install @blotch/rsbuild-plugin-angular-lynx and import the plugin from there. Nothing adds it for you, so list it in lynx.config.ts and set source.entry.

#Exports

#Related

• Build your app
• Run on iOS and Android
• Schematics