Integrations on AngularTS

Choose an integration

Mon, 01 Jan 0001 00:00:00 +0000

What stays the same

An integration changes the language used to register AngularTS features. It does not introduce a second module system or component lifecycle. Modules, injection, components, directives, scopes, templates, and services behave the same way.

Choose by language

Use the binding for the language that produces your client-side code:

Closure JavaScript uses the extern file from the npm package.
ClojureScript, Java/J2CL, and Scala.js use Maven Central artifacts.
Dart uses pub.dev.
Gleam uses Hex.
Kotlin and the WebAssembly languages currently use source dependencies.

Every integration still needs @angular-wave/angular.ts on the page. Load it once and keep its version equal to the language binding version.

Integration example projects

Mon, 01 Jan 0001 00:00:00 +0000

Use these projects when starting an application. Each one keeps the dependency, compiler configuration, AngularTS registration, page, and build output in one place.

Integration	Example
Closure Compiler	`integrations/closure/demo`
ClojureScript	`integrations/closure/clojurescript/demo`
Java/J2CL	`integrations/closure/java/demo`
Kotlin/JS	`integrations/kotlin/examples/basic_app`
Scala.js	`integrations/scala/examples/basic_app`
Dart	`integrations/dart/example/basic_app`
Gleam	`integrations/gleam/examples/basic_app`
HarmonyOS	`integrations/harmonyos/entry`
AssemblyScript	`integrations/wasm/assemblyscript/examples/todo`
C	`integrations/wasm/c/examples/todo`
C++	`integrations/wasm/cpp/examples/todo`
C#/.NET	`integrations/wasm/csharp/examples/todo`
Go	`integrations/wasm/go/examples/basic_app`
Rust	`integrations/wasm/rust/examples/basic_app`
Zig	`integrations/wasm/zig/examples/todo`

Copy the project structure that matches your language, then replace the todo model and markup one feature at a time.

Closure Compiler

Mon, 01 Jan 0001 00:00:00 +0000

Closure Compiler optimizes your JavaScript. AngularTS stays outside that output, and its extern file tells Closure which public names must not be renamed.

Install

Install @angular-wave/angular.ts and Closure Compiler in the application. Pass dist/externs/angular.js from the npm package to Closure, and compile the production output with ADVANCED optimization.

Load dist/angular-ts.umd.min.js before the compiled application file:

<script src="/node_modules/@angular-wave/angular.ts/dist/angular-ts.umd.min.js"></script>
<script src="/dist/application.js"></script>

Production guidance

Treat the packaged extern as part of the AngularTS version; do not edit it.
Promote Closure warnings to errors.
Keep AngularTS external so the page loads only one runtime.
Use documented public APIs so Closure can preserve every accessed member.
Test the ADVANCED output, not only uncompiled source.

Complete example

Use integrations/closure/demo as a complete todo project, or browse all integration examples.

ClojureScript

Mon, 01 Jan 0001 00:00:00 +0000

The angular-ts-cljs Maven artifact provides the angular-ts.core API and the Closure externs needed by an optimized ClojureScript build. Keep it on the same version as the AngularTS runtime loaded by the page.

Before you start

Install Java 21, Node.js, and Shadow CLJS. Create a project with src/main/todo/app.cljs, shadow-cljs.edn, and an HTML entry page.

Configure Shadow CLJS

Add the Maven artifact and tell Closure where the packaged extern file is:

Java and J2CL

Mon, 01 Jan 0001 00:00:00 +0000

J2CL compiles Java to JavaScript. The angular-ts-java artifact supplies typed JsInterop bindings and an annotation processor; @angular-wave/angular.ts supplies the browser runtime. Keep both on the same version.

The Maven artifact includes the Java sources and AngularTS externs required by J2CL. Your application only generates and passes its own template extern.

Before you start

Install JDK 21, Maven, and Node.js. Create a Maven project with src/main/java for Java sources and a directory for the page that loads the compiled output.

Kotlin/JS

Mon, 01 Jan 0001 00:00:00 +0000

The Kotlin integration provides typed access to AngularTS modules, injection, components, directives, services, and scopes.

Add the binding

The Kotlin binding is currently distributed as source. Add integrations/kotlin as a Gradle project dependency and use integrations/kotlin/examples/basic_app as the application structure. Enable a Kotlin/JS IR browser target with an executable binary.

