Comment générer des composants dans un dossier spécifique avec angular-cli?


223

J'utilise angualr4 avec angular-cli et je peux créer un nouveau composant avec la commande suivante.

E:\HiddenWords>ng generate component plainsight

Mais je dois générer un composant enfant à l'intérieur de Plainsight. Existe-t-il un moyen de faire avec angular-cli?


15
ng générer le composant votre / chemin / depuis / le / app / dossier / plainsight
maxime1992

4
comme @Maxime l'a mentionné, ou cd dans le répertoire
Z. Bagley

Réponses:


125

Le ng g component plainsight/some-namecrée un nouveau répertoire lorsque nous l'utilisons.

Le résultat final sera:

plainsight/some-name/some-name.component.ts

Pour éviter cela, utilisez l' option plate ng g component plainsight/some-name --flat et il générera les fichiers sans créer de nouveau dossier

plainsight/some-name.component.ts

12
l'option --flat est ce que je cherchais!
mésaventure du

1
@ user3611927 --flat est la réponse, car il utilisera les dossiers existants et ne fera que des dossiers qui n'existent pas. Parfait!! Cela devrait être le comportement par défaut à mon humble avis
Andrew Day

41

Méthode rapide, simple et sans erreur

c'est-à-dire que vous souhaitez créer un composant dans un app/componentdossier, puis suivez ces étapes

  1. Faites un clic droit sur le dossier dans lequel vous souhaitez créer un composant
  2. Sélectionnez une Open in Command Promptoption
  3. Dans le nouveau terminal (vous verrez votre chemin sélectionné), puis tapez ng g c my-new-component

Vous pouvez également vérifier ce processus à travers cette image

entrez la description de l'image ici


1
Tu es un génie ou je suis juste un fokin stupide ... Le meilleur moyen qui soit!
Ap0st0l

19

ng g c component-name

Pour spécifier un emplacement personnalisé: ng g c specific-folder/component-name

ici component-namesera créé dans un dossier spécifique.

Approche Similarl peut être utilisé pour générer d' autres composants comme directive, pipe, service, class, guard, interface, enum, module, etc.


12

code plus court pour générer le composant: ng g c component-name
pour spécifier son emplacement:ng g c specific-folder/component-name


Informations
supplémentaires code plus court pour générer la directive: ng g d directive-name
pour spécifier son emplacement:ng g d specific-folder/directive-name



4

Les options ci-dessus ne fonctionnaient pas pour moi car contrairement à la création d'un répertoire ou d'un fichier dans le terminal, lorsque la CLI génère un composant, elle ajoute le chemin src / app par défaut au chemin que vous entrez.

Si je génère le composant à partir de mon dossier d'application principal comme ça (WRONG WAY)

ng g c ./src/app/child/grandchild 

le composant qui a été généré était le suivant:

src/app/src/app/child/grandchild.component.ts

donc je n'ai eu qu'à taper

ng g c child/grandchild 

J'espère que cela aide quelqu'un


3

Je n'ai pas eu de chance avec les réponses ci-dessus (y compris --flat), mais ce qui a fonctionné pour moi était:

cd path/to/specific/directory

De là, j'ai dirigé le ng g c mynewcomponent


1

Facile

ng g component plainsight/some-name

Il créera un dossier "plainsight" et générera un composant de nom à l'intérieur.


1

Essayez d'utiliser

ng g component plainsight/some-name.component.ts

Ou essayez-le manuellement, si vous vous sentez plus à l'aise.


1

Une fois dans le répertoire de votre projet. utiliser cd path/to/directorypuis l'utiliser ng g c component_name --spec=falseautomatise tout et est sans erreur

les g cmoyens génèrent une composante


1

Accédez au dossier du projet dans l'invite de commande ou dans le terminal de projet.

Exécutez cmd: ng gc componentname

entrez la description de l'image ici


1

La CLI angulaire fournit toutes les commandes dont vous avez besoin dans le développement de votre application. Pour vos besoins spécifiques, vous pouvez facilement utiliser ng g( ng generate) pour effectuer le travail.

ng g c directory/component-namegénérera un component-namecomposant dans le directorydossier.

Voici une carte de quelques commandes simples que vous pouvez utiliser dans votre application.

  1. ng g c comp-nameou ng generate component comp-namepour créer un composant avec le nom 'nom-comp'
  2. ng g s serv-nameou ng generate service serv-namepour créer un service avec le nom 'serv-name'
  3. ng g m mod-nameou ng generate module mod-namepour créer un module avec le nom 'mod-name'
  4. ng g m mod-name --routingou ng generate module mod-name --routingpour créer un module avec le nom 'mod-name' avec un routage angulaire

J'espère que cela t'aides!

Bonne chance!


1

Si vous utilisez VSCode, pensez à utiliser la console angulaire

Il fournit une interface pour la CLI angulaire. Vous verrez une option pour spécifier le chemin.

La CLI angulaire est extrêmement puissante et extensible. En fait, il y a tellement de fonctionnalités qu'il est utile pour les développeurs d'avoir toutes les différentes options de configuration pour chaque commande à leur disposition.

Avec Angular Console, vous obtiendrez des recommandations et pourrez récupérer même les fonctionnalités les plus facilement oubliées ou rarement utilisées!

Angular Console est, avant tout, un moyen plus productif de travailler avec ce que fournit la CLI Angular.


0

Tout d'abord pour créer un composant, vous devez utiliser: -

  • ng gc componentname

    En utilisant la commande ci-dessus, un nouveau composant sera créé dans un dossier avec
    (nom du composant) spécifié ci-dessus.

Mais si vous devez créer un composant à l'intérieur d'un autre composant ou dans un dossier spécifique: -

  • ng gc componentname / newComponentName

0

Besoin d'utiliser --dryRun lors de l'utilisation d'un répertoire personnalisé

Vous pouvez transmettre votre chemin de répertoire personnalisé avec la ngcommande.

ng g c myfolder\mycomponent

Mais il y a des chances que vous manquiez d'épeler le chemin et que le nouveau dossier soit créé ou que le répertoire cible change. Pour cette raisondryRun c'est très utile. Il affiche une sortie de la façon dont les modifications vont être affectées.
entrez la description de l'image ici

Après avoir vérifié le résultat, vous pouvez exécuter la même commande sans -d effectuer les modifications.

--dryRun = true | false

Si vrai, exécute et signale l'activité sans écrire les résultats.

Par défaut: faux

Alias: -d

Doc officiel: - https://angular.io/cli/generate

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.