führen Angular 4 + Knoten-API zu einer Zeit

Question

Ich bin neu für eckig und ich habe Anforderungen, eine Web-Anwendung mit Angular4 (Front) + REST API mit Knoten js (API-Konnektivität mit MS Sql) zu entwickeln.

Jetzt ist meine Verwirrung, dass es besser ist, wenn ich beide Projekte getrennt entwickle oder nicht ...?

Persönlich bevorzuge ich beide Projekte getrennt zu entwickeln.

Aber ich benutze den Visual Studio Code als meine IDE und mit Visual Studio Code kann ich nur ein Projekt gleichzeitig bearbeiten.

Ich möchte an beiden Projekten gleichzeitig arbeiten.

Gibt es irgendeine andere IDE, die mir helfen kann? Oder Gibt es eine Möglichkeit zwei Projekte gleichzeitig in Visual Studio Code auszuführen ...? (Ich habe viel dafür recherchiert, aber ich fand keine hilfreichen Lösungen)

jede Hilfe wird sehr geschätzt werden

Answer 1

Angular CLI verfügt über eine development proxy configuration option, mit der Aufrufe an ein Entwicklungs-Back-End abgefangen und an die API weitergeleitet werden können. Auf diese Weise können Sie selbständig an den Projekten arbeiten und die @angular/cli Tools nutzen.

Sie würden eine Datei namens proxy.conf.json auf derselben Ebene wie Ihre angular-cli.json Datei erstellen. Nehmen wir an, Ihre Knoten API in der Entwicklung auf dem Port läuft bei http://localhost:3000 und Ihre API-Endpunkte sind alle unter Pfad „/ api“, würde der Inhalt proxy.conf.json wie folgt aussehen:

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

Sie einrichten können, wie Wenn Sie mehrere Intercepts benötigen, werden in diesem Fall nur Anrufe an "/ api" abgefangen und an das Projekt weitergeleitet, das unter http://localhost:3000 läuft.

würden Sie dann benötigen npm start in package.json der Winkel App Befehl zu modifizieren, um die Proxy zu verwenden:

"scripts": { 
    ... 
    "start": "ng serve --proxy-config proxy.conf.json", 
    ... 
}, 

Dann würden Sie brauchen nur sowohl die Back-End und Front-End separat in verschiedenen laufen Befehlsfenster. Sie können eine Bibliothek wie concurrently verwenden, um mehrere Befehle in Entwicklung mit einem einzelnen npm start auszuführen. Sie würden Ihre npm start Befehl in dem Basisknoten API-Projekt in etwa so ein:

"scripts": { 
    "start": "concurrently \"./bin/www\" \"cd public && npm start\"", 
} 

In diesem Beispiel mein Knoten (express) App von ./bin/www und mein Eckige App aktiviert ist, wird im public Ordner aber das könnte natürlich je nach Projektstruktur ein anderer Ordner sein. Ihr Start könnte einfacher sein, wenn der Backend-Knoten api nur eine einzige Eingabedatei "start": "concurrently \"node ./server.js" \"cd public && npm start\"" ist.

Beispielstruktur:

Project 
    server.js (back-end node API) 
    package.json (concurrently library and command added here) 
    public (angular front-end app) 
     src 
     .angular-cli.json 
     package.json (npm start updated to use proxy) 
     proxy.conf.json (proxy configuration goes here) 

Hoffentlich hilft!