NathanWalker

@NgModule({
 imports: [NativeScriptModule],
})
export class BackgroundModule {
 ngDoBootstrap() {
   // do nothing, this is not an UI module
 }
}
 
const moduleRefPromise = platformNativeScript().bootstrapModule(AppModule);

NathanWalker

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
 
// locate the app-root and bootstrap the component in it's place
platformBrowserDynamic()
 .bootstrapModule(AppModule)
 .catch((err) => console.error(err));

NathanWalker

import {
 platformNativeScript,
 runNativeScriptAngularApp,
} from "@nativescript/angular";
import { AppModule } from "./app/app.module";
 
// runs the NativeScript application, nothing is bootstrapped yet, as we're only setting up the platform and callbacks
runNativeScriptAngularApp({
 // this function will be called when we need to display the application UI
 // a major difference from the web is that this module may be destroyed when the user leaves the application and recreated when the user opens it again

NathanWalker

package io.nstudio.ui

import android.animation.ValueAnimator
import android.animation.ValueAnimator.AnimatorUpdateListener
import android.annotation.TargetApi
import android.content.Context
import android.content.res.TypedArray
import android.graphics.Color
import android.graphics.RectF
import android.graphics.Canvas

NathanWalker

// pseudo code using angular flavor as example

@Injectable({ providedIn: 'root' })
export class SomeHttpInterceptor implements HttpInterceptor {
  _mobileOffline = new MobileOffline();

  constructor(private mobileStorage: MobileAPIStorageService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (!this._mobileOffline.isOnline) {

NathanWalker

1. Install the latest NativeScript cli (7.x.x)

npm i -g nativescript

2. Choose A or B depending on your use case:

A) Starting a new Angular web project and adding {N} to it afterwards:

NathanWalker

/**
 * {N} 7 uses es2017 targeting
 * @NativeClass decorator transforms native class extensions to work with iOS/Android runtimes
 * When used in a single file by itself, the transformation modifies the esm export syntax
 * Without any other esm exports in the file, you will want to export the symbol at bottom explicitly
 * This will ensure a proper esm export of your extended native class symbol will work as expected.
 */

@NativeClass()
class MyNativeClassExt extends NSObject {

NathanWalker

const { join, relative, resolve, sep, dirname } = require('path');

const webpack = require('webpack');
const nsWebpack = require('nativescript-dev-webpack');
const nativescriptTarget = require('nativescript-dev-webpack/nativescript-target');
const {
  nsReplaceBootstrap
} = require('nativescript-dev-webpack/transformers/ns-replace-bootstrap');
const {
  nsReplaceLazyLoader

NathanWalker

// /xplat/nativescript/core/core.module.ts

import { MobileStorageService } from './services/mobile-storage.service';
// Add this to providers, for example:

@NgModule({
  imports: [
    NativeScriptModule,
    ...
    CoreModule.forRoot([

NathanWalker

export function fixAndroidScrollMomentum(listview: ListView) {
  if (android.os.Build.VERSION.SDK_INT !== 28) {
    return;
  }
  // suppress the default momentum behaviour
  listview.android.setVelocityScale(0);
  // stores the last 5 move events in this array
  let lastMoveEvents = [];
  (<any>listview).on(GestureTypes.touch, (args, b) => {
    if (args.action === 'up') {