Criar componente para um módulo específico com Angular-CLI

170

Estou começando a usar o angular-cli e já li muito para encontrar uma resposta sobre o que quero fazer ... sem sucesso, então vim aqui.

Existe uma maneira de criar um componente para um novo módulo?

por exemplo: ng g module newModule

ng g component newComponent (como adicionar este componente ao newModule ??)

porque o comportamento padrão do angular-cli é colocar todos os novos componentes dentro app.module. Gostaria de escolher onde meu componente estará, para poder criar módulos separados e não ter todos os meus componentes dentro app.module. É possível fazer isso usando angular-cli ou eu tenho que fazer isso manualmente?

Elmer Dantas
fonte

Respostas:

216

Para criar um componente como parte de um módulo, você deve

  1. ng g module newModule para gerar um módulo,
  2. cd newModulepara mudar o diretório para a newModulepasta
  3. ng g component newComponent para criar um componente como filho do módulo.

ATUALIZAÇÃO: Angular 9

Agora, não importa em que pasta você está ao gerar o componente.

  1. ng g module NewMoudle para gerar um módulo.
  2. ng g component new-module/new-component para criar NewComponent.

Nota: Quando a CLI Angular vê new-module / new-component, ela entende e converte o caso para corresponder a new-module -> NewModule e new-component -> NewComponent. Pode ficar confuso no começo, portanto, a maneira mais fácil é combinar os nomes no 2 com os nomes das pastas para o módulo e o componente.

Alexander Ciesielski
fonte
92
Você também pode permanecer na raiz do projeto e prefixar o componente com o nome do módulo ng g component moduleName/componentName.
JayChase
3
Com a Angular CLI versão 1.6.8, eu sempre obtia o sys de erro que 'o módulo especificado não existe', quando separava um módulo existente. Funcionou quando tentei o seguinte comando: ng generate service service1 --module = module1 / module1.module.ts . Nota: meu nome serviço é service1 e meu nome módulo é module1
Diallo
8
Isso criaria um novo componente no diretório especificado, mas não o registraria no módulo. Ele será registrado no app.module. você precisaria especificar o módulo com a --moduleopção como:ng g component <your component> --module=<your module name>
Vinit Sarvade
3
desatualizado em 6 de outubro, Angular 6
tom87416 06/06
4
Desatualizado. O Angular 6 não depende das estruturas de pastas para ver em qual módulo o componente está. Dois módulos podem estar no mesmo diretório. @ daniel resposta stackoverflow.com/a/44812014/511719 trabalha para Angular 6.
imafish
145
ng g component nameComponent --module=app.module.ts
Daniel Fernando Acosta Ceballo
fonte
10
as outras respostas funcionam, mas essa é a mais eficiente. Sua pena acrescentar --dry-runao final do que apenas para ver o que vai ser afetado, é um cheque bom sanidade
tony09uk
ng g component path/to/myComponent --module=app.module.ts --dry-runé um comando muito útil; apenas para garantir que seu componente seja criado no diretório correto.
theman0123 6/03
74

Não tenho certeza se a resposta de Alexander Ciesielski talvez estivesse correta no momento da redação, mas posso verificar que isso não funciona mais. Não importa qual diretório do projeto você executa a CLI Angular. Se você digitar

ng g component newComponent

ele irá gerar um componente e importá-lo para o arquivo app.module.ts

A única maneira de usar a CLI para importá-la automaticamente para outro módulo é especificando

ng g component moduleName/newComponent

onde moduleName é um módulo que você já definiu em seu projeto. Se o moduleName não existir, ele colocará o componente no diretório moduleName / newComponent, mas ainda o importará para app.module

