Come creare un nuovo componente in Angular 4 utilizzando la CLI

In angolare 2 uso

ng g c componentname

Ma non è supportato in Angular 4, quindi l'ho creato manualmente, ma mostra l'errore che non è un modulo.

Generazione e servizio di un progetto Angular tramite un server di sviluppo -

Per prima cosa vai alla directory del tuo progetto e digita il seguente -

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

Qui " D: \ Angular \ my-app> " è la directory del progetto dell'applicazione Angular e " Utente " è il nome del componente.

Le comunicazioni sembrano -

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 questo funzionerà allo stesso modo. Se ricevi un errore, penso che il tuo problema sia altrove.

Nel tipo di prompt dei comandi

ng generare il componente YOURCOMPONENTNAME

Ci sono anche scorciatoie per questo: i comandi generatepossono essere usati come ge componentcome c:

ng gc YOURCOMPONENTNAME

è possibile utilizzare ng --help, ng g --helpo ng g c --helpper la documentazione.

Ovviamente rinomina YOURCOMPONENTNAME con il nome che desideri utilizzare.

Documenti: angular-cli aggiungerà automaticamente riferimenti a componenti, direttive e pipe in app.module.ts.

Aggiornamento: funziona ancora nella versione 8 di Angular.

1) prima vai alla directory del tuo progetto

2) quindi Esegui sotto Comando nel terminale.

ng generate component componentname

O

ng g component componentname

3) dopodiché vedrai un output come questo,

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)

Se vuoi creare un nuovo componente senza .specfile, puoi usare

ng g c component-name --spec false

Puoi trovare queste opzioni usando ng g c --help

ng g component componentname

Genera il componente e aggiunge il componente alle dichiarazioni del modulo.

quando crei un componente manualmente, dovresti aggiungere il componente nella dichiarazione del modulo in questo modo:

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

Assicurati di essere nella directory del tuo progetto nella riga CMD

    ng g component componentName

Per creare componenti in una determinata cartella

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

Questa riga creerà un nome di cartella "dipendente", sotto di esso crea un componente "crea-dipendente".

senza creare alcuna cartella

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

ng g c componentname

Creerà i seguenti 4 file:

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

ng generate component nome_componente non funzionava nel mio caso perché invece di utilizzare "app" come nome della cartella del progetto, l'ho rinominato in qualcos'altro. L'ho cambiato di nuovo in app. Ora funziona bene

ng g c COMPONENTNAME

questo comando viene utilizzato per generare componenti utilizzando il terminale che uso in angular2.

g per generare c per componente

Nel mio caso mi capita di avere un altro .angular-cli.jsonfile nella mia srccartella. Rimuoverlo ha risolto il problema. Spero che sia d'aiuto

angular 4.1.1 angular-cli 1.0.1

ng g component component name

prima di digitare questo comando, controlla che sarai nel percorso della direttiva del progetto

ng gc --dry-run in modo da poter vedere cosa stai per fare prima di farlo effettivamente ti risparmierà un po 'di frustrazione. Ti mostra solo cosa farà senza farlo effettivamente.

Dovresti essere nella src/appcartella del tuo progetto angular-cli sulla riga di comando. Per esempio:

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

Solo allora genererà il tuo componente.

Hai aggiornato l'angular-cli all'ultima versione? o hai provato ad aggiornare node o npm o typescript? questo problema deriva da versioni come angular / typescript / node. Se stai aggiornando la cli, usa questo link qui. https://github.com/angular/angular-cli/wiki/stories-1.0-update

vai alla cartella del tuo progetto angolare e apri il comando promt un tipo "ng g component header" dove header è il nuovo componente che vuoi creare. Di default il componente header verrà creato all'interno del componente app.Puoi creare componenti all'interno di un component. Ad esempio, se vuoi creare un componente all'interno dell'intestazione che abbiamo creato sopra, digita "ng g component header / menu". Questo creerà un componente di menu all'interno del componente di intestazione

ng g c COMPONENTNAME dovrebbe funzionare, se stai ricevendo un'eccezione modulo non trovato, prova queste cose-

1. Controlla la directory del tuo progetto.
2. Se stai usando il codice di Visual Studio, ricaricalo o riapri il tuo progetto al suo interno.

Vai alla posizione del progetto nella cartella specificata

C:\Angular6\sample>

Qui puoi digitare il comando

C:\Angular6\sample>ng g c users

Qui g significa generare, c significa componente, utenti è il nome del componente

genererà i 4 file

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

Passo 1:

Entra nella directory del progetto! (cd nell'app creata).

Passo 2:

Digita il seguente comando ed esegui!

ng generate component [componentname]

• Aggiungi il nome del componente che desideri generare nella sezione [componentname].

O

ng generate c [componentname]

• Aggiungi il nome del componente che desideri generare nella sezione [componentname].

Entrambi funzioneranno

Per riferimento, controlla questa sezione della documentazione angolare!

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

Per riferimento controlla anche il link ad Angular Cli su GitHub!

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

ng generate component componentName.

Importerà automaticamente il componente in module.ts

cd al tuo progetto ed esegui,

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

O

> ng g c shopping-cart

(Questo creerà una nuova cartella nella cartella "app" con il nome "carrello della spesa" e creerà i file .html, .ts, .css. Specs.)

Se non desideri generare il file .spec

> ng g c shopping-cart --skipTests true

Se desideri creare un componente in una cartella specifica in "app"

> ng g c ecommerce/shopping-cart

(otterrai la struttura delle cartelle "app / ecommerce / carrello")

vai alla directory del tuo progetto in CMD ed esegui i seguenti comandi. Puoi anche usare il terminale del codice di Visual Studio.

ng generate component "component_name"

O

ng g c "component_name"

"component_name"verrà creata una nuova cartella con

nome_componente / nome_componente.component.html nome_componente / nome_componente.componente.spec.ts nome_componente / nome_componente.componente.ts nome_componente / nome_componente.componente.css

nuovo componente verrà aggiunto automaticamente modulo.

puoi evitare di creare file spec seguendo il comando

ng g c "component_name" --nospec

Esistono principalmente due modi per generare nuovi componenti in Angular, utilizzando ng g c <component_name>, un altro modo è quello di utilizzare ng generate component <component_name>. utilizzando uno di questi comandi è possibile generare un nuovo componente.