Después de de una extensa recopilación de datos hemos podido resolver esta contrariedad que suelen tener muchos de nuestros usuarios. Te dejamos la solución y nuestro deseo es serte de mucha apoyo.
Desarrolla aplicaciones en el contexto de un espacio de trabajo angular. Un espacio de trabajo contiene los archivos de uno o más proyectos. Un proyecto es el conjunto de archivos que comprenden una aplicación independiente o una biblioteca que se puede compartir.
La CLI angular ng new
comando crea un espacio de trabajo.
ng new <my-project>
Cuando ejecuta este comando, la CLI instala los paquetes npm angulares necesarios y otras dependencias en un nuevo espacio de trabajo, con una aplicación de nivel raíz llamada mi proyecto. La carpeta raíz del espacio de trabajo contiene varios archivos de configuración y soporte, y un archivo README con texto descriptivo generado que puede personalizar.
Por defecto, ng new
crea una aplicación de esqueleto inicial en el nivel raíz del espacio de trabajo, junto con sus pruebas de extremo a extremo. El esqueleto es para una aplicación de bienvenida simple que está lista para ejecutarse y es fácil de modificar. La aplicación de nivel raíz tiene el mismo nombre que el espacio de trabajo y los archivos de origen residen en el src/
subcarpeta del espacio de trabajo.
Este comportamiento predeterminado es adecuado para un estilo de desarrollo típico de “repositorios múltiples” en el que cada aplicación reside en su propio espacio de trabajo. Se anima a los usuarios principiantes e intermedios a utilizar ng new
para crear un espacio de trabajo independiente para cada aplicación.
Angular también admite espacios de trabajo con múltiples proyectos. Este tipo de entorno de desarrollo es adecuado para usuarios avanzados que están desarrollando bibliotecas compartibles y para empresas que utilizan un estilo de desarrollo “monorepo”, con un único repositorio y configuración global para todos los proyectos de Angular.
Para configurar un espacio de trabajo de monorepo, debe omitir la creación de la aplicación raíz. Consulte Configuración para un espacio de trabajo de varios proyectos a continuación.
Archivos de configuración del espacio de trabajo
Todos los proyectos dentro de un espacio de trabajo comparten un contexto de configuración CLI. El nivel superior del espacio de trabajo contiene archivos de configuración de todo el espacio de trabajo, archivos de configuración para la aplicación de nivel raíz y subcarpetas para los archivos fuente y de prueba de la aplicación de nivel raíz.
ARCHIVOS DE CONFIGURACIÓN DEL ESPACIO DE TRABAJO | OBJETIVO |
---|---|
.editorconfig |
Configuración para editores de código. Ver EditorConfig. |
.gitignore |
Especifica archivos no rastreados intencionalmente que Git debería ignorar. |
README.md |
Documentación introductoria para la aplicación raíz. |
angular.json |
Valores predeterminados de configuración de CLI para todos los proyectos en el espacio de trabajo, incluidas las opciones de configuración para compilar, servir y probar las herramientas que utiliza la CLI, como TSLint, Karma, y Transportador. Para obtener más información, consulte Configuración del espacio de trabajo angular. |
package.json |
Configura las dependencias del paquete npm que están disponibles para todos los proyectos en el espacio de trabajo. Ver documentación npm para el formato y contenido específicos de este archivo. |
package-lock.json |
Proporciona información sobre la versión de todos los paquetes instalados en node_modules por el cliente npm. Ver documentación npm para detalles. Si usa el cliente de hilo, este archivo será hilo.lock en lugar de. |
src/ |
Archivos de origen para el proyecto de aplicación de nivel raíz. |
node_modules/ |
Proporciona paquetes npm a todo el espacio de trabajo. En todo el espacio de trabajo node_modules las dependencias son visibles para todos los proyectos. |
tsconfig.json |
La base Mecanografiado configuración para proyectos en el espacio de trabajo. Todos los demás archivos de configuración heredan de este archivo base. Para obtener más información, consulte el Herencia de configuración con extensiones sección de la documentación de TypeScript. |
tslint.json |
Defecto TSLint configuración para proyectos en el espacio de trabajo. |
Archivos de proyecto de aplicación
De forma predeterminada, el comando CLI ng new my-app
crea una carpeta de espacio de trabajo llamada “my-app” y genera un nuevo esqueleto de aplicación en un src/
carpeta en el nivel superior del espacio de trabajo. Una aplicación recién generada contiene archivos fuente para un módulo raíz, con un componente raíz y una plantilla.
Cuando la estructura de archivos del espacio de trabajo está en su lugar, puede utilizar la ng generate
comando en la línea de comando para agregar funcionalidad y datos a la aplicación. Esta aplicación inicial a nivel de raíz es la aplicación predeterminada para los comandos CLI (a menos que cambie el valor predeterminado después de crear aplicaciones adicionales).
Además de usar la CLI en la línea de comandos, también puede manipular archivos directamente en la carpeta de origen de la aplicación y los archivos de configuración.
Para un espacio de trabajo de una sola aplicación, src/
La subcarpeta del espacio de trabajo contiene los archivos de origen (lógica de la aplicación, datos y activos) para la aplicación raíz. Para un espacio de trabajo de varios proyectos, proyectos adicionales en el projects/
carpeta contiene un project-name/src/
subcarpeta con la misma estructura.
Archivos de origen de la aplicación
Archivos en el nivel superior de src/
Apoyar la prueba y ejecución de su aplicación. Las subcarpetas contienen el origen de la aplicación y la configuración específica de la aplicación.
ARCHIVOS DE SOPORTE DE APLICACIONES | OBJETIVO |
---|---|
app/ |
Contiene los archivos de componentes en los que se definen la lógica y los datos de su aplicación. Vea los detalles abajo. |
assets/ |
Contiene imágenes y otros archivos de activos que se copiarán tal cual cuando se compile la aplicación. |
environments/ |
Contiene opciones de configuración de compilación para entornos de destino particulares. De forma predeterminada, hay un entorno de desarrollo estándar sin nombre y un entorno de producción (“prod”). Puede definir configuraciones de entorno de destino adicionales. |
favicon.ico |
Un icono que se utilizará para esta aplicación en la barra de marcadores. |
index.html |
La página HTML principal que se muestra cuando alguien visita su sitio. La CLI agrega automáticamente todos los archivos JavaScript y CSS al crear su aplicación, por lo que normalmente no necesita agregar ningún o etiquetas aquí manualmente. |
main.ts |
El principal punto de entrada para su aplicación. Compila la aplicación con el compilador JIT y arranca el módulo raíz de la aplicación (AppModule) para que se ejecute en el navegador. También puede usar el compilador AOT sin cambiar ningún código agregando el --aot bandera a la CLI build y serve comandos. |
polyfills.ts |
Proporciona scripts de polyfill para compatibilidad con el navegador. |
styles.sass |
Muestra una lista de archivos CSS que proporcionan estilos para un proyecto. La extensión refleja el preprocesador de estilo que ha configurado para el proyecto. |
test.ts |
El principal punto de entrada para sus pruebas unitarias, con alguna configuración específica de Angular. Por lo general, no es necesario editar este archivo. |
Los nuevos proyectos de Angular usan el modo estricto por defecto. Si no lo desea, puede optar por no participar al crear el proyecto. Para obtener más información, consulte Modo estricto.
Dentro de src/
carpeta, la app/
La carpeta contiene la lógica y los datos de su proyecto. Los componentes angulares, las plantillas y los estilos van aquí.
src/app/ ARCHIVOS |
OBJETIVO |
---|---|
app/app.component.ts |
Define la lógica del componente raíz de la aplicación, denominado AppComponent . La vista asociada con este componente raíz se convierte en la raíz de la jerarquía de vistas a medida que agrega componentes y servicios a su aplicación. |
app/app.component.html |
Define la plantilla HTML asociada a la raíz. AppComponent . |
app/app.component.css |
Define la hoja de estilo CSS base para la raíz. AppComponent . |
app/app.component.spec.ts |
Define una prueba unitaria para la raíz. AppComponent . |
app/app.module.ts |
Define el módulo raíz, llamado AppModule , que le dice a Angular cómo ensamblar la aplicación. Inicialmente declara solo el AppComponent . A medida que agrega más componentes a la aplicación, deben declararse aquí. |
Archivos de configuración de la aplicación
Los archivos de configuración específicos de la aplicación para la aplicación raíz residen en el nivel raíz del espacio de trabajo. Para un espacio de trabajo de varios proyectos, los archivos de configuración específicos del proyecto se encuentran en la raíz del proyecto, en projects/project-name/
.
Proyecto específico Mecanografiado los archivos de configuración heredan del espacio de trabajo tsconfig.json
y específico del proyecto TSLint los archivos de configuración heredan del espacio de trabajo tslint.json
.
ARCHIVOS DE CONFIGURACIÓN ESPECÍFICOS DE LA APLICACIÓN | OBJETIVO |
---|---|
.browserslistrc |
Configura el uso compartido de los navegadores de destino y las versiones de Node.js entre varias herramientas de front-end. Ver Lista de navegadores en GitHub para más información. |
karma.conf.js |
Específico de la aplicación Karma configuración. |
tsconfig.app.json |
Específico de la aplicación Mecanografiado configuración, incluidas las opciones del compilador de plantillas TypeScript y Angular. Consulte Configuración de TypeScript y Opciones del compilador angular. |
tsconfig.spec.json |
Mecanografiado configuración para las pruebas de la aplicación. Consulte Configuración de TypeScript. |
tslint.json |
Específico de la aplicación TSLint configuración. |
Archivos de prueba de un extremo a otro
Un e2e/
La carpeta en el nivel superior contiene archivos de origen para un conjunto de pruebas de un extremo a otro que corresponden a la aplicación de nivel raíz, junto con archivos de configuración específicos de la prueba.
Para un espacio de trabajo de varios proyectos, las pruebas de un extremo a otro específicas de la aplicación se encuentran en la raíz del proyecto, en projects/project-name/e2e/
.
e2e/ src/ (end-to-end tests for my-app) app.e2e-spec.ts app.po.ts protractor.conf.js (test-tool config) tsconfig.json (TypeScript config inherits from workspace)
Múltiples proyectos
Un espacio de trabajo de varios proyectos es adecuado para una empresa que utiliza un repositorio único y una configuración global para todos los proyectos de Angular (el modelo "monorepo"). Un espacio de trabajo de varios proyectos también es compatible con el desarrollo de bibliotecas.
Configuración para un espacio de trabajo de varios proyectos
Si tiene la intención de tener varios proyectos en un espacio de trabajo, puede omitir la generación de la aplicación inicial cuando crea el espacio de trabajo y darle al espacio de trabajo un nombre único. El siguiente comando crea un espacio de trabajo con todos los archivos de configuración de todo el espacio de trabajo, pero ninguna aplicación de nivel raíz.
ng new my-workspace --create-application false
Luego, puede generar aplicaciones y bibliotecas con nombres únicos dentro del espacio de trabajo.
cd my-workspace
ng generate application my-first-app
Estructura de archivos de proyectos múltiples
La primera aplicación generada explícitamente entra en el projects/
carpeta junto con todos los demás proyectos en el espacio de trabajo. Las bibliotecas recién generadas también se agregan bajo projects/
. Cuando crea proyectos de esta manera, la estructura de archivos del espacio de trabajo es totalmente coherente con la estructura del archivo de configuración del espacio de trabajo, angular.json
.
my-workspace/ ... (workspace-wide config files) projects/ (generated applications and libraries) my-first-app/ --(an explicitly generated application) ... --(application-specific config) e2e/ ----(corresponding e2e tests) src/ ----(e2e tests source) ... ----(e2e-specific config) src/ --(source and support files for application) my-lib/ --(a generated library) ... --(library-specific config) src/ --source and support files for library)
Archivos de proyecto de biblioteca
Cuando genera una biblioteca usando la CLI (con un comando como ng generate library my-lib
), los archivos generados van al projects/
carpeta del espacio de trabajo. Para obtener más información sobre cómo crear sus propias bibliotecas, consulte Creación de bibliotecas.
Las bibliotecas (a diferencia de las aplicaciones y sus proyectos e2e asociados) tienen sus propias package.json
configuración expediente.
Bajo la projects/
carpeta, la my-lib
carpeta contiene su código de biblioteca.
ARCHIVOS FUENTE DE LA BIBLIOTECA | OBJETIVO |
---|---|
src/lib |
Contiene la lógica y los datos de su proyecto de biblioteca. Al igual que un proyecto de aplicación, un proyecto de biblioteca puede contener componentes, servicios, módulos, directivas y canalizaciones. |
src/test.ts |
El principal punto de entrada para sus pruebas unitarias, con alguna configuración específica de la biblioteca. Por lo general, no es necesario editar este archivo. |
src/public-api.ts |
Especifica todos los archivos que se exportan desde su biblioteca. |
karma.conf.js |
Específico de la biblioteca Karma configuración. |
ng-package.json |
Archivo de configuración utilizado por ng-packagr para construir su biblioteca. |
package.json |
Configura las dependencias del paquete npm necesarias para esta biblioteca. |
tsconfig.lib.json |
Específico de la biblioteca Mecanografiado configuración, incluidas las opciones del compilador de plantillas TypeScript y Angular. Consulte Configuración de TypeScript. |
tsconfig.lib.prod.json |
Específico de la biblioteca Mecanografiado configuración que se utiliza al construir la biblioteca en modo de producción. |
tsconfig.spec.json |
Mecanografiado configuración para las pruebas de la biblioteca. Consulte Configuración de TypeScript. |
tslint.json |
Específico de la biblioteca TSLint configuración. |