Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nativescript/nativescript-schematics

nativescript, mobile, schematics, angular
https://github.com/nativescript/nativescript-schematics

angular angular-cli code-sharing cross-platform monorepo nativescript nativescript-angular schematics typescript

Last synced: about 1 month ago
JSON representation

nativescript, mobile, schematics, angular

Awesome Lists containing this project

README 

        
# NativeScript Schematics  [![Build Status](https://travis-ci.org/NativeScript/nativescript-schematics.svg?branch=master)](https://travis-ci.org/NativeScript/nativescript-schematics)



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



## Installation



### Install Angular CLI



You should be using `@angular/[email protected]` or newer.



```bash

npm i -g @angular/cli

```



### Install NativeScript Schematics

```bash

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



```bash

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

```



You can specify the following options when generating new applications:



| Option | Description | Default

| --- | --- | ---

| prefix | The prefix to apply to generated selectors. | `app`

| theme | Specifies whether the {N} css theme should be included. | `true`

| style | Specifies whether the app should use 'css' or 'scss' files for styling. | `css`

| webpack | Specifies whether the app will be ready for building with webpack. | `true`



#### Web + Mobile Code Sharing project



```bash

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

```



You can specify the following options when generating new applications:



| Option | Description | Default

| --- | --- | ---

| sourceDir | The name of the source directory. | `src`

| prefix | The prefix to apply to generated selectors. | `app`

| theme | Specifies whether the {N} css theme should be included. | `true`

| style | Specifies whether the app should use 'css' or 'scss' files for styling. | `css`

| sample | Generates 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.

```json

{

  "$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",

      "schematics": {

        "@schematics/angular:component": {

          "style": "scss"

        }

      }

    }

  },

  "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`



```bash

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

```



From inside your project call:



```bash

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](https://github.com/angular/angular-cli#generating-components-directives-pipes-and-services).

Some of these generators are overwritten in NativeScript Schematics to suite the needs of a NativeScript Angular application. 



To generate a component, call:

```bash

ng g c component-name

```



To generate a module, call:

```bash

ng g m module-name

```



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

```bash

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`,

 * an `Android` app call: `tns run android`



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



| Option | Description 

| --- | --- 

| master | The name of the master component and the name of the module.

| detail | The name of the detail component