Unidade de disco
fonte
2
foi a resposta certa para mim no momento .. funciona corretamente. Eu crio uma solicitação de recebimento para adicionar essas informações aos documentos. Um de seus colaboradores me pediu para remover a parte do CD-ing .. no final será 1. ng g module newModule 2. de ng g component new-module/newComponentacordo com ele, deve ser um novo módulo, em vez de um novo módulo
Elmer Dantas
Apenas para salientar, usando a técnica de Alexander Ciesielski e funciona conforme o esperado. Devo observar, eu não precisava criar o componente simplesmente necessário para criar a pasta. Então, apenas mkdiruma pasta e, em seguida, executei o componente newComponent dentro da pasta recém-criada.
precisa saber é o seguinte
2
Eu diria que a resposta completa éng g component moduleName/newComponent -m moduleName
slavugan
No meu caso, o nome do componente é igual ao nome do módulo, então criei o módulo com ng generate module {modComName}1) Criamos a pasta 2) Criamos um arquivo de módulo dentro da pasta com o mesmo nome; o comando ng generate component {modComName}realmente 1) Criado um arquivo de componente dentro da pasta de mesmo nome 2) Modificado o módulo para importar o componente
A Red Pea
Tenha cuidado se você criar um módulo e importá-lo para um módulo base; ngadiciona importações ao final da matriz; mas você pode querer: "A ordem das rotas na configuração é importante e isso é por design".
The Red Pea
37

Não encontrei uma resposta que mostrasse como usar o cli para gerar um componente dentro de uma pasta de módulo de nível superior e também fizesse com que o componente adicionasse automaticamente a coleção de declarações do módulo.

Para criar o módulo, execute o seguinte:

ng g module foo

Para criar o componente dentro da pasta foo module e adicioná-lo à coleção de declarações do foo.module.ts, execute o seguinte:

ng g component foo/fooList --module=foo.module.ts

E o cli irá montar o módulo e o componente assim:

insira a descrição da imagem aqui

--EDIT a nova versão do CLI angular se comporta de maneira diferente. 1.5.5 não deseja um nome de arquivo de módulo, portanto, o comando com v1.5.5 deve ser

ng g component foo/fooList --module=foo
cobolstinks
fonte
1
Yay pelo --moduleargumento; os documentos dizem "Permite a especificação do módulo de declaração". ; Eu acrescentaria --moduleespecifica quais existente módulo deve ser modificados para importar o módulo que você está prestes a criar
The Red Pea
2
@TheRedPea Eu acredito que você quis dizer "especifica --module qual módulo existente deve ser modificado para importar o componente você é ..."
cobolstinks
Sim, você está certo! Existente módulo modificado com referência à nova componente
A Red Pea
13

Você pode tentar o comando abaixo, que descreve o,

ng -> Angular 
g  -> Generate
c  -> Component
-m -> Module 

Então seu comando será como:

ng g c user/userComponent -m user.module
user2662006
fonte
9

Para Angular v4 e superior, basta usar:

ng g c componentName -m ModuleName
Tio Shemzz
fonte
1
Gera um erro Specified module does not existenquanto módulo existia
Pardeep Jain
1
Você não especifica o nome do módulo, especifica o nome do arquivo do módulo.
Roger
1
Funciona como charme! por exemplo, se o seu arquivo de módulo é user-settings.module.tse você deseja adicionar um componente public-info, o comando será:ng g c PublicInfo -m user-settings
Spiral Out
1
Esta é a resposta mais simples e limpa!
Barna Tekse 29/04
8

Isto é o que funcionou para mim :

1 -->  ng g module new-module

2 -->  ng g c new-module/component-test --module=new-module/new-module.module.ts

Se você deseja gerar um componente sem seu diretório, use o --flat sinalizador

Mohamed Makkaoui
fonte
não precisa escrever .ts
Lapenkov Vladimir 30/06
--module = caminho-para-módulo trabalhou forma me agradece @Mohamed Makkaoui
Ian Poston Framer
8
  1. Primeiro, você gera um módulo executando.
ng g m modules/media

isso irá gerar um módulo chamado mediadentro da modulespasta.

  1. Segundo, você gera um componente adicionado a este módulo
ng g c modules/media/picPick --module=modules/media/media.module.ts

a primeira parte do comando ng g c modules/media/picPickirá gerar uma pasta de componente chamada pasta picPickinterna modules/mediaque conterá nosso novo mediamódulo.

