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

Question

Dans angular 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 il montre l'erreur que ce n'est pas un module.

Answer 1

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

Dans l'invite de commande, tapez

ng générer composant VOTRE NOM DE COMPONENT

Il existe même des raccourcis pour cela : les commandes generate peut être utilisé comme g y component como c :

ng g c VOTRE NOM DE COMPAGNON

vous pouvez utiliser ng --help , ng g --help o ng g c --help pour les docs.

Bien sûr, renommez VOTRE NOM DE COMPAGNON au nom que vous souhaitez utiliser.

Docs : angular-cli ajoutera automatiquement les références aux composants, directives et tuyaux dans le fichier app.module.ts.

Mise à jour : Cela fonctionne toujours dans la version 8 d'Angular.

Answer 2

1) allez d'abord dans votre répertoire de projet

2) puis exécutez la commande ci-dessous 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)

Answer 3

ng g component componentname

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

Lorsque vous créez un composant manuellement, vous devez ajouter le composant dans la déclaration du module comme ceci :

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

Answer 4

Si vous voulez créer un nouveau composant sans .spec vous pouvez utiliser

ng g c component-name --spec false

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

Answer 5

Assurez-vous d'être dans le répertoire de votre projet dans la ligne CMD

    ng g component componentName