So erstellen Sie eine neue Komponente in Angular 4 mithilfe der CLI

90

In Winkel 2 benutze ich

ng g c componentname

Da es in Angular 4 nicht unterstützt wird, habe ich es manuell erstellt, aber es zeigt den Fehler, dass es kein Modul ist.

surbhiGoel
quelle
6
ng generate component componentname, gemäß der Dokumentation
1
Sie müssen die manuell erstellte Komponente in die Datei
module.ts
In Angular 7 funktioniert es auch. ng g c <componentname>ODERng generate component <Name>
Chinmoy
Sie können Komponenten basierend auf den Schaltplänen und Optionen gemäß der Dokumentation
hinzufügen

Antworten:

5

Generieren und Bereitstellen eines Angular-Projekts über einen Entwicklungsserver -

Gehen Sie zuerst zu Ihrem Projektverzeichnis und geben Sie Folgendes ein:

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

Hier ist " D: \ Angular \ my-app> " mein Projektverzeichnis für Angular-Anwendungen und " Benutzer " ist der Name der Komponente.

Das Kommando sieht aus wie -

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)
Anil Singh
quelle
146

In Angular4 funktioniert dies genauso. Wenn Sie eine Fehlermeldung erhalten, liegt Ihr Problem vermutlich woanders.

Geben Sie in der Eingabeaufforderung ein

ng Komponente IHREN KOMPONENTENNAME generieren

Es gibt sogar Kürzel dafür: die Befehle generatewie verwendet werden können , gund componentwie c:

ng gc IHR KOMPONENTENNAME

Sie können verwendet werden ng --help, ng g --helpoder ng g c --helpfür die Dokumentation.

Benennen Sie IHREN KOMPONENTENNAME natürlich in den Namen um, den Sie verwenden möchten.

Docs: angle-cli fügt in app.module.ts automatisch Verweise auf Komponenten, Anweisungen und Pipes hinzu.

Update: Dies funktioniert weiterhin in Angular Version 8.

Mike Bovenlander
quelle
1
Ich erhalte diesen Fehler ----------- Installation der Komponente Fehler beim Auffinden des Moduls für die Deklaration SilentError: Keine Moduldateien gefunden
surbhiGoel
1
Ich frage mich, ob ein Befehl zum Entfernen der erstellten Komponente verfügbar ist, einschließlich des Referenz-App-Moduls.
Panky Sharma
2
@pankysharma Nein, in Angular CLI gibt es keinen Befehl zum Entfernen einer Komponente, aber wenn Sie die Komponente mit verschiedenen Optionen neu erstellen möchten. Sie können die --forceOption (Kurzform: -f) verwenden, um Dateien zu überschreiben.
Mike Bovenlander
"ng gc employee" hat für mich gearbeitet. Ich habe ein '$' vor 'ng' wie '$ ng gc employee' verwendet, was in diesem Fall zu Problemen führte.
Raj Chaurasia
Wenn Sie die Testdatei (.spec.ts) für Ihre neue Komponente nicht benötigen, fügen Sie Ihrem Befehl das Argument --skipTests hinzu.
Chirag K
26

1) Gehen Sie zuerst zu Ihrem Projektverzeichnis

2) Führen Sie dann unter Befehl im Terminal aus.

ng generate component componentname

ODER

ng g component componentname

3) Danach sehen Sie eine Ausgabe wie folgt:

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)
Chaudhary
quelle
14

Wenn Sie eine neue Komponente ohne .specDatei erstellen möchten , können Sie verwenden

ng g c component-name --spec false

Sie finden diese Optionen mit ng g c --help

Meile Mijatović
quelle
11
ng g component componentname

Es generiert die Komponente und fügt die Komponente Moduldeklarationen hinzu.

Wenn Sie eine Komponente manuell erstellen, sollten Sie die Komponente in der Deklaration des Moduls wie folgt hinzufügen:

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

Stellen Sie sicher, dass Sie sich in Ihrer Projekt-Cmd-Zeile befinden

    ng g component componentName
Sandig
quelle
6

Zum Erstellen einer Komponente unter einem bestimmten Ordner

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

In dieser Zeile wird ein Ordnername "Mitarbeiter" erstellt, unter dem eine Komponente "Mitarbeiter erstellen" erstellt wird.

ohne einen Ordner zu erstellen

ng g c create-employee --skipTests=false --flat=true
Alexander Zaldostanov
quelle
3

ng generate component component_name funktionierte in meinem Fall nicht, da ich 'app' nicht als Projektordnernamen verwendet habe, sondern in etwas anderes umbenannt habe. Ich habe es wieder in App geändert. Jetzt funktioniert es gut

surbhiGoel
quelle
3
ng g c COMPONENTNAME

Dieser Befehl wird zum Generieren von Komponenten mit dem Terminal verwendet, das ich in angle2 verwende.

g für erzeugen c für Komponente

Rajeev Omar
quelle
3
ng g c componentname

Es werden die folgenden 4 Dateien erstellt:

  1. componentname.css
  2. componentname.html
  3. componentname.spec.ts
  4. componentname.ts
Kamlesh Kumawat
quelle
2

In meinem Fall habe ich zufällig eine andere .angular-cli.jsonDatei in meinem srcOrdner. Das Entfernen löste das Problem. Ich hoffe es hilft

