This repository contains schematics for generating components in NativeScript Angular apps using the Angular CLI.
npm i -g @angular/cli
Ideally you should be using version 6.1.0-beta.0
. Do not use 6.1.0-beta.2
, as beta.2
introduced a bug that makes @nativescript/schematics
generate only as subset of the required files.
npm i -g @angular/[email protected]
npm i -g @nativescript/schematics
To generate new NativeScript Angular project, you can use ng new
with @nativescript/schematics
specified as the schematics collection.
ng new --collection=@nativescript/schematics --name=my-mobile-app
You can specify the following options when generating new applications:
Option | Description | Default |
---|---|---|
routing | Generates a routing module and master-detail navigation. | false |
prefix | The prefix to apply to generated selectors. | false |
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 |
minimal | Generates a minimal app (empty template, no theme). | false |
ng new --collection=@nativescript/schematics --name=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 |
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 hasangular.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
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
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 themodule-name
.module.tns.ts need to exist before you execute the command, or just use the--skipModule
flag - add
moduleId: module.id
to the@Component
metadata
Params:
- name -
required
- name of the component to be migrated - do not include the wordComponent
- componentPath -
optional
- the location of the component file, do not includesrc/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 wordModule
, leave empty if using the default EntryModule (AppModule
) - modulePath -
optional
- the location of the parent module file, do not includesrc/app
, i.e.home/home.module.ts
- use if the module is not located at theroot/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
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