Load the matching @angular-wave/angular.ts runtime before the Kotlin/JS output.

Guidance

Use typed injection tokens and explicit dependency order.
Prefer Kotlin wrappers over dynamic JavaScript access.
Keep JavaScript conversion at the edge of the application.
Build and test the optimized Kotlin/JS output used in deployment.

Complete example

Use integrations/kotlin/examples/basic_app as a complete Gradle project. integrations/kotlin/examples/web_components shows custom elements. See all integration examples.

Android

Mon, 01 Jan 0001 00:00:00 +0000

Angular Native keeps the server and HTML in charge of most screens. Android owns navigation, system access, and any controls that need native behavior. You can move one control or one destination to native UI without turning the whole application into a client-rendered app.

Add the Android packages

Use the same version as @angular-wave/angular.ts:

dependencies {
 implementation("io.github.angular-wave:angular-native-core:Version: 0.37.0
")
 implementation("io.github.angular-wave:angular-native-navigation:Version: 0.37.0
")
}

Add angular-native-browser only when external HTTP links should open in Android Custom Tabs:

HarmonyOS

Mon, 01 Jan 0001 00:00:00 +0000

Angular Native keeps HTML and the server in charge of the application. The HarmonyOS shell owns navigation, system access, and controls that need ArkUI. The same page continues to work in a normal browser because native elements keep their HTML fallback.

All shared native elements and capabilities have HarmonyOS providers and portable tests. The packages are not production releases until the official API 26 build, device evidence, and public OHPM consumer checks pass.

Scala.js

Mon, 01 Jan 0001 00:00:00 +0000

The Scala artifact provides typed facades and idiomatic builders. Scala.js links the application; @angular-wave/angular.ts remains the browser runtime. Keep the Maven and npm versions equal.

Before you start

Install JDK 21, sbt, and Node.js. Start with project/plugins.sbt, build.sbt, src/main/scala, and an HTML entry page.

Enable Scala.js

Add the Scala.js plugin:

addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.17.0")

Enable the plugin and add the facade with %%%. sbt expands the standard Scala.js and Scala binary suffixes automatically.

Dart

Mon, 01 Jan 0001 00:00:00 +0000

The angular_ts package gives Dart code typed access to AngularTS modules, injection, components, directives, services, and scopes.

Install

Add the facade and Web API package:

dart pub add angular_ts web

Compile the entry point:

dart compile js web/main.dart -o web/main.dart.js

Load @angular-wave/angular.ts before main.dart.js, keep both packages on the same version, and serve the page over HTTP. The package page contains a complete first component.

Guidance

Use typed tokens and inject0 through inject8 for dependencies.
Expose template-facing controllers with @JSExport() and createJSInteropWrapper().
Keep JavaScript conversion at the edge of the application.
Test the compiled JavaScript in a real page.

Complete example

Use integrations/dart/example/basic_app as a complete todo project, or browse all integration examples.

Gleam

Mon, 01 Jan 0001 00:00:00 +0000

The angular_ts package supplies typed Gleam functions for modules, dependency injection, components, and application startup.

Install

gleam add angular_ts

Build with gleam build --target javascript. Load the matching @angular-wave/angular.ts runtime before the generated application script and serve the page over HTTP.

Guidance

Keep foreign JavaScript functions at the edge of the application.
Prefer typed package functions over untyped JavaScript values.
Keep the Gleam package and AngularTS runtime on the same version.
Test the generated JavaScript in a real page.

Complete example

Use integrations/gleam/examples/basic_app for a component, injected store, and custom element, or browse all integration examples.

AssemblyScript WebAssembly

Mon, 01 Jan 0001 00:00:00 +0000

AngularTS owns the page while AssemblyScript handles domain logic in a Wasm module.

Add the binding

The binding is distributed as source. Import integrations/wasm/assemblyscript/src/angular_ts.ts, compile the guest with AssemblyScript’s incremental runtime and exported runtime helpers, then load the result through app.wasm(...).

The host adapter binds the guest to a scope and releases it when that scope is destroyed.

Guidance

Use typed fields for values exchanged with AngularTS.
Batch related writes into one update.
Copy transient data across the ABI instead of retaining host buffers.
Keep durable shared state in AngularTS models.

Complete example

Use integrations/wasm/assemblyscript/examples/todo, or browse all integration examples.

C WebAssembly

Mon, 01 Jan 0001 00:00:00 +0000

AngularTS owns the page while C handles domain logic in a Wasm module.

Add the binding

The binding is distributed as source. Add include/angular_ts_wasm.h and src/angular_ts_wasm.c to the guest, include the typed field contract used by the feature, and compile for wasm32-freestanding without an entry point.

Load the result through app.wasm(...) and bind it to the component scope from the host adapter.

Guidance

Release every owned result and cancel watches before freeing callback state.
Never retain temporary host buffers.
Apply related field changes through one update.
Keep durable shared state in AngularTS models.

Complete example

Use integrations/wasm/c/examples/todo, or browse all integration examples.

C++ WebAssembly

Mon, 01 Jan 0001 00:00:00 +0000

AngularTS owns the page while C++ handles domain logic in a Wasm module.

Add the binding

The binding is distributed as source and is header-only. Add integrations/wasm/cpp/include to the compiler search path, include angular_ts/wasm.hpp, and compile for wasm32-wasi without an entry point.

Load the result through app.wasm(...) and bind it to the component scope from the host adapter.

Guidance

Use the C++ scope, watch, and owned result wrappers instead of raw handles.
Keep browser objects out of guest state.
Group related field changes in one transaction.
Keep durable shared state in AngularTS models.

Complete example

Use integrations/wasm/cpp/examples/todo, or browse all integration examples.

C# and .NET WebAssembly

Mon, 01 Jan 0001 00:00:00 +0000

AngularTS owns the page while C# handles domain logic in a .NET Wasm module.

Add the binding

The binding is distributed as source. Install .NET 8 and the wasm-tools workload, add a project reference to integrations/wasm/csharp/src/AngularTs.Wasm.csproj, and publish the application for browser-wasm.

dotnet workload install wasm-tools
dotnet publish -c Release -r browser-wasm

The host adapter initializes .NET with the AngularTS imports and binds the guest to a scope.

Go WebAssembly

Mon, 01 Jan 0001 00:00:00 +0000

AngularTS owns the page while Go handles domain logic in a Wasm module.

Add the binding

The binding is distributed as source. Point go.mod at integrations/wasm/go, generate the application’s AngularTS metadata, compile for js/wasm, and place Go’s wasm_exec.js beside the output.

go generate ./...
GOOS=js GOARCH=wasm go build -o main.wasm .
cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .

Load the generated AngularTS bootstrap module from the page.

Guidance

Keep callback wrappers reachable while AngularTS owns them.
Release watches when their scope is destroyed.
Batch related scope updates.
Keep durable shared state in AngularTS models.

Complete example

Use integrations/wasm/go/examples/basic_app, or browse all integration examples.

Rust WebAssembly

Mon, 01 Jan 0001 00:00:00 +0000

AngularTS owns the page while Rust handles domain logic and services in a Wasm module.

Add the binding

The binding is distributed as source. Add integrations/wasm/rust/crates/angular-ts as a path dependency, install the wasm32-unknown-unknown target and wasm-bindgen-cli, then compile the guest and generate its Web loader.

cargo build --target wasm32-unknown-unknown
wasm-bindgen target/wasm32-unknown-unknown/debug/app.wasm \
 --target web \
 --out-dir pkg

Initialize the generated module before bootstrapping AngularTS.

Guidance

Use typed fields instead of raw paths.
Propagate contract and decode failures.
Keep watch guards for exactly as long as the subscription is needed.
Keep durable shared state in AngularTS models.

Complete examples

Use integrations/wasm/rust/examples/basic_app for application registration and integrations/wasm/rust/examples/scope_bridge for direct scope exchange. See all integration examples.

Zig WebAssembly

Mon, 01 Jan 0001 00:00:00 +0000

AngularTS owns the page while Zig handles domain logic in a Wasm module.

Add the binding

The binding is distributed as source. Add integrations/wasm/zig/src/angular_ts.zig as an angular-ts module and compile the guest for wasm32-freestanding without an entry point.

Load the result through app.wasm(...) and bind it to the component scope from the host adapter.

Guidance

Call deinit() for owned decoded results and watch registrations.
Use allocator-aware decoding only when the application needs custom ownership.
Apply related field changes through one update.
Keep durable shared state in AngularTS models.

Complete example

Use integrations/wasm/zig/examples/todo, or browse all integration examples.