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?

You can look at github.com/NativeScript/nativescript-angular/issues/225 — user6801750
– user6801750, Commented Jan 1, 2017 at 22:32
is that really what im looking for? I can't see something to create component. — 3logy
– 3logy, Commented Jan 1, 2017 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
– Robin De Schepper, Commented Apr 19, 2019 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." docs.nativescript.org/angular/tooling/angular-cli#installation And also go follow this npmjs.com/package/@nativescript/schematics — Likhit Suboonsunti
– Likhit Suboonsunti, Commented Aug 15, 2019 at 18:40

Robin De Schepper · Accepted Answer · 2019-04-19 14:02:25Z

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.

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.

Install Angular CLI

npm i --save-dev @angular/cli

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

answered Apr 19, 2019 at 14:02

Robin De Schepper

6,5245 gold badges44 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Likhit Suboonsunti Over a year ago

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

Smokey Over a year ago

This made things easy for me

Ricky Levi Over a year ago

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

Ricky Levi Dec 20, 2024 at 16:29

now @nativescript/schematics link is giving: This package has been deprecated one thing I don't understand, is why all NS docs's links are always broken ... huge mess with their docs ...

Mariano Agüero · Accepted Answer · 2017-11-30 18:37:15Z

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

answered Nov 30, 2017 at 18:37

Mariano Agüero

4494 silver badges4 bronze badges

Comments

Nick Iliev · Accepted Answer · 2017-01-03 13:29:46Z

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

answered Jan 3, 2017 at 13:29

Nick Iliev

9,6703 gold badges38 silver badges94 bronze badges

2 Comments

McDonal_11 Over a year ago

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?

Eric Over a year ago

The link to the vs code extension was very helpful.

Smokey · Accepted Answer · 2019-10-09 10:04:10Z

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

kfir chen · Accepted Answer · 2017-01-02 23:57:57Z

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

answered Jan 2, 2017 at 23:57

kfir chen

211 bronze badge

Comments

liezex · Accepted Answer · 2022-03-10 11:59:16Z

-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

answered Mar 10, 2022 at 11:59

liezex

11 bronze badge

Collectives™ on Stack Overflow

How to create angular 2 component into Nativescript Application?

6 Answers 6

Adding Angular CLI to a NativeScript project.

4 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Adding Angular CLI to a NativeScript project.

4 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related