Collegamento di express.js con CLI angular nell’ambiente di sviluppo

Ho trovato un ottimo tutorial che spiega come configurare express.js con Angular CLI, ma in questo tutorial l’app angular è compilata in una cartella dist production: https://scotch.io/tutorials/mean-app-with-angular- 2-e-il-angular cli

Come integrare express.js con Angular CLI, ma voglio che express.js funzioni con la versione di sviluppo dell’app Angular e voglio che il nodemon si riavvii se apporto le modifiche all’app angular OR espressa.

Ho passato più di otto ore a cercare di farlo funzionare. Grazie!

Non voglio eseguire ‘ng build’ ogni volta che apporto una modifica all’app Angular (questo richiede troppo tempo) – Voglio ricaricare istantaneamente ogni volta che salvi una modifica alla mia app angular (come se fossi in esecuzione ‘ng serve ‘) o app espressa.

Ho trovato un tutorial in cui si collega QuickStart Angular 2 con Express, funziona ma sto cercando di utilizzare la CLI Angolare.

    Comprendo che la CLI Angolare utilizza WebPack mentre QuickStart utilizza System.js

    NUOVA RISPOSTA

    La mia esperienza di 15 ore mi ha insegnato che provare a servire un’app Angular con Express durante lo sviluppo NON è una buona idea. Il modo corretto è eseguire Angular ed Express come due app diverse su due porte differenti. Angular sarà servito sulla porta 4200 e Express sulla porta 3000 come al solito. Quindi configurare un proxy per le chiamate API all’app Express.

    Aggiungi proxy.config.json alla radice del progetto Angular:

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

    Apri una nuova scheda del terminale ed esegui questo comando per avviare l’app Express:

    nodemon [YOUR_EXPRESS_APP.js] --watch server

    (YOUR_EXPRESS_APP.js è in genere denominato server.js o app.js. server è una directory in cui vengono conservati tutti i file delle app Express)

    Aprire una seconda scheda del terminale ed eseguire questo comando per avviare l’app Angolare:

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

    Ciò garantirà che l’app Angolare venga ricostruita e il browser ricaricato quando viene apportata una modifica a qualsiasi file di app Angolare. Analogamente, il server Express verrà riavviato quando viene apportata una modifica a qualsiasi file di app Express.

    La tua app Angolare è qui: http: // localhost: 4200 /

    Guarda questo video per vedere come configurare un proxy per le tue chiamate API con la CLI Angolare

    NOTA: questa impostazione si applica solo all’ambiente di sviluppo. In produzione, dovrai eseguire ng build e posizionare l’app Angular all’interno di una directory dist per essere pubblicata da Express. In produzione, c’è solo UNA app in esecuzione: un’app Express che serve la tua app Angular.

    RISPOSTA PRECEDENTE

    Usando l’input di @echonax ho trovato questa soluzione che è abbastanza veloce:

    • Aggiungi l’app Express to Angular 2 (realizzata con Angular CLI) come in questo tutorial
    • Esegui questo nel terminale:

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

    Questo ricostruirà l’app Angolare nella cartella dist e il server dei nodes si riavvierà ogni volta che ciò accade. Tuttavia, NON c’è un aggiornamento automatico del browser con questa configurazione 🙁

    Maggiori informazioni su questo qui:

    https://github.com/jprichardson/reload

    La soluzione “etayluz” è molto buona. Ma voglio aggiungere un’ulteriore opzione per NEW ANSWER per non aprire due volte il terminale.

    Per prima cosa devi installare contemporaneamente il pacchetto ( https://www.npmjs.com/package/concurrently );

     npm install concurrently --save 

    Quindi puoi aggiungere i codici seguenti nel tuo file 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 è sufficiente per eseguire il tuo progetto.

    Usando angular-cli, il comando ng build o ng build --prod ti darà file raggruppati insieme a index.html . Rendi il tuo app.js (nodo / express) bersaglio questo file.

    Esempio:

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

    Spiegazione più lunga

    Ho trascorso una discreta quantità di tempo a capire come farlo nei miei ambienti di sviluppo. Il meglio che ho trovato è una doppia implementazione che combina un sacco di echonax, squirrelsareduck e la soluzione di Max, ma sfruttando le strategie integrate di CLI angular per osservare le modifiche frontend / angolari e l’utilizzo di nodemon per guardare il back-end / Esprimere cambiamenti. In breve, si finisce con l’esecuzione di due processi (ng build e nodemon) per ottenere l’ambiente di sviluppo attivo e funzionante, ma esso ricostruisce e esegue automaticamente tutto sotto un unico server Web Express.

    Il primo processo che dovrai eseguire sarà creare la cartella dist angular e osservare eventuali modifiche apportate al frontend angular. Fortunatamente per noi, la CLI angular può farlo in modo nativo (Testato su CLI angular> = 1.5) con il seguente comando:

     ng build --watch 

    Dovrai lasciarlo in esecuzione in background, ma questo controllerà eventuali modifiche apportate al codice angular e ricostruirà i pacchetti al volo.

    Il secondo processo prevede l’utilizzo di nodemon per l’esecuzione del server Express e potrebbe richiedere un po ‘più di configurazione e pianificazione, a seconda di quanto è estesa l’impostazione back-end / Express. Assicurati che Express stia puntando al tuo file di indice nella cartella dist . Il grande vantaggio qui è che è ansible aggiungere tutto questo in un Gulpfile con gulp-nodemon per eseguire ancora più attività sequenziali dopo l’esecuzione di nodemon per guardare il back-end / Express come lintare il back-end, eseguire test paralleli alle build, minimizzare il back-end o qualsiasi altra cosa tu possa pensare di usare Gulp per. Utilizzare npm o Yarn per aggiungere e installare nodemon alle dipendenze del progetto, quindi eseguire quanto segue per avviare il server Express:

     nodemon app.js 

    Sostituisci app.js con qualunque file tu stia utilizzando per creare il tuo backend Express, e dovrebbe ora ribuild ogni volta che vengono apportate modifiche al tuo back-end.

    TLDR;

    Esegui due processi separati in background per avviare il tuo ambiente di sviluppo. Prima corsa:

     ng build --watch 

    In secondo luogo, aggiungi nodemon alle dipendenze del progetto ed esegui il seguente comando in background dove app.js viene sostituito con qualunque sia il tuo file Express chiamato:

     nodemon app.js 

    indennità

    Dato che hai chiesto come ricaricare automaticamente il browser, la soluzione migliore è sfruttare un plug-in del browser chiamato LiveReload. Dato che stiamo già usando nodemon per guardare il nostro back-end, potresti prendere seriamente in considerazione l’idea di usare Gulp se non sei già in grado di eseguire sia nodemon che LiveReload come due task. La soluzione migliore per l’implementazione di LiveReload in Gulp consiste nell’utilizzare il plugin gulp-refresh poiché si tratta di una versione aggiornata del plugin gulp-livereload. Finirai con un Gulp simile a questo:

     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); }); 

    Mi stavo chiedendo anche questo. Il corso Udemy sullo stack MEAN di Max Schwarzmüller contiene un codice di esempio per l’integrazione di Express e Angular. Nel file package.json del codice di esempio, use utilizza la proprietà scripts.build per dare a webpack un comando che controlla i file angolari e gli aggiornamenti di conseguenza. Non voglio copiare il suo codice qui, ma questa è l’idea generale. Il resto richiederà qualche lavoro di scoperta.

    Nel file readme, suggerisce di eseguire npm run build che esegue webpack e quindi in un nuovo terminale che esegue npm start per il server del nodo. Quindi in teoria, vengono eseguiti due programmi come suggerivi nella tua versione della risposta. Ma, fa un modo più “programmato” / predefinito di avviare il processo di compilazione angular, invece di navigare nella sottodirectory angular e digitare ng build –watch e avviare l’app Express separatamente.

    Può essere ansible aggiungere una dipendenza chiamata ” simultaneamente ” o ( npm-run-all , parallelshell ).

     npm i concurrently --save-dev 

    quindi modifica il pacchetto.json in questo modo: `

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

    `questo potrebbe essere un lavoro.

    Riferimenti:

    esempio simultaneo : https://stackoverflow.com/a/30950298/7421101 ,

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

    esempio di parallelelshell : https://stackoverflow.com/a/42373547/7421101 .