Verwenden von Angular4 als Server-Seite Render-Engine

Question

Ich habe ein sehr großes System heute in Nodejs, Express, Mungo und Mops geschrieben.

Ich möchte das System auf Angular4 anstelle von Mops übertragen, so dass ich die Möglichkeiten genießen kann, meine Ansichten auf Vorder- und Rückseite zu rendern. Neben einem robusten Komponentensystem und allen anderen Fähigkeiten von Angular4.

Als ersten Schritt möchte ich nur Pug mit Angular4 ersetzen. Ich habe einige Artikel und Tutorials gelesen, die zeigen, wie man Angular4 auf der Serverseite rendert. Ich möchte wissen, wie kann ich derzeit die Ersetzung vornehmen und nur alle BL in der Nodejs Ebene behalten und übergeben Sie die endgültige Ansicht Modell zu eckig für es zu rendern.

Würde gerne wissen, ob es eine „easy“ ist Art und Weise, das zu tun, Dank, Matan

Answer 1

Im hinteren Ende (Knoten + Express) Sie Pfad für das Routing haben könnte, sagen für CRUD Betrieb einige haben Routing. Nun kommen Sie zu meinem Punkt in Angular 4. Richten Sie das Angular-Framework ein (Sie können CLI verwenden oder einen Klon von git quick start erhalten quick start) im Dienst von Angular Call die API von Back-End, die Sie gerade erstellt haben. Jetzt können Sie mit dem hinteren Ende von Angular anstelle von Mops interagieren. Jetzt haben Sie die Freiheit, am Frontend zu arbeiten. - Ich hoffe, dieses Konzept wird Ihnen helfen.

Answer 2

beste Weg:

1. npm installieren Winkel-cli -g

2. ng neuen your-Projekt-Name (--style = SCSS Standard SCSS eingestellt)

3. Wenn Sie Mug als Standard verwenden möchten - look this

4. app.routing erstellen. ts Seite an Seite mit app.module.ts

5. füllen:

   import {Routes, RouterModule} von '@ Winkel/Router'; Import {NotFoundComponent} von './404/404.component'; Import {AppComponent} aus './app.component';

   const Routen: Routen = [{ Pfad: '', Komponente: AppComponent }, { Pfad: '**', Komponente: NotFoundComponent // Notwendigkeit, es zu schaffen } ];

   exportieren const Routing = RouterModule.forRoot (Routen);

6. in app.module.ts fügen Sie diese:

Import {Routing} von‘./app.Routing ';

@NgModule({ 
    imports: [ 
    ... 
    **Routing,** 
    ... 
    ], 
    ... 

7. für Start Gebrauch ng dienen (--port = 3000) (- base-href = '/') (- env ​​= prod) (--sm = false)
   --sm = false -> keine Quellkarte, als Ergebnis wird das Gewicht abnehmen (aber es wird keine Referenzen auf Fehler geben, nützlich für die Produktion)