a segunda parte tornará nosso novo picPickcomponente declarado no mediamódulo, importando-o no arquivo do módulo e anexando-o à declarationsmatriz deste módulo.

árvore de trabalho

insira a descrição da imagem aqui

Elhakim
fonte
2
Você pode explicar mais sobre como isso responde à pergunta?
Sterling Archer
Obrigado por sua nota, eu editei a minha resposta como eu sou um @CertainPerformance futuro leitor
Elhakim
3

Vá para o nível do módulo / também podemos estar no nível raiz e digite os comandos abaixo

ng g component "path to your component"/NEW_COMPONENT_NAME -m "MODULE_NAME"

Exemplo:

ng g component common/signup/payment-processing/OnlinePayment -m pre-login.module
Sandeep Patel
fonte
3

Primeiro gere o módulo:

ng g m moduleName --routing

Isso criará uma pasta moduleName e navegue até a pasta module

cd moduleName

E depois disso gerar o componente:

ng g c componentName --module=moduleName.module.ts --flat

Use --flat para não criar pasta filho dentro da pasta do módulo

Varun Jain
fonte
1

Estou tendo problemas semelhantes com vários módulos no aplicativo. Um componente pode ser criado para qualquer módulo, portanto, antes de criar um componente, precisamos especificar o nome do módulo específico.

'ng generate component newCompName --module= specify name of module'
vivek
fonte
1

Use este comando simples:

ng g c users/userlist

users: O nome do seu módulo.

userlist: O nome do seu componente.

Hasan Fathi
fonte
1

De acordo com os documentos da Angular, a maneira de criar um componente para um módulo específico é:

ng g component <directory name>/<component name>

"nome do diretório" = onde a CLI gerou o módulo de recurso

Exemplo: -

ng generate component customer-dashboard/CustomerDashboard

Isso gera uma pasta para o novo componente na pasta do painel do cliente e atualiza o módulo de recurso com o CustomerDashboardComponent

Sksaif Uddin
fonte
1

Primeira corrida ng g module newModule . Então corrang g component newModule/newModule --flat

Tuan van Duong
fonte
1

Criei módulo filho baseado em componente com pasta raiz específica

Esse comando cli abaixo que eu especifiquei, confira

ng g c Repair/RepairHome -m Repair/repair.module

Repair is Root Folder do nosso módulo filho

-m é --module

c para compount

g para gerar

sathish
fonte
1

Corri para esse problema hoje enquanto desenvolvia um aplicativo Angular 9. Eu recebi o "módulo não existe erro" sempre que adicionava o .module.tsou .moduleao nome do módulo. O CLI precisa apenas do nome do módulo sem extensão. Supondo que eu tivesse um nome de módulo:, brands.module.tso comando que usei foi

ng g c path/to/my/components/brands-component -m brands --dry-run

remova --dry-runquando confirmar que a estrutura do arquivo está correta.

doubleya
fonte
1
ng g c componentName --module=path-to-your-module-from-src-folder

exemplo:

ng g c testComponent --module=/src/app/home/test-component/test-component.module
Ivailo Dimitrov
fonte
1

Um padrão comum é criar um recurso com uma rota, um módulo carregado lento e um componente.

Rota: myapp.com/feature

app-routing.module.ts

{ path: 'feature', loadChildren: () => import('./my-feature/my-feature.module').then(m => m.MyFeatureModule) },

Estrutura do arquivo:

app   
└───my-feature
      my-feature-routing.module.ts
      my-feature.component.html
      my-feature.component.css
      my-feature.component.spec.ts
      my-feature.component.ts
      my-feature.module.ts

Tudo isso pode ser feito no CLI com:

ng generate module my-feature --module app.module --route feature

Ou mais curto

ng g m my-feature --module app.module --route feature

Ou, se você deixar de fora o nome, o cli solicitará isso. Muito útil quando você precisa criar vários recursos

