Comment créer un nouveau composant dans Angular 4 à l'aide de la CLI

En angulaire 2 j'utilise

ng g c componentname

Mais il n'est pas pris en charge dans Angular 4, donc je l'ai créé manuellement, mais cela montre une erreur qu'il ne s'agit pas d'un module.

Générer et servir un projet Angular via un serveur de développement -

Accédez d'abord à votre répertoire de projets et saisissez ci-dessous -

ng new my-app
cd my-app
ng g component User
ng serve

Ici, « D: \ Angular \ my-app> » est mon répertoire de projet d'application angulaire et « User » est le nom du composant.

Les communes ressemblent à -

D:\Angular\my-app>ng g component User
  create src/app/user/user.component.html (23 bytes)
  create src/app/user/user.component.spec.ts (614 bytes)
  create src/app/user/user.component.ts (261 bytes)
  create src/app/user/user.component.css (0 bytes)
  update src/app/app.module.ts (586 bytes)

Dans Angular4, cela fonctionnera de la même manière. Si vous obtenez une erreur, je pense que votre problème est ailleurs.

Dans le type d'invite de commande

ng générer le composant YOURCOMPONENTNAME

Il y a même des raccourcis pour cela: les commandes generatepeuvent être utilisées comme get componentcomme c:

ng gc YOURCOMPONENTNAME

vous pouvez utiliser ng --help, ng g --helpou ng g c --helppour les documents.

Bien entendu, renommez YOURCOMPONENTNAME par le nom que vous souhaitez utiliser.

Docs: angular-cli ajoutera automatiquement une référence aux composants, directives et tubes dans le fichier app.module.ts.

Mise à jour: cela fonctionne toujours dans la version angulaire 8.

1) accédez d'abord à votre répertoire de projets

2) puis exécutez sous la commande dans le terminal.

ng generate component componentname

OU

ng g component componentname

3) après cela, vous verrez une sortie comme celle-ci,

create src/app/test/componentname.component.css (0 bytes)
create src/app/test/componentname.component.html (23 bytes)
create src/app/test/componentname.component.spec.ts (614 bytes)
create src/app/test/componentname.component.ts (261 bytes)
update src/app/app.module.ts (1087 bytes)

Si vous souhaitez créer un nouveau composant sans .specfichier, vous pouvez utiliser

ng g c component-name --spec false

Vous pouvez trouver ces options en utilisant ng g c --help

ng g component componentname

Il génère le composant et ajoute le composant aux déclarations de module.

lors de la création manuelle du composant, vous devez ajouter le composant dans la déclaration du module comme ceci:

@NgModule({
  imports: [
    yourCommaSeparatedModules
    ],
  declarations: [
    yourCommaSeparatedComponents
  ]
})
export class yourModule { }

Assurez-vous que vous êtes dans le répertoire de votre projet dans la ligne CMD

    ng g component componentName

Pour créer un composant sous un certain dossier

ng g c employee/create-employee --skipTests=false --flat=true

Cette ligne créera un nom de dossier «employé», en dessous duquel il créera un composant «créer-employé».

sans créer de dossier

ng g c create-employee --skipTests=false --flat=true

ng g c componentname

Il créera les 4 fichiers suivants:

1. componentname.css
2. componentname.html
3. componentname.spec.ts
4. componentname.ts

ng generate component nom_composant ne fonctionnait pas dans mon cas car au lieu d'utiliser «app» comme nom de dossier de projet, je l'ai renommé en autre chose. Je l'ai à nouveau changé en application. Maintenant ça fonctionne bien

ng g c COMPONENTNAME

cette commande utilise pour générer un composant à l'aide du terminal que j'utilise dans angular2.

g pour générer c pour composant

Dans mon cas, j'ai un autre .angular-cli.jsonfichier dans mon srcdossier. Le supprimer a résolu le problème. J'espère que cela aide

angular 4.1.1 angular-cli 1.0.1

ng g component component name

avant de taper cette vérification, vous serez dans le chemin de la directive de votre projet

