web-dev-qa-db-fra.com

Créer un composant sur un module spécifique avec Angular-CLI

Je commence à utiliser angular-cli et j'ai déjà beaucoup lu pour trouver une réponse à ce que je veux faire ... pas de succès, alors je suis venu ici.

Existe-t-il un moyen de créer un composant dans un nouveau module? 

par exemple: ng g module newModule

ng g component newComponent (comment ajouter ce composant à newModule ??)

car le comportement par défaut de angular-cli est de placer tous les nouveaux composants dans app.module. J'aimerais choisir l'emplacement de mon composant afin de pouvoir créer des modules séparés sans avoir tous mes composants dans app.module. Il est possible de le faire en utilisant angular-cli ou dois-je le faire manuellement?

angulartypescriptangular-cli
85
Elmer Dantas

Pour créer un composant dans le cadre d'un module, vous devez

  1. ng g module newModule pour générer un module, 
  2. cd newModule pour changer de répertoire dans le dossier newModule 
  3. ng g component newComponent pour créer un composant en tant qu'enfant du module.
117
Alexander Ciesielski
ng g component nameComponent --module=app.module.ts
63
Daniel Fernando Acosta Ceballo

Pas sûr si peut-être la réponse d'Alexander Ciesielski était correcte au moment de la rédaction, mais je peux vérifier que cela ne fonctionne plus. Peu importe le répertoire dans le projet où vous exécutez la CLI angulaire. Si vous tapez 

ng g component newComponent

il va générer un composant et l'importer dans le fichier app.module.ts

La seule façon d'utiliser CLI pour l'importer automatiquement dans un autre module consiste à spécifier

ng g component moduleName/newComponent

où nomModule est un module que vous avez déjà défini dans votre projet. Si le moduleName n'existe pas, le composant est placé dans le répertoire nomModule/newComponent mais reste importé dans app.module

57
Diskdrive

Je n'ai pas trouvé de réponse indiquant comment utiliser le CLI pour générer un composant dans un dossier de module de niveau supérieur, mais également pour que le composant ajoute automatiquement la collection de déclarations du module.

Pour créer le module, exécutez ceci:

ng g module foo

Pour créer le composant dans le dossier du module foo et l'ajouter à la collection de déclarations de foo.module.ts, exécutez la procédure suivante:

ng g component foo/fooList --module=foo.module.ts

Et la cli échafaudera le module et le composant comme ceci:

 enter image description here

--EDIT la nouvelle version du cli angulaire se comporte différemment. 1.5.5 ne veut pas d’un nom de fichier de module, la commande avec v1.5.5 devrait 

ng g component foo/fooList --module=foo
20
cobolstinks

Vous pouvez essayer la commande ci-dessous, qui décrit le,

ng -> Angular 
g  -> Generate
c  -> Component
-m -> Module

Alors votre commande sera comme:

ng g c user/userComponent -m user.module
9
user2662006

c'est ce qui a fonctionné pour moi :

1 -->  ng g module new-module

2 -->  ng g c new-module/component-test --module=new-module/new-module.module.ts

Si vous souhaitez générer un composant sans son répertoire, utilisez --flat flag.

6
Mohamed Makkaoui

Pour Angular v4 et ci-dessus, utilisez simplement:

ng g c componentName -m ModuleName
4
Shemzz

Utilisez cette commande simple:

ng g c users/userlist

users: le nom de votre module.

userlist: le nom de votre composant.

1
Hasan Fathi

J'ai créé un module enfant basé sur des composants avec un dossier racine spécifique

Cette commande cli ci-dessous, je précise, s'il vous plaît vérifier

ng g c Repair/RepairHome -m Repair/repair.module

Réparation est le dossier racine de notre module enfant

-m est --module

c pour le décompte

g pour générer

1
sathish

Selon Angular docs, la manière de créer un composant pour un module spécifique est la suivante:

ng g component <directory name>/<component name>

"nom du répertoire" = où la CLI a généré le module de fonctionnalité

Exemple :- 

ng generate component customer-dashboard/CustomerDashboard

Cela génère un dossier pour le nouveau composant dans le dossier customer-dashboard et met à jour le module de fonctionnalité avec le CustomerDashboardComponent

1
Sksaif Uddin
  1. Tout d'abord, vous générez un module en exécutant.
ng g m modules/media

cela générera un module appelé media dans le dossier modules.

  1. Deuxièmement, vous générez un composant ajouté à ce module
ng g c modules/media/picPick --module=modules/media/media.module.ts

la première partie de la commande ng g c modules/media/picPick générera un dossier de composant appelé picPick dans le dossier modules/media qui contient notre nouveau module media.

la deuxième partie va déclarer notre nouveau composant picPick dans le module media en l'important dans le fichier de module et en l'ajoutant au tableau declarations de ce module.

 working tree 

 enter image description here 

1
Elhakim

Si vous avez plusieurs applications déclarées dans .angular-cli.json (par exemple, si vous travaillez sur le module de fonctionnalité)

"apps": [{
    "name": "app-name",
    "root": "lib",
    "appRoot": ""
}, {...} ]

Vous pouvez : 

ng g c my-comp -a app-name

-a signifie --app (nom)

0
Sam

Ajouter un composant à l'application Angular 4 à l'aide de l'interface CLI angulaire

Pour ajouter un nouveau composant Angular 4 à l'application, utilisez la commande ng g component componentName. Après exécution de cette commande, Angular CLI ajoute un dossier component-name sous src\app. De plus, les références du même sont ajoutées au fichier src\app\app.module.ts automatiquement.

Un composant doit avoir une fonction décoratrice @Component suivie d'une class qui doit être exported. La fonction de décorateur @Component accepte les métadonnées.

Ajouter un composant dans un dossier spécifique de l'application Angular 4 à l'aide de l'interface CLI angulaire

Pour ajouter un nouveau composant à un dossier spécifique, utilisez la commande ng g component folderName/componentName

0
student

J'ai des problèmes similaires avec plusieurs modules en application. Un composant peut être créé sur n'importe quel module. Avant de créer un composant, nous devons donc spécifier le nom du module concerné.

'ng generate component newCompName --module= specify name of module'
0
vivek

Première exécution ng g module newModule. Puis exécutez ng g component newModule/newModule --flat

0
Tuan van Duong

Je travaille actuellement sur des projets angulaires 5 et j'utilise cette commande particulière pour générer des composants dans un module.

ng g c <module-name>/<new-component-name>

Cette commande générera un composant local au module si vous utilisez la commande normale, par exemple

ng g c <component-name>

il va générer un composant dans le module d'application a.k.a module racine.

Remarque: le code entre <> représente des noms spécifiques à l'utilisateur. 

0
Shashank Rawat