Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @nativescript/schematics with all npm packages installed. Try it out:

@nativescript/schematics lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("@nativescript/schematics/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@nativescript/schematics v0.7.1

Schematics for NativeScript Angular apps.

NativeScript Schematics Build Status

This repository contains schematics for generating components in NativeScript Angular apps using the Angular CLI.

Installation

Install Angular CLI

You should be using @angular/cli@6.1.0 or newer.

npm i -g @angular/cli

Install NativeScript Schematics

npm i -g @nativescript/schematics

Usage

Creating a new project

To generate new NativeScript Angular project, you can use ng new with @nativescript/schematics specified as the schematics collection.

NativeScript Only

ng new --collection=@nativescript/schematics my-mobile-app

You can specify the following options when generating new applications:

OptionDescriptionDefault
prefixThe prefix to apply to generated selectors.app
themeSpecifies whether the {N} css theme should be included.true
styleSpecifies whether the app should use 'css' or 'scss' files for styling.css
webpackSpecifies whether the app will be ready for building with webpack.true

Web + Mobile Code Sharing project

ng new --collection=@nativescript/schematics my-shared-app --shared

You can specify the following options when generating new applications:

OptionDescriptionDefault
sourceDirThe name of the source directory.src
prefixThe prefix to apply to generated selectors.app
themeSpecifies whether the {N} css theme should be included.true
styleSpecifies whether the app should use 'css' or 'scss' files for styling.css
sampleGenerates an eagerly loaded module and master-detail navigation.false

Prerequisites for using @nativescript/schematics in an existing project

You need to add an angular.json configuration file to your NativeScript project root directory. That will allow you to use Angular CLI for generating components.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "cli": {
    "defaultCollection": "@nativescript/schematics"
  },
  "projects": {
    "project-name": {
      "root": "",
      "sourceRoot": ".",
      "projectType": "application",
      "prefix": "app"
    }
  },
  "defaultProject": "project-name"
}

Note: If you created your project with ng new, your project already has angular.json.

Generate angular.json

You can generate it the configuration using Schematics. Install Schematics globally

npm install -g @angular-devkit/schematics-cli

From inside your project call:

schematics @nativescript/schematics:angular-json --name=project-name

Generating Components, Modules, Directives, etc.

You can use the ng generate (or just ng g) command to generate pretty much any Angular building unit - components, modules, directives, classes and so on. For the full list, check out the Angular CLI repo. Some of these generators are overwritten in NativeScript Schematics to suite the needs of a NativeScript Angular application.

To generate a component, call:

ng g c component-name

To generate a module, call:

ng g m module-name

To generate a component in an existing module folder, call:

ng g c module-name/component-name

Migrating ng Project to a shared project

Migrating Web Components to a Shared Components

You can use ng generate migrate-component to convert a web Component to a shared component. This includes the following steps:

  • add component-name.component.tns.html
  • add the component to its .tns parent module - note that the module-name.module.tns.ts need to exist before you execute the command, or just use the --skipModule flag

Params:

  • name - required - name of the component to be migrated - do not include the word Component
  • componentPath - optional - the location of the component file, do not include src/app, i.e. home/home.component.ts - use if the componentPath cannot be derived from the parent module
  • module - optional - the name of the parent module - do not include the word Module, leave empty if using the default EntryModule (AppModule)
  • modulePath - optional - the location of the parent module file, do not include src/app, i.e. home/home.module.ts - use if the module is not located at the root/app (by default: src/app)
  • skipModule - optional - use if you don't want the module to be used for finding the component, and if you don't want to add the Component to Modules providers

Migrating Web Modules to Shared Modules

You can use ng generate migrate-module to convert a Web Module to a Shared Module and also convert all of its Components. This includes the following steps:

  • add module-name.component.tns.ts
  • convert all of modules' components, by using migrate-component schematic
  • copy over all providers from the web module

Code sharing: Build

In a code sharing project to build:

  • a web app call: ng serve,
  • an iOS app call: tns run ios --bundle,
  • an Android app call: tns run android --bundle

Templates

Master Detail template

To generate a Master Detail module, you can use the following command ng g master-detail --master=dogs --detail=dog

The above command will generate the following file structure

  • dogs
  • dog-detail
    • dog-detail component files
  • dogs
    • dogs component files
  • data.service.ts
  • dogs.module.ts

Options

OptionDescription
masterThe name of the master component and the name of the module.
detailThe name of the detail component
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free