Hoe maak je een nieuwe component in Angular 4 met behulp van CLI

In hoek 2 gebruik ik

ng g c componentname

Maar het wordt niet ondersteund in Angular 4,
dus ik heb het handmatig gemaakt, maar het geeft een fout aan dat het geen module is.


Antwoord 1, autoriteit 100%

Een Angular-project genereren en bedienen via een ontwikkelingsserver –

Ga eerst naar uw Project Directory en typ het onderstaande –

ng new my-app
cd my-app
ng generate component User (or) ng g c user 
ng serve

Hier is “D:\Angular\my-app>” de projectdirectory van mijn Angular-toepassing en de “Gebruiker” is de naam van de component.

De commonds ziet eruit als –

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)

Antwoord 2, autoriteit 90%

In Angular4 werkt dit hetzelfde. Als je een foutmelding krijgt, denk ik dat je probleem ergens anders ligt.

Typ in de opdrachtprompt

ng component YOURCOMPONENTNAME genereren

Er zijn zelfs afkortingen voor: de commando’s generatekunnen worden gebruikt als gen componentals c:

ng g c UWCOMPONENTNAAM

je kunt ng --help, ng g --helpof ng g c --helpgebruiken voor de documenten.

Natuurlijk hernoem je YOURCOMPONENTNAME naar de naam die je wilt gebruiken.

Documenten:angular-cli zal voeg automatisch verwijzingen naar componenten, richtlijnen en leidingen toe in de app.module.ts.

Update: dit werkt nog steeds in Angular-versie 8.


Antwoord 3, autoriteit 97%

1) ga eerst naar je Project Directory

2) en vervolgens Uitvoeren onder Commando in terminal.

ng generate component componentname

OF

ng g component componentname

3) daarna ziet u de uitvoer zoals deze,

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)

Antwoord 4, autoriteit 54%

Als u een nieuwe component wilt maken zonder .spec-bestand, kunt u

gebruiken

ng g c component-name --spec false

Je kunt deze opties vinden met ng g c --help


Antwoord 5, autoriteit 42%

ng g component componentname

Het genereert de component en voegt de component toe aan moduledeclaraties.

wanneer u een component handmatig aanmaakt, moet u de component als volgt in de verklaring van de module toevoegen:

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

Antwoord 6, autoriteit 38%

Voor het maken van een component onder een bepaalde map

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

Deze regel maakt een mapnaam ‘Medewerker’, eronder dat het een ‘Create-medewerker’ -component maakt.

zonder een map

te maken

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

Antwoord 7, Autoriteit 35%

Zorg ervoor dat u in uw projectdirectory in de CMD-lijn

bent

   ng g component componentName

Antwoord 8, Autoriteit 15%

ng g c componentname

Het maakt de volgende 4 bestanden:

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

Antwoord 9, Autoriteit 12%

NG Generate Component Component_Name werkte niet in mijn geval, omdat ik in plaats van ‘app’ als projectmapnaam, ik het aan iets anders hernoemd.
Ik heb het opnieuw gewijzigd in app.
Nu werkt het prima


Antwoord 10, Autoriteit 12%

ng g c componentname

Dit opdrachtgebruik voor het genereren van component met behulp van terminal die ik gebruik in Angular2.

G voor het genereren van C voor component


Antwoord 11, Autoriteit 8%

In mijn geval, heb ik toevallig nog een .angular-cli.jsonbestand in mijn srcmap. Het verwijderen van het opgelost het probleem. Hoop dat het helpt

angular 4.1.1
angular-cli 1.0.1


Antwoord 12, Autoriteit 8%

ng g component component name

Voordat u dit typt, bevindt u zich in het pad van uw projectrichtlijn


Antwoord 13, Autoriteit 8%

ng g c – drui-run, zodat u kunt zien wat u op het punt staat te doen voordat u het daadwerkelijk doet, zal het enige frustratie besparen. Laat je je zien wat het gaat doen zonder het daadwerkelijk te doen.


Antwoord 14, Autoriteit 8%

U moet in de src/appmap van uw Angular-CLI-project op opdrachtregel staan. Bijvoorbeeld:

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

Alleen dan zal het uw component genereren.


Antwoord 15, Autoriteit 8%

Ga naar uw projectdirectory in CMD en voer de volgende opdrachten uit. U kunt ook de Visual Studio Code Terminal gebruiken.

ng generate component "component_name"

of

ng g c "component_name"

Een nieuwe map met "component_name"krijgt

COMPONENT_NAME / CONDESENT_NAME.COMPONENT.HTML
component_name / component_name.component.spec.ts
component_name / component_name.component.ts
component_name / component_name.component.css

Nieuwe component wordt automatisch gemodule toegevoegd.

U kunt het maken van het SPEC-bestand maken door de opdracht

te volgen

ng g c "component_name" --nospec


Antwoord 16, Autoriteit 4%

Heb je de Angular-CLI bijgewerkt naar de nieuwste versie? Of heb je geprobeerd NODE of NPM of Typrescript bij te werken? Dit probleem komt vanwege versies zoals Angular / TypeScript / Node. Als u de CLI bijwerkt, gebruik dan deze link hier.
https://github.com/angular/angular-cli/wiki/ Stories-1.0-update


Antwoord 17, Autoriteit 4%

Ga naar uw Angular Project-map en open de opdracht Promt een type “NG G COMPONTENT-header”
Waar header de nieuwe component is die u wilt maken. Op de standaardinstelling wordt de kopcomponent gemaakt in de App-component. U kunt componenten in een component maken. Zie voorbeeld als u een component wilt maken in de kop die we daarboven wilt maken Typ “NG G-component header / menu”. Dit maakt een menucomponent in de kopbalcomponent


Antwoord 18, Autoriteit 4%

ng g c COMPONENTNAMEMOET WERKEN, als uw module geen uitzondering krijgt, probeer dan deze dingen –

  1. Controleer uw projectdirectory.
  2. Als u Visual Studio-code gebruikt, herlaad het dan of heropen uw project erin.

Antwoord 19, Autoriteit 4%

Ga naar projectlocatie in gespecificeerde map

C:\Angular6\sample>

Hier kunt u de opdracht

typen

C:\Angular6\sample>ng g c users

Hier betekent g-genereren, C betekent component, gebruikers is de naam van de component

Het genereert de 4 bestanden

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

Antwoord 20, Autoriteit 4%

Stap1:

Ga naar Project Directory! (CD in gemaakte app).

Stap 2:

Type in de volgende opdracht en RUN!

ng generate component [componentname]

  • Voeg de naam van component toe die u wilt genereren in het gedeelte [ComponentName].

of

ng generate c [componentname]

  • Naam toevoegen van component die u wilt genereren in het gedeelte [ComponentName].

Beide zullen werken

Voor referentie Afrekenen Dit gedeelte van de hoekdocumentatie!

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

Bekijk ter referentie ook de link naar Angular Cli op github!

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


Antwoord 21, autoriteit 4%

Er zijn hoofdzakelijk twee manieren om een nieuwe component in Angular te genereren,
met ng g c <component_name>, een andere manier is om ng generate component <component_name>te gebruiken. met behulp van een van deze commando’s kan een nieuwe component worden gegenereerd.


Antwoord 22, autoriteit 4%

ng generate component componentName.

Het zal de component automatisch importeren in module.ts


Antwoord 23, autoriteit 4%

cd naar uw project en voer het uit,

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

OF

> ng g c shopping-cart

(Hiermee wordt een nieuwe map aangemaakt onder de map “app” met de naam “shopping-cart” en worden .html,.ts, .css. specs-bestanden gemaakt.)

Als u geen .spec-bestand wilt genereren

> ng g c shopping-cart --skipTests true

Als u een component wilt maken in een specifieke map onder “app”

> ng g c ecommerce/shopping-cart

(u krijgt de mapstructuur “app/ecommerce/shopping-cart”)

Other episodes