NathanWalker

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

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

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

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

// 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

/**
 * {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') {

NathanWalker

/**
 * Add this to your app's SharedModule declarations
 */

import { Directive, ElementRef, Input } from '@angular/core';

// nativescript
import { View } from 'tns-core-modules/ui/core/view';
import { Animation, AnimationDefinition } from 'tns-core-modules/ui/animation';