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

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.

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)

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.

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)

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

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 { }

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

    ng g component componentName

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

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

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

ng g c componentname

Es werden die folgenden 4 Dateien erstellt:

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

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

ng g component component name

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

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.

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.

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

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

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.

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

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

ng generate component componentName.

Die Komponente wird automatisch in module.ts importiert

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

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.

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")