This repository contains schematics for generating components in NativeScript Angular apps using the Angular CLI.
You should be using @angular/[email protected] or newer.
npm i -g @angular/clinpm i -g @nativescript/schematicsTo generate new NativeScript Angular project, you can use ng new with @nativescript/schematics specified as the schematics collection.
ng new --collection=@nativescript/schematics my-mobile-appYou 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 |
ng new --collection=@nativescript/schematics my-shared-app --sharedYou 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 |
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",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
}
}
},
"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-cliFrom inside your project call:
schematics @nativescript/schematics:angular-json --name=project-nameYou 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-nameTo generate a module, call:
ng g m module-nameTo generate a component in an existing module folder, call:
ng g c module-name/component-nameYou 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
.tnsparent module - note that themodule-name.module.tns.ts need to exist before you execute the command, or just use the--skipModuleflag
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-componentschematic - copy over all providers from the web module
In a code sharing project to build:
- a
webapp call:ng serve, - an
iOSapp call:tns run ios, - an
Androidapp call:tns run android
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
| Option | Description |
|---|---|
| master | The name of the master component and the name of the module. |
| detail | The name of the detail component |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent