Cómo crear un nuevo componente en Angular 4 usando CLI

En angular 2 utilizo

ng g c componentname

Pero no es compatible con Angular 4, así que lo creé manualmente, pero muestra el error de que no es un módulo.

Generando y sirviendo un proyecto Angular a través de un servidor de desarrollo -

Primero vaya a su Directorio de proyectos y escriba lo siguiente:

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

Aquí " D: \ Angular \ my-app> " es mi directorio de proyectos de la aplicación Angular y el " Usuario " es el nombre del componente.

Los comunes se parecen a ...

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)

En Angular4, esto funcionará igual. Si recibe un error, creo que su problema está en otra parte.

En el símbolo del sistema, escriba

ng generar el componente YOURCOMPONENTNAME

Incluso hay abreviaturas para esto: los comandos generatese pueden usar como gy componentcomo c:

ng gc YOURCOMPONENTNAME

puede usar ng --help, ng g --helpo ng g c --helppara los documentos.

Por supuesto, cambie el nombre de YOURCOMPONENTNAME al nombre que le gustaría utilizar.

Documentos: angular-cli agregará referencias a componentes, directivas y tuberías automáticamente en app.module.ts.

Actualización: esto todavía funciona en la versión 8 de Angular.

1) primero vaya a su directorio de proyectos

2) luego Ejecutar debajo del comando en la terminal.

ng generate component componentname

O

ng g component componentname

3) después de eso, verá un resultado como este,

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)

Si desea crear un nuevo componente sin .specarchivo, puede usar

ng g c component-name --spec false

Puede encontrar estas opciones usando ng g c --help

ng g component componentname

Genera el componente y lo agrega a las declaraciones del módulo.

al crear el componente manualmente, debe agregar el componente en la declaración del módulo de esta manera:

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

Asegúrese de estar en el directorio de su proyecto en la línea CMD

    ng g component componentName

Para crear componentes en cierta carpeta

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

Esta línea creará un nombre de carpeta 'empleado', debajo de eso crea un componente 'crear-empleado'.

sin crear ninguna carpeta

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

ng g c componentname

Creará los siguientes 4 archivos:

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

ng generate component component_name no funcionaba en mi caso porque en lugar de usar 'app' como nombre de la carpeta del proyecto, lo renombré a otra cosa. Lo cambié de nuevo a app. Ahora está funcionando bien

ng g c COMPONENTNAME

este comando se usa para generar componentes usando el terminal que uso en angular2.

g para generar c para el componente

En mi caso, tengo otro .angular-cli.jsonarchivo en mi srccarpeta. Quitarlo resolvió el problema. Espero eso ayude

angular 4.1.1 angular-cli 1.0.1

ng g component component name

antes de escribir esta verificación de encomio, estará en la ruta de la directiva de su proyecto

ng gc --dry-run para que pueda ver lo que está a punto de hacer antes de hacerlo, le ahorrará algo de frustración. Solo le muestra lo que va a hacer sin realmente hacerlo.

Debería estar en la src/appcarpeta de su proyecto angular-cli en la línea de comando. Por ejemplo:

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

Solo entonces generará su componente.

¿Actualizaste angular-cli a la última versión? o intentaste actualizar el nodo o npm o mecanografiado? este problema se debe a versiones como angular / typecript / node. Si está actualizando el cli, use este enlace aquí. https://github.com/angular/angular-cli/wiki/stories-1.0-update

vaya a la carpeta de su proyecto angular y abra el comando promt an type "ng g component header" donde header es el nuevo componente que desea crear. De forma predeterminada, el componente de encabezado se creará dentro del componente de la aplicación. Puede crear componentes dentro de un componente. Por ejemplo, si desea crear un componente dentro del encabezado que hicimos anteriormente, escriba "ng g componente encabezado / menú". Esto creará un componente de menú dentro del componente de encabezado

ng g c COMPONENTNAME debería funcionar, si está obteniendo la excepción del módulo no encontrado, intente estas cosas:

1. Consulta el directorio de tu proyecto.
2. Si está utilizando código de Visual Studio, vuelva a cargarlo o vuelva a abrir su proyecto en él.

Ir a la ubicación del proyecto en la carpeta especificada

C:\Angular6\sample>

Aquí puede escribir el comando

C:\Angular6\sample>ng g c users

Aquí g significa generar, c significa componente, usuarios es el nombre del componente

generará los 4 archivos

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

Paso 1:

¡Ingrese al directorio de proyectos! (cd en la aplicación creada).

Paso 2:

Escriba el siguiente comando y ejecute!

ng generate component [componentname]

• Agregue el nombre del componente que desea generar en la sección [nombre del componente].

O

ng generate c [componentname]

• Agregue el nombre del componente que desea generar en la sección [nombre del componente].

Ambos funcionarán

Para referencia, consulte esta sección de Documentación angular.

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

Como referencia, también consulte el enlace a Angular Cli en github.

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

ng generate component componentName.

Importará automáticamente el componente en module.ts

cd a su proyecto y ejecutar,

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

O

> ng g c shopping-cart

(Esto creará una nueva carpeta en la carpeta "app" con el nombre "shopping-cart" y creará archivos .html, .ts, .css. Specs).

Si no desea generar un archivo .spec

> ng g c shopping-cart --skipTests true

Si desea crear un componente en cualquier carpeta específica en "aplicación"

> ng g c ecommerce/shopping-cart

(obtendrá la estructura de carpetas "app / ecommerce / shopping-cart")

vaya al directorio de su proyecto en CMD y ejecute los siguientes comandos. También puede usar el terminal de código de Visual Studio.

ng generate component "component_name"

O

ng g c "component_name"

"component_name"se creará una nueva carpeta con

nombre_componente / nombre_componente.component.html nombre_componente / nombre_componente.component.spec.ts nombre_componente / nombre_componente.component.ts nombre_componente / nombre_componente.component.css

El nuevo componente se agregará automáticamente al módulo.

puede evitar crear un archivo de especificaciones siguiendo el comando

ng g c "component_name" --nospec

Hay principalmente dos formas de generar un nuevo componente en Angular, usando ng g c <component_name>, otra forma es usando ng generate component <component_name>. utilizando uno de estos comandos se puede generar un nuevo componente.