Jak stworzyć nowy komponent w Angular 4 przy użyciu CLI

W kątowej 2 używam

ng g c componentname

Ale nie jest obsługiwany w Angular 4, więc utworzyłem go ręcznie, ale pokazuje błąd, że nie jest to moduł.

Generowanie i obsługa projektu Angular za pośrednictwem serwera programistycznego -

Najpierw przejdź do katalogu projektów i wpisz poniżej -

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

Tutaj „ D: \ Angular \ my-app> ” to katalog projektów mojej aplikacji Angular, a „ Użytkownik ” to nazwa komponentu.

Bujny wygląda tak -

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)

W Angular4 będzie to działać tak samo. Jeśli pojawi się błąd, myślę, że problem występuje gdzie indziej.

W wierszu polecenia wpisz

ng generowania komponentu NAZWA KOMPONENTU

Istnieją nawet skróty: polecenia generatemogą być używane jako gi componentjako c:

ng gc NAZWA TWOJEGO KOMPONENTA

można użyć ng --help, ng g --helplub ng g c --helpza docs.

Oczywiście zmień nazwę YOURCOMPONENTNAME na taką, której chcesz używać.

Docs: angular-cli automatycznie doda odniesienia do komponentów, dyrektyw i potoków w app.module.ts.

Aktualizacja: to nadal działa w wersji Angular 8.

1) najpierw przejdź do katalogu projektów

2), a następnie Uruchom poniżej polecenia w terminalu.

ng generate component componentname

LUB

ng g component componentname

3) po tym zobaczysz takie wyjście,

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)

Jeśli chcesz stworzyć nowy komponent bez .specpliku, możesz użyć

ng g c component-name --spec false

Możesz znaleźć te opcje za pomocą ng g c --help

ng g component componentname

Generuje komponent i dodaje go do deklaracji modułu.

tworząc komponent ręcznie, należy dodać komponent w deklaracji modułu w następujący sposób:

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

Upewnij się, że jesteś w katalogu projektu w wierszu CMD

    ng g component componentName

Do tworzenia komponentu w określonym folderze

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

Ta linia utworzy nazwę folderu „pracownik”, pod którą tworzy komponent „utwórz pracownika”.

bez tworzenia żadnego folderu

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

ng g c componentname

Utworzy następujące 4 pliki:

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

komponent ngener nazwa_komponentu nie działał w moim przypadku, ponieważ zamiast używać „aplikacji” jako nazwy folderu projektu, zmieniłem jego nazwę na coś innego. Ponownie zmieniłem to na aplikację. Teraz działa dobrze

ng g c COMPONENTNAME

to polecenie służy do generowania komponentu za pomocą terminala, którego używam w angular2.

g do generowania c dla komponentu

W moim przypadku mam inny .angular-cli.jsonplik w moim srcfolderze. Usunięcie go rozwiązało problem. Mam nadzieję, że to pomoże

angular 4.1.1 angular-cli 1.0.1

ng g component component name

przed wpisaniem tego polecenia sprawdź, czy znajdziesz się w ścieżce dyrektywy projektu

ng gc --dry-run, abyś mógł zobaczyć, co masz zamiar zrobić, zanim faktycznie to zrobisz, pozwoli to zaoszczędzić trochę frustracji. Po prostu pokazuje, co zrobi, nie robiąc tego.

Powinieneś być w src/appfolderze swojego projektu angular-cli w linii poleceń. Na przykład:

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

Dopiero wtedy wygeneruje twój komponent.

przejdź do katalogu projektu w CMD i uruchom następujące polecenia. Możesz również użyć terminala kodowego Visual Studio.

ng generate component "component_name"

LUB

ng g c "component_name"

"component_name"zostanie utworzony nowy folder z

nazwa_komponentu / nazwa_komponentu.component.html nazwa_komponentu / nazwa_komponentu.component.spec.ts nazwa_komponentu / nazwa_komponentu.component.ts nazwa_komponentu / nazwa_komponentu.component.css

nowym komponentem zostanie automatycznie dodany moduł.

możesz uniknąć tworzenia pliku specyfikacji, wykonując następujące polecenie

ng g c "component_name" --nospec

Czy zaktualizowałeś angular-cli do najnowszej wersji? czy próbowałeś zaktualizować węzeł, npm lub maszynopis? ten problem występuje z powodu wersji takich jak angular / maszynopis / węzeł. Jeśli aktualizujesz CLI, użyj tego linku tutaj. https://github.com/angular/angular-cli/wiki/stories-1.0-update

przejdź do folderu projektu kątowego i otwórz polecenie promt typu „ng g component header”, gdzie nagłówek jest nowym komponentem, który chcesz utworzyć. Domyślnie komponent nagłówka zostanie utworzony w komponencie aplikacji. Możesz tworzyć komponenty wewnątrz Na przykład, jeśli chcesz utworzyć komponent wewnątrz nagłówka, który utworzyliśmy powyżej, wpisz „ng g komponentu nagłówek / menu”. Spowoduje to utworzenie komponentu menu wewnątrz komponentu nagłówka

ng g c COMPONENTNAME powinno działać, jeśli otrzymujesz wyjątek nie znaleziono modułu, spróbuj następujących rzeczy-

1. Sprawdź katalog swojego projektu.
2. Jeśli używasz kodu Visual Studio, załaduj go ponownie lub ponownie otwórz w nim swój projekt.

Przejdź do lokalizacji projektu w określonym folderze

C:\Angular6\sample>

Tutaj możesz wpisać polecenie

C:\Angular6\sample>ng g c users

Tutaj g oznacza generowanie, c oznacza komponent, użytkownicy to nazwa komponentu

wygeneruje 4 pliki

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

Krok 1:

Wejdź do katalogu projektów!(cd do utworzonej aplikacji).

Krok 2:

Wpisz następujące polecenie i uruchom!

ng generate component [componentname]

• Dodaj nazwę komponentu, który chcesz wygenerować w sekcji [nazwa komponentu].

LUB

ng generate c [componentname]

• Dodaj nazwę komponentu, który chcesz wygenerować w sekcji [nazwa komponentu].

Oba będą działać

Aby uzyskać informacje referencyjne, sprawdź tę sekcję dokumentacji Angular!

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

Dla odniesienia również sprawdź link do Angular Cli na github!

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

ng generate component componentName.

Automatycznie zaimportuje komponent do module.ts

cd do swojego projektu i uruchom,

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

LUB

> ng g c shopping-cart

(Spowoduje to utworzenie nowego folderu w folderze „aplikacja” o nazwie „koszyk” i utworzenie plików .html, .ts, .css. Specs.)

Jeśli nie chcesz generować pliku .spec

> ng g c shopping-cart --skipTests true

Jeśli chcesz utworzyć komponent w dowolnym określonym folderze w sekcji „aplikacja”

> ng g c ecommerce/shopping-cart

(otrzymasz strukturę folderów „app / ecommerce / shopping-cart”)

Istnieją głównie dwa sposoby generowania nowego komponentu w Angular, używając ng g c <component_name>, innym sposobem jest użycie ng generate component <component_name>. za pomocą jednego z tych poleceń można wygenerować nowy komponent.