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

Question

我正在使用 angular 2 的 nativescript。

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

是否有针对此的 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

然后很简单：右键单击应用文件夹>> 添加 Angular2 文件

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

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

Answer 3

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

将 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 Schematics

npm i --save-dev @nativescript/schematics

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

ng generate component hello-world

Answer 4

安装 Angular CLI

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

npm i -g @angular/cli

安装 NativeScript Schematics

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

您可以使用 Schematics 生成配置。

全局安装 Schematics

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

如果你使用的是 vs 代码，你可以使用 vs 代码扩展 从市场： https://marketplace.visualstudio.com/items?itemName=wwwalkerrun.nativescript-ng2-snippets