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

Question

我在 angular 2.

中使用 nativescript

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

是否有 nativescript cli 解决方案？

Answer 1

如果你正在使用 vs code，你可以使用 vscode 扩展来自市场： https://marketplace.visualstudio.com/items?itemName=wwwalkerrun.nativescript-ng2-snippets

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

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

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

正在将 Angular CLI 添加到 NativeScript 项目。

在项目根目录添加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 更新为项目的实际名称，但这不是绝对必要的。

安装Angular CLI

npm i --save-dev @angular/cli

安装 NativeScript Schematics

npm i --save-dev @nativescript/schematics

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

ng generate component hello-world

Answer 5

安装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 6

如果出现此错误：An unhandled exception occurred: NOT SUPPORTED: keyword "id", use "$id" for schema ID 运行使用 --skip-import

生成命令

ng g c component-name --skip-import

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

How to create angular 2 component into Nativescript Application?

nativescript

angular2-nativescript

angular

正在将 Angular CLI 添加到 NativeScript 项目。