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

Question

我使用带有角度2的nativescript。

我想知道如何在Nativescript项目中快速创建ng组件。 例如，在Angular 2中创建一个我们正在使用@angle.setter def angle(self, angle): self._xf.angle=angle self._transform_updated() 的组件。

是否有针对该问题的nativescript cli解决方案？

Answer 1

您可以使用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 2

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

tns create myApp --ng

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

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

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

然后非常直接：右键点击app文件夹＆gt;＆gt; 添加Angular2文件

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

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

Answer 3

如果您使用vs代码，则可以使用vs代码扩展 来自市场： https://marketplace.visualstudio.com/items?itemName=wwwalkerrun.nativescript-ng2-snippets

Answer 4

安装Angular CLI

您应该使用@ angular / cli @ 6.1.0或更高版本。

npm i -g @angular/cli

安装NativeScript原理图

npm i -g @nativescript/schematics

在现有项目中使用@ nativescript / schematics的前提条件

您需要将angular.json配置文件添加到NativeScript项目根目录。这样一来，您便可以使用Angular CLI生成组件。

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

注意：如果您使用ng new创建了项目，则您的项目已经具有angular.json。

生成angular.json

您可以使用示意图生成配置。

全局安装原理图

npm install -g @angular-devkit/schematics-cli

在您的项目调用中：

schematics @nativescript/schematics:angular-json --name=project-name

生成组件，模块，指令等

您可以使用ng generate（或仅ng g）命令生成几乎所有Angular构建单元-组件，模块，指令，类等。有关完整列表，请查看Angular CLI repo。

其中一些生成器在NativeScript Schematics中被覆盖，以适应NativeScript Angular应用程序的需求。

要生成组件，请致电：

ng g c component-name

要生成模块，请致电：

ng g m module-name

要在现有模块文件夹中生成组件，请致电：

ng g c module-name/component-name

Answer 5

2019年更准确的答案（来自adding-Angular-CLI-to-NativeScript.md包中名为@nativescript/schematics的文件）：

将Angular CLI添加到NativeScript项目中。

1. 将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"
}

您可以将my-project-name更新为项目的实际名称，但这不是绝对必要的。

1. 安装Angular CLI

npm i --save-dev @angular/cli

1. 安装NativeScript原理图

npm i --save-dev @nativescript/schematics

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

ng generate component hello-world