web-dev-qa-db-ja.com

angular 2コンポーネントをNativescriptアプリケーションに作成する方法は？

angular 2でnativescriptを使用しています。

Nativescriptプロジェクトでngコンポーネントをすばやく作成する方法を知りたいです。たとえば、Angular 2に、使用しているコンポーネントを作成するにはng generate component hello。

そのためのnativescriptcliソリューションはありますか？

angularnativescriptangular2-nativescript
8
3logy

NativeScriptアプリを作成するための基本コマンドには、いくつかの定義済みテンプレートが付属しています。ベースのAngular-2アプリケーションを作成するために使用できます

tns create myApp --ng

または、このような独自のテンプレートを作成して、パラメーターとして渡すこともできます

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

または、開発用のIDE）としてVSCodeを使用している場合は、 この拡張機能 を追加できます。

そして、それは非常に簡単です：アプリフォルダを右クリック>>Angular2ファイルを追加

このコマンドは名前の入力を求め、以下を生成します（指定された名前がhomeの場合）

home/home.component.ts
home/home.component.html
home/home.component.css
home/home.component.spec.ts
4
Nick Iliev

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>

乾杯

6
Mariano Agüero

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
3
Robin De Schepper

マーケットプレイスのvsコードを使用している場合は、vsコード拡張を使用できます： https://marketplace.visualstudio.com/items?itemName=wwwalkerrun.nativescript-ng2-snippets

2
kfir chen

インストールAngular CLI

@ angular/cli @ 6.1.0以降を使用する必要があります。

npm i -g @angular/cli

NativeScript回路図をインストールします

npm i -g @nativescript/schematics

既存のプロジェクトで@ nativescript/schematicsを使用するための前提条件

NativeScriptプロジェクトのルートディレクトリにangular.json構成ファイルを追加する必要があります。これにより、コンポーネントの生成に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を使用して構成を生成できます。

回路図をグローバルにインストールする

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

プロジェクトコールの内部から：

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

コンポーネント、モジュール、ディレクティブなどの生成

Ng generate（または単にng g）コマンドを使用して、ほぼすべてのAngularビルディングユニット-コンポーネント、モジュール、ディレクティブ、クラスなどを生成できます。完全なリストについては、 Angular CLI repo 。

これらのジェネレーターの一部は、NativeScript Angularアプリケーションのニーズに合わせて、NativeScript回路図で上書きされます。

コンポーネントを生成するには、次を呼び出します。

ng g c component-name

モジュールを生成するには、次を呼び出します。

ng g m module-name

既存のモジュールフォルダにコンポーネントを生成するには、次を呼び出します。

ng g c module-name/component-name
0
Lonewolf