node.js - proyecto - Conectar express.js con Angular CLI en un entorno de desarrollo

descargar angular 2

Question

Encontré un excelente tutorial que explica cómo configurar Express.js con Angular CLI, pero en este tutorial la aplicación angular se compila en una carpeta de producción dist: https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli

¿Cómo integro express.js con Angular CLI, pero quiero que express.js funcione con la versión de desarrollo de la aplicación Angular y quiero que el nodemon se reinicie si realizo cambios en la aplicación express O angular?

Han pasado más de ocho horas tratando de hacer que esto funcione. ¡Gracias!

No quiero ejecutar ''ng build'' cada vez que hago un cambio en la aplicación Angular (esto lleva demasiado tiempo). Quiero una recarga instantánea cada vez que guardo un cambio en mi aplicación angular (como si estuviera ejecutando ''ng serve'' '') o la aplicación expresa.

Encontré un tutorial donde conectas Angular 2 QuickStart con Express, funciona pero estoy buscando usar Angular CLI.

Entiendo que la CLI angular usa WebPack mientras que la QuickStart usa System.js

Answer 1

Explicación más larga

He pasado una cantidad decente de tiempo pensando cómo hacerlo en mis propios entornos de desarrollo. Lo mejor que he encontrado es una implementación doble que combina una gran cantidad de soluciones de echonax, squirrelsareduck y Max, pero aprovechando las estrategias integradas de Angular CLI para observar los cambios frontend / angulares, y usar nodemon para mirar el backend / Expresar cambios. En pocas palabras, terminará ejecutando dos procesos (ng build y nodemon) para poner en funcionamiento su entorno de desarrollo, pero se reconstruye automáticamente y se ejecuta todo bajo un servidor web Express.

El primer proceso que deberá ejecutar será construir la carpeta Dist Angular y observar los cambios realizados en la interfaz Angular. Por suerte para nosotros, Angular CLI puede hacer esto de forma nativa (Probado en Angular CLI> = 1.5) con el siguiente comando:

ng build --watch

Deberá dejar esto en ejecución en segundo plano, pero esto vigilará cualquier cambio realizado en el código Angular y reconstruirá los paquetes sobre la marcha.

El segundo proceso involucra el uso de nodemon para ejecutar su servidor Express, y puede tomar un poco más de configuración y planificación dependiendo de cuán extensa sea su configuración de backend / Express. Solo asegúrese de que Express apunte a su archivo de índice en la carpeta dist . La gran ventaja aquí es que puedes agregar todo esto a un Gulpfile con gulp-nodemon para hacer aún más tareas secuenciales después de ejecutar nodemon para ver el backend / Express, como alinear tu backend, ejecutar pruebas paralelas a tus compilaciones, minimizar tu backend , o cualquier otra cosa que se te ocurra usar Gulp para. Use npm o Yarn para agregar e instalar nodemon a las dependencias de su proyecto, y luego ejecute lo siguiente para iniciar su servidor Express:

nodemon app.js

Reemplace app.js con cualquier archivo que esté usando para construir su backend Express, y ahora debería reconstruirse en cualquier momento en que se realicen cambios en su backend.

tldr;

Ejecute dos procesos separados en segundo plano para iniciar su entorno de desarrollo. Primer intento:

ng build --watch

En segundo lugar, agregue nodemon a las dependencias de su proyecto y ejecute el siguiente comando en segundo plano donde se reemplaza app.js por lo que se llame a su archivo Express:

nodemon app.js

Prima

Como se le preguntó cómo recargar automáticamente el navegador, su mejor opción será aprovechar un complemento del navegador llamado LiveReload. Ya que vamos a utilizar nodemon para ver nuestro backend, puede considerar seriamente usar Gulp si aún no ha ejecutado nodemon y LiveReload como dos tareas. Su mejor apuesta para implementar LiveReload en Gulp es usar el complemento gulp-refresh ya que esta es una versión actualizada del complemento gulp-livereload. Terminarás con un Gulpfile parecido a esto:

const defaultAssets = require(''./config/assets/default''),
  gulp = require(''gulp''),
  gulpLoadPlugins = require(''gulp-load-plugins''),
  runSequence = require(''run-sequence''),
  plugins = gulpLoadPlugins(),
  semver = require(''semver'');
  
// I store the locations of my backend js files in a config file, so 
// that I can call them later on. ie; defaultAssets
gulp.task(''nodemon'', function () {
  // Node.js v7 and newer use different debug argument
  const debugArgument = semver.satisfies(process.versions.node, ''>=7.0.0'') ? ''--inspect'' : ''--debug'';

  return plugins.nodemon({
    script: ''app.js'',
    nodeArgs: [debugArgument],
    ext: ''js,html'',
    verbose: true,
    watch: defaultAssets.server.allJS
  });
});

// Watch Files For Changes
gulp.task(''watch'', function () {
  // Start LiveReload
  plugins.refresh.listen();

  // Watch backend for changes
  gulp.watch(defaultAssets.server.allJS).on(''change'', plugins.refresh.changed);
  // Watch frontend dist folder for changes
  gulp.watch(''./dist'').on(''change'', plugins.refresh.changed);
});
  
  
gulp.task(''default'', function (done) {
  runSequence([''nodemon'', ''watch''], done);
});

