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?

Velours

You can look at github.com/NativeScript/nativescript-angular/issues/225 – Terramycin

is that really what im looking for? I can't see something to create component. – Velours

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. – Killjoy

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." docs.nativescript.org/angular/tooling/angular-cli#installation And also go follow this npmjs.com/package/@nativescript/schematics – Bankhead

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

Killjoy

follow this same npmjs.com/package/@nativescript/schematics – Bankhead

This made things easy for me – Hydrogenize

For me it gives error: An unhandled exception occurred: NOT SUPPORTED: keyword "id", use "$id" for schema ID – Matterhorn

Answer 2

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

Kaka

Answer 3

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

Luedtke

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? – Waybill

The link to the vs code extension was very helpful. – Sequence

Answer 4

Install Angular CLI

You should be using @angular/[email protected] 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

Hydrogenize

Answer 5

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

Deportee

Answer 6

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

Betwixt