How to create angular 2 component into Nativescript Application?

Question

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?

Answer 1

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.

2. Install Angular CLI

npm i --save-dev @angular/cli

3. 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

Answer 2

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