Como criar um novo componente no Angular 4 usando CLI

No angular 2 eu uso

ng g c componentname

Mas não é suportado no Angular 4, então criei manualmente, mas mostra erro que não é um módulo.

Gerando e atendendo a um projeto Angular por meio de um servidor de desenvolvimento -

Primeiro vá para o diretório do projeto e digite o seguinte -

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

Aqui, “ D: \ Angular \ my-app> ” é o diretório do projeto do meu aplicativo Angular e o “ Usuário ” é o nome do componente.

O commonds parece -

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)

No Angular4 isso funcionará da mesma forma. Se você receber um erro, acho que seu problema está em outro lugar.

No prompt de comando digite

ng gerar o componente YOURCOMPONENTNAME

Existem até atalhos para isso: os comandos generatepodem ser usados ​​como ge componentcomo c:

ng gc YOURCOMPONENTNAME

você pode usar ng --help, ng g --helpou ng g c --helppara os documentos.

Claro, renomeie YOURCOMPONENTNAME para o nome que você gostaria de usar.

Docs: angular-cli adicionará referência a componentes, diretivas e canais automaticamente no app.module.ts.

Atualização: ainda funciona na versão 8 do Angular.

1) primeiro vá para o diretório do projeto

2) em seguida, execute abaixo do comando no terminal.

ng generate component componentname

OU

ng g component componentname

3) depois disso, você verá uma saída como esta,

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 você deseja criar um novo componente sem .specarquivo, você pode usar

ng g c component-name --spec false

Você pode encontrar essas opções usando ng g c --help

ng g component componentname

Ele gera o componente e adiciona o componente às declarações do módulo.

ao criar o componente manualmente, você deve adicionar o componente na declaração do módulo assim:

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

Certifique-se de estar no diretório do seu projeto na linha CMD

    ng g component componentName

Para criar um componente em determinada pasta

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

Esta linha criará uma pasta com o nome 'funcionário', abaixo dela, um componente 'criar funcionário'.

sem criar nenhuma pasta

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

ng g c componentname

Ele criará os seguintes 4 arquivos:

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

ng generate component_name de componente não estava funcionando no meu caso porque em vez de usar 'app' como nome de pasta de projeto, mudei o nome para outro. Eu mudei novamente para app. Agora está funcionando bem

ng g c COMPONENTNAME

este comando usa para gerar componente usando o terminal que eu uso no angular2.

g para gerar c para componente

No meu caso, tenho outro .angular-cli.jsonarquivo na minha srcpasta. Removê-lo resolveu o problema. Espero que ajude

angular 4.1.1 angular-cli 1.0.1

ng g component component name

antes de digitar esta verificação, você estará no caminho da diretiva do seu projeto

ng gc --dry-run para que você possa ver o que está prestes a fazer antes de realmente fazê-lo, evitará algumas frustrações. Apenas mostra o que vai fazer sem realmente fazer.

Você deve estar na src/apppasta do seu projeto angular-cli na linha de comando. Por exemplo:

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

Só então ele irá gerar seu componente.

vá para o diretório do seu projeto no CMD e execute os seguintes comandos. Você também pode usar o terminal de código do Visual Studio.

ng generate component "component_name"

OU

ng g c "component_name"

uma nova pasta com "component_name"será criada

component_name / component_name.component.html component_name / component_name.component.spec.ts component_name / component_name.component.ts component_name / component_name.component.css

novo componente será o módulo adicionado automaticamente.

você pode evitar a criação de um arquivo de especificação seguindo o comando

ng g c "component_name" --nospec

Você atualizou o angular-cli para a versão mais recente? ou você tentou atualizar o node ou npm ou typescript? esse problema ocorre por causa de versões como angular / typescript / node. Se você está atualizando o cli, use este link aqui. https://github.com/angular/angular-cli/wiki/stories-1.0-update

vá para a pasta do seu projeto angular e abra o prompt de comando um tipo "ng g component header" onde header é o novo componente que você deseja criar. Como padrão, o componente header será criado dentro do componente do app. Você pode criar componentes dentro de um componente. Por exemplo, se você deseja criar um componente dentro do cabeçalho que fizemos acima, digite "ng g cabeçalho / menu do componente". Isso criará um componente de menu dentro do componente de cabeçalho

ng g c COMPONENTNAME deve funcionar, se você está obtendo uma exceção de módulo não encontrado, tente estas coisas-

1. Verifique o diretório do seu projeto.
2. Se você estiver usando o código do Visual Studio, recarregue-o ou reabra seu projeto nele.

Vá para a localização do projeto na pasta especificada

C:\Angular6\sample>

Aqui você pode digitar o comando

C:\Angular6\sample>ng g c users

Aqui g significa gerar, c significa componente, usuários é o nome do componente

irá gerar os 4 arquivos

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

Passo 1:

Entre no diretório do projeto! (cd no aplicativo criado).

Passo 2:

Digite o seguinte comando e execute!

ng generate component [componentname]

• Adicione o nome do componente que deseja gerar na seção [nomedocomponente].

OU

ng generate c [componentname]

• Adicione o nome do componente que deseja gerar na seção [nomedocomponente].

Ambos funcionarão

Para referência, verifique esta seção da Documentação Angular!

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

Para referência também confira o link para Angular Cli no github!

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

ng generate component componentName.

Ele importará automaticamente o componente em module.ts

cd para o seu projeto e execute,

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

OU

> ng g c shopping-cart

(Isso criará uma nova pasta na pasta "app" com o nome "carrinho de compras" e criará arquivos .html, .ts, .css. Specs.)

Se você não deseja gerar o arquivo .spec

> ng g c shopping-cart --skipTests true

Se você deseja criar um componente em qualquer pasta específica em "app"

> ng g c ecommerce/shopping-cart

(você obterá a estrutura de pastas "app / ecommerce / shopping-cart")

Existem basicamente duas maneiras de gerar um novo componente no Angular, usando ng g c <component_name>, outra forma é usando ng generate component <component_name>. usando um desses comandos, um novo componente pode ser gerado.