10

I'm using nativescript with angular 2.

I'm wondering how to rapidly create a ng component in a Nativescript Project. For example into Angular 2 to create a component we are using ng generate component hello.

Is there a nativescript cli solution for that?

mruanova
  • 6,351
  • 6
  • 37
  • 55
3logy
  • 2,634
  • 8
  • 46
  • 99
  • You can look at https://github.com/NativeScript/nativescript-angular/issues/225 – user6801750 Jan 01 '17 at 22:32
  • 1
    is that really what im looking for? I can't see something to create component. – 3logy Jan 01 '17 at 22:43
  • I think my answer should be marked as accepted as it answers your question directly: How can I use `ng generate component` in my NativeScript app. – Robin De Schepper Apr 19 '19 at 14:04
  • I found work solution " With the help of the NativeScript Schematics, you can also reap the benefits of the Angular CLI in your Angular NativeScript projects." https://docs.nativescript.org/angular/tooling/angular-cli#installation And also go follow this https://www.npmjs.com/package/@nativescript/schematics – Likhit Suboonsunti Aug 15 '19 at 18:40

6 Answers6

8

You can use https://github.com/sebawita/nativescript-angular-cli

To generate a component, run:

tns generate component <component-name>
tns g c <component-name>

To create a component inside a module, run:

tns generate component <component-name> <module-name>
tns g c <component-name> <module-name>

Cheers

Mariano Agüero
  • 429
  • 4
  • 4
8

A more accurate answer for 2019 (from a file called adding-Angular-CLI-to-NativeScript.md in the @nativescript/schematics package):

Adding Angular CLI to a NativeScript project.

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

You can update my-project-name to the actual name of your project, but that is not absolutely necessary.

  1. Install Angular CLI
npm i --save-dev @angular/cli
  1. Install NativeScript Schematics
npm i --save-dev @nativescript/schematics

You can now use Angular CLI commands in your NativeScript project:

ng generate component hello-world
Robin De Schepper
  • 4,942
  • 4
  • 35
  • 56
7

The base command for creating a NativeScript app comes with some predefined templates. For creating base Angular-2 Application you can use

tns create myApp --ng

Or you can create your own template like this one and pass it as a param

tns create myApp --template path-to-template-here

Or if you are using VSCode as your IDE for development then you can add the this extension

And then it is pretty straight forward: right click on app folder >> Add Angular2 Files

The command will prompt for a name and will generate the following (if the name provided is home)

home/home.component.ts
home/home.component.html
home/home.component.css
home/home.component.spec.ts
Nick Iliev
  • 9,610
  • 3
  • 35
  • 89
  • Hi @Nick, I am having doubt. I have downloaded my sample [ NS + angular] project from Playground. In that downloaded file, platforms were empty. I have tried to add iOS platform by using, **tns platform add ios** and opened Xcode.proj, **app** folder and **.plist** file were missing. Do u know about this issue? Can u guide me on this? – McDonal_11 Jul 09 '18 at 07:16
  • The link to the vs code extension was very helpful. – Eric Jul 13 '18 at 06:20
4

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

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
Smokey
  • 1,857
  • 6
  • 33
  • 63
2

you can use vs code extention if you are using vs code from the market place: https://marketplace.visualstudio.com/items?itemName=wwwalkerrun.nativescript-ng2-snippets

kfir chen
  • 21
  • 1
-1

If you get this error: An unhandled exception occurred: NOT SUPPORTED: keyword "id", use "$id" for schema ID run generate command with --skip-import

ng g c component-name --skip-import
liezex
  • 1
  • 1