/ Align = "left" / js z Angular CLI w środowisku dev

"rozwiązanie etayluz" jest bardzo dobre. Ale chcę dodać dodatkową opcję dla NEW ANSWER , aby nie otwierać dwa razy terminala.

Najpierw musisz zainstalować pakiet ( https://www.npmjs.com/package/concurrently);

npm install concurrently --save 

Następnie możesz dodać poniższe kody do swojej paczki.plik 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 wystarczy do prowadzenia projektu.

Używając angular-cli, polecenie ng build lub ng build --prod da ci spakowane pliki wraz z index.html. Upewnij się, że app.js (node / express) jest skierowany do tego pliku.

Przykład:

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

Dłuższe Wyjaśnienie

Pierwszym procesem, który będziesz musiał uruchomić będzie zbudowanie folderu Angular dist i obserwowanie wszelkich zmian wprowadzonych do nakładki Angular. Na szczęście dla nas, Angular CLI może to zrobić natywnie (testowane na Angular CLI >= 1.5) za pomocą następującego polecenia:

ng build --watch

Musisz zostawić to uruchomione w tle, ale to będzie obserwować wszelkie zmiany wykonane w kodzie kątowym i odbudować wiązki w locie.

Drugi proces wymaga użycia nodemona do uruchomienia serwera Express i może wymagać nieco więcej konfiguracji i planowania w zależności od tego, jak obszerna jest konfiguracja backendu / Express. Upewnij się tylko, że Express wskazuje na Twój plik indeksu w folderze dist. Dużą zaletą jest to, że możesz dodać to wszystko do pliku Gulpfile za pomocą gulp-nodemon, aby wykonać jeszcze więcej sekwencyjnych zadań po uruchomieniu nodemona, aby obejrzeć backend / Express, takie jak linting backend, Uruchamianie testów równolegle do kompilacji, minifying backend, lub cokolwiek innego, co możesz wymyślić, aby użyć Gulp. Użyj npm lub Yarn aby dodać i zainstalować nodemona do zależności twojego projektu, a następnie uruchom następujący Serwer Express:

nodemon app.js

Zastąp app.js z dowolnym plikiem używanym do budowania Twojego expresowego backendu i powinien teraz odbudowywać się, gdy tylko zostaną wprowadzone zmiany Twój backend.

Tldr;

Uruchom dwa oddzielne procesy w tle, aby uruchomić środowisko programistyczne. Pierwszy bieg:

ng build --watch

Po Drugie, dodaj nodemon do zależności projektu i uruchom następujące polecenie w tle gdzie Aplikacja.js jest zastępowany przez dowolny plik Express:

nodemon app.js

Bonus

Ponieważ zapytałeś, jak automatycznie przeładować przeglądarkę, najlepszym rozwiązaniem będzie skorzystanie z wtyczki przeglądarki o nazwie Wątroba. Ponieważ będziemy już używać nodemona do oglądania naszego backendu, możesz poważnie rozważyć użycie Gulp, jeśli nie masz jeszcze do uruchomienia zarówno nodemon, jak i LiveReload jako dwóch zadań. Najlepszym rozwiązaniem dla wdrożenia LiveReload do Gulp jest użycie wtyczki gulp-refresh, ponieważ jest to zaktualizowana wersja wtyczki gulp-livereload. W końcu znajdziesz coś podobnego do tego:

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

Teraz wystarczy uruchomić gulp polecenie zamiast nodemon app.js aby uruchomić serwer Express.

Też się nad tym zastanawiałem. Kurs Udemy na stosie MEAN autorstwa Maxa Schwarzmüllera zawiera przykładowy kod do integracji Express i Angular. W pakiecie tego przykładowego kodu.plik json, use używa skryptów.zbuduj właściwość, aby dać webpack polecenie, które obserwuje pliki kątowe i odpowiednio aktualizuje. Nie chcę tu kopiować jego kodu, ale o to chodzi. Reszta będzie wymagała odkrycia.

W pliku readme sugeruje uruchomienie npm run build, który uruchamia webpack, a następnie w nowym terminalu uruchamiającym npm start dla serwera węzła. Więc teoretycznie, to uruchamia dwa programy, jak zasugerowałeś w swojej wersji odpowiedzi. Ale robi to bardziej "skryptowy" / predefiniowany sposób uruchamiania procesu Angular build, zamiast nawigować do podkatalogu Angular i wpisywać tam ng build --watch i uruchamiać aplikację Express osobno.

Być może możesz dodać zależność o nazwie 'równocześnie', lub (npm-run-all, parallelshell ).

npm i concurrently --save-dev

Następnie Edytuj pakiet.json like this: `

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

` to może być praca.

Bibliografia:

przykład: https://stackoverflow.com/a/30950298/7421101 ,

Npm-run-all przykład: https://stackoverflow.com/a/38213212/7421101 ,

Parallelshell przykład: https://stackoverflow.com/a/42373547/7421101 .

A proxy.conf.json plik w katalogu src o kodzie-

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

I edytując package.json dodając do niego te 3 wpisy - (zastąp z powrotem.js z Twoim plikiem express, który znajduje się w katalogu głównym projektu Angular)

"scripts": {
    "client": "ng serve",
    "server": "nodemon back.js",
    "start": "npm-run-all -p client server"
  }

Teraz uruchomienie npm start spowoduje uruchomienie zarówno Angular, jak i Express W tym samym czasie w środowisku deweloperskim.