Ahora simplemente ejecuta el comando gulp en lugar de nodemon app.js para iniciar tu servidor Express.

Answer 2

Con el uso de angular-cli, el comando ng build o ng build --prod le proporcionará archivos empaquetados junto con un index.html . Haz que tu app.js (node ​​/ express) apunte a este archivo.

Ejemplo:

app.use( express.static(__dirname + ''/src'' ) ); //<- it will automatically search for index.html under src folder.

Answer 3

Me preguntaba esto también. El curso de Udemy en la pila MEAN de Max Schwarzmüller tiene un código de ejemplo allí para integrar Express y Angular. En el archivo package.json de ese código de ejemplo, use usa la propiedad scripts.build para dar a webpack un comando que vigila los archivos angulares y se actualiza en consecuencia. No quiero copiar su código aquí, pero esa es la idea general. El resto requerirá algún trabajo de descubrimiento.

En el archivo readme, él sugiere ejecutar npm run build que ejecuta webpack, y luego en un nuevo terminal ejecutando npm start para el servidor de nodo. Entonces, en teoría, esto ejecuta dos programas como sugirió en su versión de la respuesta. Pero, hace una forma más "guionada" / predefinida de iniciar el proceso de construcción Angular, en lugar de navegar al subdirectorio Angular y escribir ng build --watch allí, e iniciar la aplicación Express por separado.

Answer 4

Puede ser que pueda agregar una dependencia llamada '' https://www.npmjs.com/package/concurrently '' o ( npm-run-all , parallelshell ).

npm i concurrently --save-dev

luego edita el package.json así: `

"scripts": {
        "dev": "concurrently /"ng build -w/"  /"cross-env NODE_ENV=development node ./" "
    }

`Esto puede ser un trabajo.

Referencias:

ejemplo https://www.npmjs.com/package/concurrently : https://.com/a/30950298/7421101 ,

npm-run-all : https://.com/a/38213212/7421101 ,

Ejemplo de parallelshell : https://.com/a/42373547/7421101 .

Answer 5

NUEVA RESPUESTA

Mi experiencia de 15 horas me ha enseñado que tratar de servir una aplicación Angular con Express durante el desarrollo NO es una buena idea. La forma correcta es ejecutar Angular y Express como dos aplicaciones diferentes en dos puertos diferentes. Angular se servirá en el puerto 4200 y Express en el puerto 3000 como de costumbre. A continuación, configure un proxy para las llamadas a la API de la aplicación Express.

Agregue proxy.config.json a la raíz del proyecto Angular:

{
  "/api/*":{
    "target":"http://localhost:3000",
    "secure":false,
    "logLevel":"debug"
  }
}

Abre una nueva pestaña de terminal y ejecuta este comando para iniciar la aplicación Express:

nodemon [YOUR_EXPRESS_APP.js] --watch server

(YOUR_EXPRESS_APP.js generalmente se llama server.js o app.js. server es un directorio donde guardas todos tus archivos de aplicaciones Express)

Abra una segunda pestaña de terminal y ejecute este comando para iniciar la aplicación Angular:

ng serve --proxy-config proxy.config.json

Esto asegurará que la aplicación Angular se reconstruya y el navegador se vuelva a cargar cuando se realice un cambio en cualquier archivo de la aplicación Angular. De manera similar, el servidor Express se reiniciará cuando se realice un cambio en cualquier archivo de aplicación Express.

Su aplicación Angular está aquí: http://localhost:4200/

Mire este video para ver cómo configurar un proxy para sus llamadas a la API con Angular CLI

NOTA: esta configuración solo se aplica al entorno de desarrollo. En producción, usted querrá ejecutar ng build y colocar la aplicación Angular dentro de un directorio dist para ser servido por Express. En producción, solo hay UNA aplicación en ejecución: una aplicación Express que sirve para su aplicación Angular.

RESPUESTA ANTERIOR

Usando la entrada de @echonax, se me ocurrió esta solución que es bastante rápida:

• Agregue la aplicación Express to Angular 2 (construida con Angular CLI) como se muestra en este https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli
• Ejecuta esto en la terminal:

ng build -w & nodemon server.js --watch dist --watch server

Esto reconstruirá la aplicación Angular en la carpeta dist, y el servidor de nodo se reiniciará cada vez que eso suceda. Sin embargo, NO hay una actualización automática del navegador con esta configuración :(

Más sobre eso aquí:

https://github.com/jprichardson/reload

Answer 6

La solución "etayluz" es muy buena. Pero quiero agregar una opción adicional para que NUEVA RESPUESTA no abra dos veces el terminal.

En primer lugar, debe instalar el paquete simultáneamente ( https://www.npmjs.com/package/concurrently );

npm install concurrently --save 

Luego, puede agregar los siguientes códigos en su archivo package.json.

"start": "concurrently /"npm run serve-api/" /"npm run serve/"",
"serve": "ng serve --port 3333 --proxy-config proxy.config.json", // You could add --port for changing port
"serve-api": "nodemon [YOUR_EXPRESS_APP.js] --watch server",

npm start es suficiente para ejecutar tu proyecto.