ng gc --dry-run pour que vous puissiez voir ce que vous êtes sur le point de faire avant de le faire réellement vous évitera une certaine frustration. Vous montre simplement ce qu'il va faire sans le faire réellement.

Vous devriez être dans le src/appdossier de votre projet angular-cli en ligne de commande. Par exemple:

D:\angular2-cli\first-app\src\app> ng generate component test

Ce n'est qu'alors qu'il générera votre composant.

Avez-vous mis à jour angular-cli vers la dernière version? ou avez-vous essayé de mettre à jour node ou npm ou dactylographié? ce problème est dû à des versions telles que angular / typescript / node. Si vous mettez à jour le cli, utilisez ce lien ici. https://github.com/angular/angular-cli/wiki/stories-1.0-update

allez dans le dossier de votre projet angulaire et ouvrez la commande promt un type «ng g component header» où l'en-tête est le nouveau composant que vous souhaitez créer. Par défaut, le composant d'en-tête sera créé à l'intérieur du composant de l'application. Vous pouvez créer des composants dans component .Par exemple, si vous voulez créer un composant à l'intérieur de l'en-tête que nous avons créé ci-dessus, tapez "ng g component header / menu". Cela créera un composant de menu à l'intérieur du composant d'en-tête

ng g c COMPONENTNAME devrait fonctionner, si vous obtenez une exception de module non trouvée, essayez ces choses-

1. Vérifiez le répertoire de votre projet.
2. Si vous utilisez du code Visual Studio, rechargez-le ou rouvrez-y votre projet.

Accédez à l'emplacement du projet dans le dossier spécifié

C:\Angular6\sample>

Ici vous pouvez taper la commande

C:\Angular6\sample>ng g c users

Ici g signifie générer, c signifie composant, users est le nom du composant

il générera les 4 fichiers

users.component.html,
users.component.spec.ts,
users.component.ts,
users.component.css

Étape 1:

Entrez dans le répertoire de projets! (cd dans l'application créée).

Étape 2:

Tapez la commande suivante et exécutez!

ng generate component [componentname]

• Ajoutez le nom du composant que vous souhaitez générer dans la section [nom du composant].

OU

ng generate c [componentname]

• Ajoutez le nom du composant que vous souhaitez générer dans la section [nom du composant].

Les deux fonctionneront

Pour référence, consultez cette section de la documentation angulaire!

https://angular.io/tutorial/toh-pt1

Pour référence, consultez également le lien vers Angular Cli sur github!

https://github.com/angular/angular-cli/wiki/generate-component

ng generate component componentName.

Il importera automatiquement le composant dans module.ts

cd à votre projet et exécutez,

> ng generate component "componentname"
ex: ng generate component shopping-cart

OU

> ng g c shopping-cart

(Cela créera un nouveau dossier dans le dossier «app» avec le nom «panier» et créera des fichiers .html, .ts, .css. Specs.)

Si vous ne souhaitez pas générer de fichier .spec

> ng g c shopping-cart --skipTests true

Si vous souhaitez créer un composant dans un dossier spécifique sous "application"

> ng g c ecommerce/shopping-cart

(vous obtiendrez la structure de dossier "app / commerce électronique / panier")

Accédez au répertoire de votre projet dans CMD et exécutez les commandes suivantes. Vous pouvez également utiliser le terminal de code Visual Studio.

ng generate component "component_name"

OU

ng g c "component_name"

un nouveau dossier avec "component_name"sera créé

nom_composant / nom_composant.component.html nom_composant / nom_composant.component.spec.ts nom_composant / nom_composant.component.ts nom_composant / nom_composant.component.css

le nouveau composant sera un module ajouté automatiquement.

vous pouvez éviter de créer un fichier de spécification en suivant la commande

ng g c "component_name" --nospec

Il existe principalement deux façons de générer un nouveau composant dans Angular, en utilisant ng g c <component_name>, une autre manière est d'utiliser ng generate component <component_name>. en utilisant l'une de ces commandes, un nouveau composant peut être généré.