如何在Nativescript应用程序中创建角度2组件？

Question

我正在使用带有角度2的nativescript。

我想知道如何在Nativescript项目中快速创建ng组件。例如，在Angular 2中创建一个组件，我们使用ng generate component hello。

是否有nativescript cli解决方案？

Answer 1

用于创建NativeScript应用程序的基本命令附带一些预定义模板。要创建基本Angular-2应用程序，您可以使用

tns create myApp --ng

或者您可以像这样创建自己的模板并将其作为参数传递

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

或者，如果您使用VSCode作为IDE进行开发，那么您可以添加this extension

然后它非常直接：右键单击app文件夹>>添加Angular2文件

该命令将提示输入名称并生成以下内容（如果提供的名称为home）

home/home.component.ts
home/home.component.html
home/home.component.css
home/home.component.spec.ts

Answer 2

你可以使用https://github.com/sebawita/nativescript-angular-cli

要生成组件，请运行：

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

要在模块内创建组件，请运行：

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

干杯

Answer 3

如果你使用来自市场的vs代码，你可以使用vs代码扩展：qazxsw poi

Answer 4

2019年更准确的答案（来自https://marketplace.visualstudio.com/items?itemName=wwwalkerrun.nativescript-ng2-snippets包中名为adding-Angular-CLI-to-NativeScript.md的文件）：

Adding Angular CLI to a NativeScript project.

1. 将@nativescript/schematics添加到项目根目录，其中包含以下内容

angular.json

您可以将

{
  "$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"
}

更新为项目的实际名称，但这不是绝对必要的。

2. 安装Angular CLI

my-project-name

3. 安装NativeScript Schematics

npm i --save-dev @angular/cli

您现在可以在NativeScript项目中使用Angular CLI命令：

npm i --save-dev @nativescript/schematics