ng g m --module app.module --route feature
Jared Whipple
fonte
0

Adicione um componente ao aplicativo Angular 4 usando a Angular CLI

Para adicionar um novo componente angular 4 para o aplicativo, comando de uso ng g component componentName. Após a execução deste comando, a Angular CLI adiciona uma pasta component-nameem src\app. Além disso, as referências do mesmo são adicionadas ao src\app\app.module.tsarquivo automaticamente.

Um componente deve ter uma @Componentfunção decoradora seguida por uma classque precisa ser exporteditada. A @Componentfunção decoradora aceita metadados.

Adicione um componente a uma pasta específica do aplicativo Angular 4 usando a Angular CLI

Para adicionar um novo componente a uma pasta específica, use o comando ng g component folderName/componentName

Zameer
fonte
0

Se você tiver vários aplicativos declarados em .angular-cli.json (por exemplo, no caso de trabalhar no módulo de recursos)

"apps": [{
    "name": "app-name",
    "root": "lib",
    "appRoot": ""
}, {...} ]

Você pode :

ng g c my-comp -a app-name

-a significa --app (nome)

Sam
fonte
0

Eu uso esse comando específico para gerar componentes dentro de um módulo.

ng g c <module-directory-name>/<component-name>

Este comando irá gerar o componente local para o módulo. ou Você pode alterar o diretório primeiro digitando.

cd <module-directory-name>

e crie o componente.

ng g c <component-name>

Nota: o código entre <> representa nomes específicos do usuário.

Shashank Rawat
fonte
0

1.- Crie seu módulo de recursos como de costume.

ng generate module dirlevel1/module-name

2.- Você pode especificar o CAMINHO DE RAIZ do seu projeto no --module (apenas no --module, (/) os pontos raiz do seu ROOT DO PROJETO e NÃO É O ROOT DO SISTEMA !!! )

ng generate component dirlevel1/component-name --module /src/app/dirlevel1/module-name.module.ts

Exemplo real:

ng generate module stripe/payment-methods-list
ng generate component stripe/payment-methods-list --module=/src/app/stripe/payment-methods-list/payment-methods-list.module.ts 

Resultado:

CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.scss (0 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.html (39 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.spec.ts (768 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.ts (322 bytes)
UPDATE src/app/stripe/payment-methods-list/payment-methods-list.module.ts (311 bytes)
[OK] Generated component!

Testado com CLI Angular: 9.1.4

isaax2
fonte
0

Faça um módulo, serviço e componente em particular módulo

Basic:

    ng g module chat     
    ng g service chat/chat -m chat
    ng g component chat/chat-dialog -m chat

    In chat.module.ts:
        exports: [ChatDialogComponent],
        providers: [ChatService]

    In app.module.ts:

        imports: [
            BrowserModule,
            ChatModule
        ]

    Now in app.component.html:
        <chat-dialog></chat-dialog>


LAZY LOADING:
    ng g module pages --module app.module --route pages

        CREATE src/app/pages/pages-routing.module.ts (340 bytes)
        CREATE src/app/pages/pages.module.ts (342 bytes)
        CREATE src/app/pages/pages.component.css (0 bytes)
        CREATE src/app/pages/pages.component.html (20 bytes)
        CREATE src/app/pages/pages.component.spec.ts (621 bytes)
        CREATE src/app/pages/pages.component.ts (271 bytes)
        UPDATE src/app/app-routing.module.ts (8611 bytes)       

    ng g module pages/forms --module pages/pages.module --route forms

        CREATE src/app/forms/forms-routing.module.ts (340 bytes)
        CREATE src/app/forms/forms.module.ts (342 bytes)
        CREATE src/app/forms/forms.component.css (0 bytes)
        CREATE src/app/forms/forms.component.html (20 bytes)
        CREATE src/app/forms/forms.component.spec.ts (621 bytes)
        CREATE src/app/forms/forms.component.ts (271 bytes)
        UPDATE src/app/pages/pages-routing.module.ts (437 bytes)
Carlos Luis Rivero
fonte