angular 4.1.1 angular-cli 1.0.1

phacic
quelle
2
ng g component component name

Bevor Sie diese Empfehlungsprüfung eingeben, befinden Sie sich in Ihrem Projektanweisungspfad

Sandig
quelle
2

ng gc --dry-run, damit Sie sehen können, was Sie gerade tun, bevor Sie es tatsächlich tun, erspart Ihnen einige Frustrationen. Zeigt Ihnen nur, was es tun wird, ohne es tatsächlich zu tun.

Aggie Jon von 87
quelle
2

Sie sollten sich in der src/appBefehlszeile im Ordner Ihres Angular-Cli-Projekts befinden. Beispielsweise:

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

Nur dann wird Ihre Komponente generiert.

Amruta Thakur
quelle
1

Haben Sie den Angular-Cli auf die neueste Version aktualisiert? oder haben Sie versucht, Node oder Npm oder Typoskript zu aktualisieren? Dieses Problem tritt aufgrund von Versionen wie Angular / Typoskript / Knoten auf. Wenn Sie die CLI aktualisieren, verwenden Sie diesen Link hier. https://github.com/angular/angular-cli/wiki/stories-1.0-update

Mitrabrihas
quelle
1

Gehen Sie zu Ihrem eckigen Projektordner und öffnen Sie den Befehl promt einen Typ "ng g Komponentenheader", wobei Header die neue Komponente ist, die Sie erstellen möchten. Standardmäßig wird die Headerkomponente innerhalb der App-Komponente erstellt. Sie können Komponenten innerhalb von erstellen Komponente. Wenn Sie beispielsweise eine Komponente in dem oben erstellten Header erstellen möchten, geben Sie "ng g Komponenten-Header / Menü" ein. Dadurch wird eine Menükomponente innerhalb der Header-Komponente erstellt

Sajith Sathyan
quelle
1

ng g c COMPONENTNAME sollte funktionieren, wenn Sie Modul Ausnahme nicht gefunden bekommen, dann versuchen Sie diese Dinge-

  1. Überprüfen Sie Ihr Projektverzeichnis.
  2. Wenn Sie Visual Studio-Code verwenden, laden Sie ihn neu oder öffnen Sie Ihr Projekt darin erneut.
Kamal Singh Meena
quelle
1

Gehen Sie zum Projektspeicherort im angegebenen Ordner

C:\Angular6\sample>

Hier können Sie den Befehl eingeben

C:\Angular6\sample>ng g c users

Hier bedeutet g erzeugen, c bedeutet Komponente, Benutzer ist der Komponentenname

Es werden die 4 Dateien generiert

users.component.html,
users.component.spec.ts,
users.component.ts,
users.component.css
Lova Chittumuri
quelle
1

Schritt 1:

Holen Sie sich in das Projektverzeichnis! (CD in erstellte App).

Schritt 2:

Geben Sie den folgenden Befehl ein und führen Sie ihn aus!

ng generate component [componentname]

  • Fügen Sie den Namen der Komponente, die Sie generieren möchten, im Abschnitt [Komponentenname] hinzu.

ODER

ng generate c [componentname]

  • Fügen Sie im Abschnitt [Komponentenname] den Namen der Komponente hinzu, die Sie generieren möchten.

Beides wird funktionieren

Als Referenz können Sie diesen Abschnitt der Winkeldokumentation lesen!

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

Als Referenz sehen Sie sich auch den Link zu Angular Cli auf Github an!

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

Collins Tinte
quelle
1
ng generate component componentName.

Die Komponente wird automatisch in module.ts importiert

José Eras
quelle
1

Wechseln Sie in Ihr Projektverzeichnis in CMD und führen Sie die folgenden Befehle aus. Sie können auch das Visual Studio-Code-Terminal verwenden.

ng generate component "component_name"

ODER

ng g c "component_name"

Ein neuer Ordner mit "component_name"wird erstellt

Komponentenname / Komponentenname.Komponente.html Komponentenname / Komponentenname.Komponentenspezifikation.ts Komponentenname / Komponentenname.Komponentenname Komponentenname / Komponentenname.Komponente.css

Neue Komponente wird automatisch Modul hinzugefügt.

Sie können das Erstellen einer Spezifikationsdatei vermeiden, indem Sie den folgenden Befehl ausführen

ng g c "component_name" --nospec

Nantharupan
quelle
0

Es gibt hauptsächlich zwei Möglichkeiten, eine neue Komponente in Angular zu generieren. Eine ng g c <component_name>andere Möglichkeit ist die Verwendung von ng generate component <component_name>. Mit einem dieser Befehle kann eine neue Komponente generiert werden.

GT_hash
quelle
0

CD zu Ihrem Projekt und ausführen,

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

ODER

> ng g c shopping-cart

(Dadurch wird ein neuer Ordner unter dem Ordner "app" mit dem Namen "Warenkorb" erstellt und .html-, .ts-, .css. Specs-Dateien erstellt.)

Wenn Sie keine .spec-Datei generieren möchten

> ng g c shopping-cart --skipTests true

Wenn Sie eine Komponente in einem bestimmten Ordner unter "App" erstellen möchten

> ng g c ecommerce/shopping-cart

(Sie erhalten die Ordnerstruktur "App / E-Commerce / Warenkorb")

Amit baderia
quelle