Angular-cli: Angular2 Universal in Angular CLI-Projekt integrieren

Sie müssten den Client nicht separat starten. Wenn Sie Universal verwenden, wird alles nur über den Server bereitgestellt. Sie möchten dann auf Port 3000 zugreifen. Express bedient den Index (mit der universellen App). Probieren Sie es aus und lassen Sie es mich wissen

Hallo @MarkPieszak , danke fürs

Ich habe die Anwendung nur auf Port 3000 wie vorgeschlagen gestartet und dann auf die URL zugegriffen, aber den gleichen Fehler erneut erhalten. Ich füge den Screenshot als Referenz bei.

Versuchen Sie, Node auf 6+ oder so zu aktualisieren. Dies könnte ein Express-Problem sein. Es denkt, Sie versuchen, d://something anstelle von http:// usw. zu machen. Ich denke, wegen Ihres Festplattenverzeichnisses, bizarr.

Du hast:

provide(ORIGIN_URL, {useValue: 'http://localhost:3000'}), // <-- localhost3000 in there?

Vielen Dank für die Eingaben @MarkPieszak , ich werde es versuchen, nachdem Node auf die neueste Version aktualisiert wurde.
Ja, ich habe diese Zeile in meiner server.ts-Datei -
provide(ORIGIN_URL, {useValue: 'http://localhost:3000'}),

Die Express-Version, auf die ich mich beziehe, ist - "express": "^4.13.4"

@ MarkPieszak , ich hatte die Knotenversion auf 6.2.1 aktualisiert, aber ich

Versionsaktualisierung

Fehlermeldung-

Bitte schlagen Sie vor, wenn ich hier etwas falsch mache.

Ja, der gleiche Fehler tritt auf, wenn Sie eine App über angle-cli generieren und Servercode von https://universal.angular.io/quickstart/ hinzufügen.

Hallo @neilhem ,

Kein Glück, im Gitter Chat von Angular-Universal habe ich über Fehler geschrieben, also sagten sie mir, dass sie das Codebeispiel so schnell wie möglich aktualisieren werden

@ gdi2290 Ich Ich kann nicht sagen, ob es sich um CLI oder Universal handelt

Ich bin auch dem Beispiel gefolgt, aber ich habe ganz andere Fehler, die aus der Datei server.ts kommen:

D:/Workspace/bitbucket/stock-front/tmp/broccoli_type_script_compiler-input_base_path-aCaBCBu3.tmp/0/src/server.ts (1, 23): Cannot find module 'path'. D:/Workspace/bitbucket/stock-front/tmp/broccoli_type_script_compiler-input_base_path-aCaBCBu3.tmp/0/src/server.ts (2, 26): Cannot find module 'express'. D:/Workspace/bitbucket/stock-front/tmp/broccoli_type_script_compiler-input_base_path-aCaBCBu3.tmp/0/src/server.ts (3, 29): Cannot find module 'body-parser'. D:/Workspace/bitbucket/stock-front/tmp/broccoli_type_script_compiler-input_base_path-aCaBCBu3.tmp/0/src/server.ts (23, 37): Cannot find name '__dirname'. D:/Workspace/bitbucket/stock-front/tmp/broccoli_type_script_compiler-input_base_path-aCaBCBu3.tmp/0/src/server.ts (29, 18): Cannot find name '__dirname'.

Hattest du ähnliche Probleme?

BR

Nevermind, habe den gleichen Fehler auch.

AUSNAHME: Fehler: Protokoll "d:" wird nicht unterstützt. Erwartetes "http:"

Ja, das Problem war, dass der Befehl typings fehlgeschlagen ist, also musste ich den hinzufügen
ambientDependencies manuell.

Aber ich bekomme immer noch deinen Fehler.

BR

Am 11. Juni 2016 um 20:45 schrieb Vinod Bhargava [email protected] :

@vaskgjuri https://github.com/vaskgjuri zur Behebung dieser Fehler -

1. Installieren Sie die Typisierungen wie in angle2-universal IO angegeben
   https://universal.angular.io/quickstart/
2. Fügen Sie den Verweis auf die Eingaben in der Datei server.ts hinzu

Die oben genannten Fehler sollten verschwunden sein.

Bitte versuchen Sie diese Schritte und aktualisieren Sie.

- -
Sie erhalten dies, weil Sie erwähnt wurden.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/angular/angular-cli/issues/1050#issuecomment -225383345,
oder schalten Sie den Thread stumm
https://github.com/notifications/unsubscribe/AGGmXFsw2_ntdRcs3ZLuYDA0uI-Siexpks5qKwJQgaJpZM4Ixuiz
.

Med vänlig hälsning | Traf vriendelijke groet | Топли поздрави | Mit freundlichen Grüßen

Vasko Gjurovski

Tel +38976361002

Bagdatska 15/7 | 1000 Skopje | Mazedonien

www.polarcape.com

Polar Cape vertritt Schweden bei den European Business Awards

Bitte schauen Sie sich unser Video an und stimmen Sie unter http://www.businessawardseurope.com/ ab
uns, wenn Sie denken, wir sollten National Public Champions werden

http://www.businessawardseurope.com/
http://www.greatplacetowork.se/baesta-arbetsplatser

Das Polarkap ist einer der besten Arbeitgeber 2015

Ich habe etwas mehr recherchiert und versucht, diesem Beispiel zu folgen:

http://mean.expert/2016/06/04/angular-2-loopback-universal/

Am Ende bekam ich jedoch die gleiche Fehlermeldung:

Fehler: Protokoll "d:" wird nicht unterstützt. Erwartetes "http:"

Dies lässt mich denken, dass dies ein Problem mit einer neueren Version einer der Abhängigkeiten sein könnte, aber ich kann einfach nicht genau bestimmen, welche. Hauptverdächtige Preboot und Angular2-Universal.

Immer noch suchend...

BR

Ich werde morgen einen genaueren Blick darauf werfen und sehen, ob ich Glück habe, die CLI in sie zu integrieren. Haben Sie den Universal Starter ausprobiert? Außerdem funktioniert Universal derzeit nur mit veralteten Routern. Vielleicht hat dies etwas damit zu tun.

Ich habe den Universal-Starter ausprobiert und er hat gut funktioniert, aber wie die CLI ist
Als empfohlene Methode zum "Verwalten" Ihrer App war es nur logisch, dass wir sie verwenden
die CLI mit Universal. Und nein, ich wusste nicht, dass Universal damit arbeitet
Router im Moment veraltet, was ein großer Nachteil wäre, wie jetzt
liegt 2 Versionen dahinter (mit der Ankündigung des 3.0 Routers).

Und danke für die Hilfe ... :)

BR

Am 11. Juni 2016 um 23:55 schrieb Mark Pieszak [email protected] :

Ich werde morgen einen genaueren Blick darauf werfen und sehen, ob ich Glück habe, mich zu integrieren
die CLI damit. Haben Sie den Universal Starter ausprobiert? Auch nur Universal
funktioniert mit Router veraltet in diesem Moment, vielleicht hat es etwas zu tun
damit.

- -
Sie erhalten dies, weil Sie erwähnt wurden.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/angular/angular-cli/issues/1050#issuecomment -225396651,
oder schalten Sie den Thread stumm
https://github.com/notifications/unsubscribe/AGGmXLxwV9new6GzBlbhU9_37Ui9QQCjks5qKy7jgaJpZM4Ixuiz
.

Med vänlig hälsning | Traf vriendelijke groet | Топли поздрави | Mit freundlichen Grüßen

Vasko Gjurovski

Tel +38976361002

Bagdatska 15/7 | 1000 Skopje | Mazedonien

www.polarcape.com

Polar Cape vertritt Schweden bei den European Business Awards

Bitte schauen Sie sich unser Video an und stimmen Sie unter http://www.businessawardseurope.com/ ab
uns, wenn Sie denken, wir sollten National Public Champions werden

http://www.businessawardseurope.com/
http://www.greatplacetowork.se/baesta-arbetsplatser

Das Polarkap ist einer der besten Arbeitgeber 2015

Zu Ihrer Information, ich habe eine abgespeckte Version meiner App mit dem vom Router veralteten und ausprobiert
es gibt immer noch den gleichen Fehler:

AUSNAHME: Fehler: Protokoll "d:" wird nicht unterstützt. Erwartetes "http:"

Ich denke also nicht, dass es der Router ist, der das Problem verursacht.

BR

Am 12. Juni 2016 um 03:18 Uhr, Vasko Gjurovski vasko. [email protected]
schrieb:

Ich habe den Universal-Starter ausprobiert und er hat gut funktioniert, aber wie die CLI ist
Als empfohlene Methode zum "Verwalten" Ihrer App war es nur logisch, dass wir sie verwenden
die CLI mit Universal. Und nein, ich wusste nicht, dass Universal damit arbeitet
Router im Moment veraltet, was ein großer Nachteil wäre, wie jetzt
liegt 2 Versionen dahinter (mit der Ankündigung des 3.0 Routers).

Und danke für die Hilfe ... :)

BR

Am 11. Juni 2016 um 23:55 schrieb Mark Pieszak [email protected] :

Ich werde morgen einen genaueren Blick darauf werfen und sehen, ob ich Glück habe, mich zu integrieren
die CLI damit. Haben Sie den Universal Starter ausprobiert? Auch nur Universal
funktioniert mit Router veraltet in diesem Moment, vielleicht hat es etwas zu tun
damit.

- -
Sie erhalten dies, weil Sie erwähnt wurden.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/angular/angular-cli/issues/1050#issuecomment -225396651,
oder schalten Sie den Thread stumm
https://github.com/notifications/unsubscribe/AGGmXLxwV9new6GzBlbhU9_37Ui9QQCjks5qKy7jgaJpZM4Ixuiz
.

Med vänlig hälsning | Traf vriendelijke groet | Топли поздрави | Nett
Grüße

Vasko Gjurovski

Tel +38976361002

Bagdatska 15/7 | 1000 Skopje | Mazedonien

www.polarcape.com

Polar Cape vertritt Schweden bei den European Business Awards

Bitte schauen Sie sich unser Video an und stimmen Sie unter http://www.businessawardseurope.com/ ab
uns, wenn Sie denken, wir sollten National Public Champions werden

http://www.businessawardseurope.com/
http://www.greatplacetowork.se/baesta-arbetsplatser

Das Polarkap ist einer der besten Arbeitgeber 2015

Med vänlig hälsning | Traf vriendelijke groet | Топли поздрави | Mit freundlichen Grüßen

Vasko Gjurovski

Tel +38976361002

Bagdatska 15/7 | 1000 Skopje | Mazedonien

www.polarcape.com

Polar Cape vertritt Schweden bei den European Business Awards

Bitte schauen Sie sich unser Video an und stimmen Sie unter http://www.businessawardseurope.com/ ab
uns, wenn Sie denken, wir sollten National Public Champions werden

http://www.businessawardseurope.com/
http://www.greatplacetowork.se/baesta-arbetsplatser

Das Polarkap ist einer der besten Arbeitgeber 2015

Ok, ich werde einen Blick darauf werfen, ja, wir haben es noch nicht aktualisiert, hauptsächlich wegen der sich ständig ändernden Router-Zustände. Natürlich werden wir es für das neueste so schnell wie möglich aktualisieren!

Sollte die eckige CLI nicht von Grund auf universell sein?
zB ng generate universal node/asp.net

Leider glaube ich nicht, dass es so sein könnte, wie es jetzt ist, da asp.net zum Beispiel ein völlig anderes Setup hat als ein typisches ng2-Projekt.

Es müsste ein Add-On zur CLI sein, wenn sie es hätten, da es selbst sehr unterschiedlich wäre.

Steve Sanderson hat einen schönen Yeoman-Generator für asp.net core und angle2 (es wird auch Universal verwendet) erstellt, wenn Sie einen Blick darauf werfen möchten. http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/

Danke für den Link. Ist es möglich / verwendbar, dies mit eckiger CLI zu kombinieren?

Ich habe es nicht versucht, aber ich denke, Sie müssen zuerst eine App mit ng new erstellen, um die CLI zu nutzen :(

Ich würde hoffen, dass wir irgendwann in der Zukunft ein .NET-Add-On für die CLI integrieren können

Ich glaube, @Brocco hat sich mit der universellen Integration befasst, aber mehr weiß ich nicht.

Wir befinden uns in der Erkundungsphase der Integration von Angular Universal in die CLI, um die Machbarkeit zu bestimmen. Sobald dies festgelegt ist, werden wir eine Strategie zur Implementierung entwickeln, die entweder in dieser Ausgabe oder in einer anderen Ausgabe in diesem Repo (oder möglicherweise im Universal Repo) erörtert wird.

Vielen Dank für Ihr Interesse an der Integration von universal in die CLI !!!

Ich würde gerne Mike helfen. Ich denke, alles, was Node, Express / Hapi / Koa-Integration, nicht schlecht wäre. Lassen Sie mich wissen, wie ich mich engagieren kann!

Gibt es eine Arbeitsgruppe und einen Fahrplan für die Integration von Cli und Universal?
@Brocco , können Sie sagen, wie Ihre Untersuchung verläuft?
Vielen Dank.

Neuigkeiten oder nichts?

@pdelorme @ choucry13
Universal selbst unterliegt einigen großen Änderungen, aber im Wesentlichen müssen Sie nur erstellen, wie der Server Ihre App rendert. Wenn Sie Node verwenden, überprüfen Sie den Universalstarter. Alles stammt im Wesentlichen von server.ts (https: / /github.com/angular/universal-starter/blob/master/src/server.ts). Verwenden Sie den Starter als Ausgangspunkt, bis wir etwas Konkretes in der CLI erhalten. Abgesehen von einigen Paketabhängigkeiten können Sie es ziemlich schnell zum Laufen bringen. Hoffe das hilft zumindest vorerst!

danke @MarkPieszak . Ich und @pdelorme werden diese Lösung sehen.

Hat es bisher jemand geschafft, eine funktionierende Implementierung von Universal für eine mit Angular-Cli erstellte App zu erhalten?
Ich habe es den ganzen Tag hier versucht, kein Glück ... dieselbe letzte Woche, versucht / gescheitert, bis ich an nichts anderes mehr denken konnte und aufgeben musste. Heute wieder das gleiche. Wirklich frustrierend ... Ich habe versucht, alles von Universal-Starter zu bekommen und einfach den Teil zu entfernen, in dem Webpack die App erstellt (weil ich die CLI dafür habe). Ich muss nur irgendwie client.js und server.js generieren . Wie auch immer, kein Glück, alle möglichen Fehler, und egal was ich versucht habe, ich kann es nicht zum Laufen bringen :(
Es wäre ein zu langer Beitrag, um alle Schritte zu erwähnen, die ich durchlaufen habe, und alles, was ich versucht habe, und alle Fehler, die ich auf dem Weg erhalten habe.

Ich würde es eigentlich nur vorziehen, wenn ich es schaffen könnte, client.ts und server.ts einfach zu "tsc", aber das habe ich versucht und es auch nicht zum Laufen gebracht, ich werde hier verrückt. Sogar (erneut) versucht, das "Erste Schritte" von universal.angular.io zu starten, wäre so einfach, wenn es tatsächlich funktionieren würde, aber das gibt mir den Fehler, für den dieses Problem erstellt wurde.

Ich fange an zu denken, dass ich es niemals zum Laufen bringen werde, es scheint so kompliziert zu sein.
Bitte, ich bettele fast :) Hat jemand ein funktionierendes Beispiel (hier in der Hoffnung auf ein einfaches, kein Webpack)? Oder kennen Sie ein Repo irgendwo da draußen, das eine funktionierende Implementierung von Angular-Universal auf einer Angular-Cli-App hat?

Haben Sie es jetzt versucht, nachdem die CLI auf Webpack umgestellt wurde?
Ich kann versuchen, es heute zu versuchen, und möchte sicherstellen, dass es mit der CLI webpackweise funktioniert.

@MarkPieszak Ich habe die Webpack-Version installiert, aber ich weiß nicht, was hinter den Kulissen passiert und wie sich das von Beta 10 unterscheidet (ich weiß nur, dass es Webpack verwendet). Ich habe das Webpack auch selbst nie benutzt, es ist für mich völlig neu, also ist alles, was ich versuche, nur eine Vermutung für mich. Ich würde nicht wissen, wo ich anfangen soll, wenn es um Webpacks geht. Ich sehe auch, dass die App, die mit der Webpack-Version von cli: | generiert wurde, kein webpack.config.js Ich frage mich, wo es die Webpacky-Dinge einrichtet und wie ng build/serve Webpack tatsächlich verwendet, wenn keine webpack.config.js -Datei vorhanden ist.

Wenn Sie die Zeit haben, sich damit zu beschäftigen und es zu schaffen, Universal in einer App zu implementieren, die mit einer beliebigen CLI-Version generiert wurde, wäre eine kurze Anleitung fantastisch.

Ich glaube, die aktuelle Strategie besteht darin, dass CLI das Webpack hinter den Kulissen verwendet und nicht das Webpack. Beispielsweise werden keine Webpack-Konfigurationsdateien in ein Projekt ausgegeben, und das ist beabsichtigt.

Ich denke, das ist eine gute Strategie. Menschen, die Webpack direkt nutzen möchten, haben bereits Möglichkeiten dazu. Nehmen Sie einfach irgendwo eines der "Starter-Kits" für das Webpack, kopieren Sie es und beginnen Sie mit dem Packen.

Eine Konsequenz dieser Strategie ist jedoch, dass die Integration mit "universal" innerhalb des CLI-Projekts selbst erfolgen muss. Dies kann auf Anwendungsebene bei Verwendung von CLI nicht ohne weiteres durchgeführt werden.

Ich hoffe auf eine enorme Auszahlung: In einigen Monaten sind alle unsere Projekte, die CLI verwenden, automatisch und trivial universelle Projekte.

@kylecordes Ich hoffe das auch ... dass wir einfach in der Lage sein würden "new -universal" zu machen und das war's! (optional natürlich, damit sich niemand beschweren kann)

Bis dahin ... immer noch kein Glück für mich, ist die Implementierung von Universal in einer von Cli generierten App für mich noch ein Rätsel. Ich denke, der Universal-Starter ist zu kompliziert für mich, egal wie oft ich es versucht habe, ich konnte ihn nicht über meine Angular-Cli-App implementieren (ich habe auch nie ein Webpack verwendet, also beim Versuch zu implementieren Der Universal-Starter Ich rate nur, was diese webpack.config.js-Datei tut, und konnte es wahrscheinlich nicht wirklich schaffen, meine App zu ignorieren - denn das geschieht mit ng build - und bauen Sie einfach den Serverteil).
Was wirklich großartig wäre, wäre, wenn sie einen Schnellstart hätten, der funktioniert. Ich wünschte, sie hätten eine Serverdatei in ihrem Schnellstart, die das tun würde, was sie soll: ARBEITEN! :( Ich meine, zuallererst - sie sagen "setze dies in ein server.js ", aber wenn ich dann > node dist/server.js versuche, schreit es, dass es nicht weiß, was die "import" -Anweisung ist Dann habe ich versucht, die Datei server.ts zu benennen und tsc path/to/server.ts versuchen, aber das wirft nur eine Reihe von Fehlern "Name kann nicht gefunden werden" auf. Ganz zu schweigen davon, dass die tsc Befehl tsc path/to/file.ts würde die Datei tatsächlich ignorieren Verwandte Einstellungen im tsconfig.json . Wie auch immer, dann habe ich einen Verweis auf browser.d.ts hinzugefügt (in cli-beta.10, da es in der Beta keinen Ordner typings . 11-webpack mehr) und musste schließlich den Knotenserver mit dieser Serverdatei starten, und als ich versuchte, im Browser auf localhost: 3000 zuzugreifen, bekam ich endlich den Fehler, dass dieses Problem geöffnet wurde für :(

Knoten : v6.3.1 (was in Ordnung sein sollte, da es> = 4 ist, wie ich gesehen habe, empfehlen alle)

Ich denke, vielleicht gebe ich Javascript, Typoskript, Angular2, HTML, CSS ... alles auf! Und vielleicht gehe ich irgendwo in die Berge und lebe dort nur von Beeren ... so frustrierend ist das geworden.

Ich bin ziemlich nahe daran, den Universalstarter mit der Webpack-Version des Cli zum Laufen zu bringen. Die einzige Barriere ist typings.d.ts.

Bei Verwendung der typings.d.ts, die von der CLI erstellt wurden, die die Serverseite kompiliert, generiert ts die Fehler

ERROR in /Users/marcus/hosts/coco-cli/src/typings.d.ts
(6,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'module' must be of type 'NodeModule', but here has type '{ id: string; }'.

ERROR in /Users/marcus/hosts/coco-cli/src/typings.d.ts
(7,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'require' must be of type 'NodeRequire', but here has type 'any'.

und Client-Fehler sind

ERROR in [default] /Users/marcus/hosts/coco-cli/node_modules/angular2-universal/dist/node/router/node_platform_location.d.ts:2:25 
Cannot find module 'url'.

Wenn ich dann die typings.d.ts vom Universalstarter hinzufüge, treten die gleichen Fehler auf.

Wenn ich entferne, was von der CLI generiert wird, wird der serverseitige Code kompiliert, aber der Client erzeugt dann die Fehler.

ERROR in [default] /Users/marcus/hosts/coco-cli/node_modules/angular2-universal/dist/node/router/node_platform_location.d.ts:2:25 
Cannot find module 'url'.

ERROR in [default] /Users/marcus/hosts/coco-cli/src/app/app.component.ts:5:12 
Cannot find name 'require'.

ERROR in [default] /Users/marcus/hosts/coco-cli/src/app/app.component.ts:6:11 
Cannot find name 'require'.

Ich frage mich, was die Vorzüge von Typoskript und Typisierung sind, abgesehen von zusätzlicher Verwirrung und Komplexität

Ich erinnere mich, dass ich irgendwo über diese Fehler gelesen habe. Ich habe keine Ahnung, wo genau ... Aber ich kann mich immer noch daran erinnern, dass es behoben wurde, indem es6 in es5 in libs innerhalb von tsconfig.json . Ich denke ... Sie könnten es versuchen. Aber ich kann nicht sagen, warum es so ist. Vielleicht könnte jemand, der sich besser auskennt, die Dinge klären. Und sag mir auch, ob es das war.

Das macht es tatsächlich am schlimmsten, wenn Sie Fehler wie erhalten

ERROR in [default] /Users/marcuswilliams/Hosts/coco-cli/node_modules/rxjs/operator/toPromise.d.ts:9:8 
Cannot find name 'Promise'.

ERROR in [default] /Users/marcuswilliams/Hosts/coco-cli/node_modules/rxjs/operator/toPromise.d.ts:10:25 
Cannot find name 'Promise'.

ERROR in [default] /Users/marcuswilliams/Hosts/coco-cli/node_modules/rxjs/operator/toPromise.d.ts:10:35 
Cannot find name 'Promise'.

@jeffbcross Ich habe gesehen, dass Sie universal in package.json für die neueste CLI-Webpack-Version aktualisiert haben. Inwieweit wird Universal im bestehenden Build verwendet?

@goelinsights Zum Erstellen der App-Shell

@ MarkPieszak Hast du es zum

Wir sollten Universal bald für RC5 & 6 veröffentlichen (es war ein schwierigerer Prozess als wir es uns vorgestellt haben). Ich werde mich bei Ihnen melden, sobald wir es versenden und ich kann überprüfen, ob es mit der CLI funktioniert! :) Ich verstehe vollkommen, es hat eine Menge Veränderungen und Turbulenzen in RC-Land gegeben, haha. Wenn Sie nur wie gewohnt an dem Projekt arbeiten, sollten Sie in der Lage sein, alles (in Ihrem App-Ordner) in einen neu geprägten cli --mobile zu verschieben, sobald alles vollständig zwischen uns beiden integriert ist . @ ritz078

Danke @MarkPieszak . das hilft wirklich :)

Wird es auf der Serverseite asp.net-Unterstützung geben?

Irgendwelche Updates davon? Ist Angular Universal mit der CLI verwendbar?

@theunreal @ ritz078 @goelinsights @dottodot @vinodbhargava @neilhem @vaskgjuri

Hier gibt es eine offene PR für die CLI: https://github.com/angular/angular-cli/pull/2318
Ich bin mir nicht sicher, wann genau es zusammengeführt wird, aber bald wird es --universal Unterstützung geben: +1:

Sie können @DevCrossNet danken: funkelt:

Gibt es darüber irgendwelche Neuigkeiten? Es scheint, als gäbe es 10 verschiedene Threads, die alle zum nächsten weitergeleitet werden

Noch keine Updates dazu? Hinzufügen des Flags --universal zur CLI?

Wir haben einige Probleme, es zu veröffentlichen. Sie können es bereits verwenden. Schauen Sie sich den Universal-Webpack-Zweig in meiner Gabel an. Es wird in Kürze veröffentlicht. Entschuldigung, dass es so lange dauert.

@devCrossNet wird hier jemand einen Kommentar

@azjkjensen Ja, ich werde hier einen Kommentar

@devCrossNet Wird es ein separates Projekt sein, das eckige Universalität erzeugt? Und eine andere Frage. Wie erstelle ich einen Produktordner mit einer Serverdatei in einem dist-Ordner? Denn jetzt, wenn ich Ihr Repo Universal-Webpack klone und nach dem Ausführen von ng build --prod keine Serverdatei im dist-Ordner erhalte, kann ich das Paket json nicht so konfigurieren, dass der Server von dist ausgeführt wird.

@goriunov es wird ein separates npm-Paket sein. Aber mit dem Angular-Cli-Projekt wird es immer auf dem neuesten Stand sein. Sie haben also alles aus beiden Welten. Es wird wie das Angular-Cli funktionieren, aber mit einem zusätzlichen Flag --universal . Sie sollten bereits ein Produktionspaket für den Server in ./dist/server.bundle.js , wenn Sie keinen Fehler gefunden haben.

@devCrossNet Ich nehme an, das ist vorübergehend. Und letztendlich werden wir nur ein Angular-Cli-Paket haben.
Ich weiß nicht, was sich so drastisch geändert haben könnte, dass sich dies auch auf die "reguläre" Nutzung auswirken würde (ohne das Flag --universal ) und ein ganz separates Paket sein muss ... der einzige Unterschied sollte sein, ob ich es bin oder nicht Willst du das --universal Flag verwenden, nein? ... Oder ist dies "Split", weil es (zumindest für eine Weile) wahrscheinlich mehr Releases für die Universalversion geben wird (Fehlerbehebung / Funktionen usw.). ..

@ MrCroft Ich hatte vor, es als separaten Kanal auf angular-cli@universal . Das Kernteam hat jedoch nicht genügend Zeit, um Änderungen zu überprüfen, die nicht Teil des Kernprojekts Angular-Cli sind. Und sie haben auch nicht genug Zeit, um jedes Mal etwas zu veröffentlichen, wenn ich etwas Neues veröffentlichen möchte. Also haben sie diese Lösung gefunden. Aber mit dem nextGen von angle-cli wird es viel einfacher sein, Dinge wie universelle Unterstützung zu implementieren. Wir müssen also auf das nächste Gen warten, um eine bessere Lösung zu finden. Eine Alternative wäre, es nicht zu veröffentlichen und es einfach als Gabel zu belassen, und jeder, der es verwenden möchte, verwendet den Git-Klon und installiert es lokal.

Ich habe die erste Version von universal-cli veröffentlicht. Sie können sie mit npm install -g universal-cli installieren. Wenn Sie ein universelles Projekt erstellen möchten, geben Sie ng new <appname> --universal . Fühlen Sie sich frei, Beiträge zu leisten, Probleme einzureichen usw.

@devCrossNet Gibt es dafür ein Repo oder ist dies nur der von Ihnen erwähnte Zweig? Ich frage mich nur, ob ich Fehler melden kann, wenn ich welche finde.

Übrigens, vielen Dank, das einzige, was mich davon abhält, mich strikt auf Winkel 2 zu konzentrieren, waren die SPA-SEO-Probleme und universellen Lösungen sowie die Leichtigkeit der CLI.

@ daygon2007 Dies ist die Projektseite: https://github.com/devCrossNet/angular-cli. habe Spaß! :-)

Hallo @devCrossNet , ich habe gerade deine universal-cli überprüft>) Danke für die Arbeit). Im generierten Projekt haben wir die Datei polyfills.ts, aber ich habe keine Stellen gefunden, an denen wir diese Datei verwenden. Sollen wir es in die client.ts importieren?

Und ich habe keine Möglichkeit gefunden, ein Problem in https://github.com/devCrossNet/angular-cli zu erstellen

@goriunov Entschuldigung, ich habe die Probleme nicht aktiviert. Es ist jetzt aktiviert.

@devCrossNet Könnten Sie klarstellen, was Sie mit cli "nextGen" meinen? Da der Informationsfluss .. weniger als ideal ist. Gibt es irgendwelche bahnbrechenden Veränderungen auf der Straße?

@Renader als Repo von Angular-Cli sagt "Prototyp einer CLI für Angular 2-Anwendungen basierend auf dem Ember-Cli-Projekt." Es gibt Diskussionen darüber, wie die CLI erweiterbarer sein kann (z. B. universell, mobil). Am besten wäre eine Art Plugin-System, mit dem man ein universelles Plugin erstellen kann und der Plugin-Autor seine Aufgabe in Bezug auf Qualität und Zeug und nicht das Kernteam hat. Das Ergebnis der CLI (Struktur, Befehle usw.) sollte nicht geändert werden. Es ist eher eine Veränderung für Entwickler. Aber ich kenne das große Ganze nicht. Ich denke, es ist ein schwieriges Thema und sie müssen viel nachdenken, um ein richtiges Plugin-System zu erstellen.

Schön zu hören, dass wir jetzt --universal verwenden können. Gibt es irgendwo Informationen über die Bereitstellung des resultierenden Projekts auf einem Remote-Server (in meinem Fall CentOS)? Ich dachte, es sollte nur darum gehen, "node server.bundle.js" auf dem Server auszuführen, aber nach einigen Stunden des Versuchs bin ich mir nicht mehr so ​​sicher.

@ code-div bekommst du einen fehler oder so?

@devCrossNet Entschuldigung, ja, hätte erwähnen sollen: "Fehler: Modul 'angle2-universal-polyfills' kann nicht gefunden werden".

Wäre toll, wenn Sie ein Problem im universal-cli repo erstellen können

So ist die Idee, dass mit universal der erste Treffer für die App vollständig auf dem Server gerendert und an den Client gesendet wird. Wenn Sie die richtigen SEO-Meta-Tags für das Crawlen benötigen, sind diese in der an den an die App gesendeten Nutzlast vorhanden Klient. Wenn Sie dann weiterhin mit der App interagieren, befinden Sie sich im Client-Modus?

@photostu Ja, und es hilft auch, das erste Rendern der Seite zu beschleunigen, da Sie zuerst eine sehr kleine vorgerenderte Seite erhalten und dann das js laden. Die App schneller machen.

Hallo Leute, ich habe eine Angular-Cli-App, die für die AOT-Kompilierung kompatibel ist. und ich möchte, dass es auch eine eckige universelle Unterstützung hat. Also führe ich einfach einen Befehl "ng serve --universal" aus und es funktioniert perfekt

Meine Frage lautet: "Bedeutet das, dass meine App für Angular Universal einwandfrei funktioniert?"

Jede Hilfe wird im Voraus geschätzt.

Wenn Sie die Angular-CLI hier verwenden, enthält sie noch keine Aspekte von Universal. Universal-Aspekte befinden sich hier in der Fork (https://github.com/devCrossNet/universal-cli). Hoffentlich in Zukunft in diese CLI integriert. Es ist jedoch in Alpha, so dass einige Probleme auftreten können. @hriunyscape

Hat jemand eine Idee, wann Universal in Angular-cli integriert wird? Ich suche eine realistische Zeitleiste.

Bitte beachten Sie, dass die Universal-Cli-Gabel bald aufgegeben wird (https://github.com/devCrossNet/universal-cli/issues/101#issuecomment-288464913), sodass es möglicherweise keine gute Idee ist, sie jetzt zu verwenden .

@ Angular / Platform-Server- bezogene PRs: https://github.com/angular/angular-cli/pull/5194 https://github.com/angular/angular-cli/pull/5547

Universelle Demo von robwormald: https://github.com/robwormald/ng-universal-demo
Mein Versuch, Universal in CLI zum Laufen zu bringen: https://github.com/intellix/angular-cli-server/commits/master

Versuch 1

Commit: https://github.com/intellix/angular-cli-server/commit/c2ea1eb21bc88f530cd2fafa57fb1768698eded3

Fehler, die ich beim Servieren bekomme über: ng serve --app=server

ERROR Error: The selector "app-root" did not match any elements
    at DefaultServerRenderer2.selectRootElement

Versuch 2

Commit: https://github.com/intellix/angular-cli-server/commit/0159223ce2e873c8653b07d72d595c455537b213

Also fand ich dieses Commit für Universal-Cli von FrozenPandaz: https://github.com/devCrossNet/universal-cli/pull/85, das im Wesentlichen ng4 und Plattform-Server ist. Ich habe einige Dinge in mein Angular-Cli-Server-Projekt kopiert und dieses Mal, wenn ich versuche zu dienen, erhalte ich die Fehlermeldung:

Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.

Dies liegt daran, dass sich der Bootstrap-Code in ng-express-engine.ts befindet, aber in Ihrer Hauptdatei hier überprüft wird: https://github.com/angular/angular-cli/blob/master/packages/@ ngtools / webpack / src / entry_resolver.ts # L133

- -

Nach den PRs hier und universal-cli zu urteilen, würde ich sagen, dass der größte Teil der Universal-Arbeit von @FrozenPandaz stammt, also weiß er vielleicht ein bisschen mehr darüber, was übrig bleibt, um Universal in CLI zu bringen :)

Bitte haben Sie etwas Geduld, es wird einige Zeit dauern. Zu diesem Zeitpunkt ist es wahrscheinlich die beste Option, die CLI zu verlassen und sie dann anstelle meiner Client-Konfiguration hier zu verwenden: https://github.com/FrozenPandaz/ng-universal-demo/tree/master/webpack

Diese 2 PRs sind der Hauptteil dessen, was meiner Meinung nach erforderlich ist, um universelle BUILDS über die CLI auszuführen. Es muss noch eine beträchtliche Menge getan werden, um eine Entwicklungsumgebung zu betreiben, die ich in einer Reihe aufgestellt habe, die jedoch vor dem Einreichen auf die Genehmigung der ersten PRs wartet.

sollte jetzt das höchste Prio sein

sollte jetzt das höchste Prio sein

tatsächlich!!!!!!!!!!!!!!!!!

Alle verfügbaren Beispiele, einschließlich der großartigen Arbeit von @FrozenPandaz, zeigen, wie SSR über eine Art Server (node.js express) erreicht werden kann.

Ich denke jedoch, dass es wichtig ist, den Fall nicht aus den Augen zu verlieren, wenn Sie ausgewählte Seiten vorab rendern und für statisches Webhosting verfügbar

Dies ist besonders wichtig, da dies die empfohlene Methode für SSR ist :

Tatsächlich empfehlen wir, dass Ihre erste Option die Verwendung von Angular Universal Pre-Rendering ist, um statische HTML-Dateien zu generieren, damit Sie zur Laufzeit kein dynamisches Rendering benötigen und alles auf einem CDN zwischengespeichert werden kann

Ich kann mir vorstellen, dass der Befehl build ungefähr so ​​aussehen würde:

ng build --platform=server --pre-render-urls=ssrUrls.json

ssrUrls.json

{
  "urls": [
    "/",
    "/about",
    "/contact"
  ]
}

Basierend auf der Antwort von https://github.com/angular/angular/issues/13822#issuecomment -285554330. Es klingt sehr einfach, das Pre-Rendering durchzuführen. Es wäre großartig, wenn jemand ein Beispiel zeigen oder darauf hinweisen könnte, wie das Pre-Rendering für ein von Cli generiertes Projekt durchgeführt wird. Oder tun Sie es einfach nach dem Aufruf von eject cmd und ändern Sie die Webpack-Konfiguration in dieser Phase?

Es sollte ziemlich einfach sein, renderModuleFactory aufzurufen, um Ihren HTML-Code abzurufen. 4.0 Beispiele sollten nächste Woche bei Angular / Universal Repo erscheinen.

Ich stimme @DmitryEfimenko voll und ganz zu.
Einige statische Seiten in /dist passen perfekt zur aktuellen Funktionsweise der Angular-CLI. Keine benutzerdefinierten Server / Express.js, mit denen man herumspielen kann, sondern super einfache Bereitstellungen und hervorragende Skalierbarkeit.

Kann jemand eine Zeitleiste darüber teilen, wann universal mit cli verfügbar sein würde, oder zumindest eine aktuelle Arbeitsanweisung, um das Rendern auf mehreren Seiten für das CLI-Projekt zu ermöglichen? Es sieht so aus, als ob https://github.com/devCrossNet/universal-cli derzeit nicht stabil ist (oder nicht erstellt wird). Welche Optionen stehen derzeit für ein CLI-Projekt zur Verfügung?

    It's integrating into core.  Take a look at platform-server.  Rob mentions it in the latest ng-conf keynote 


    Get Outlook for iOS

Am Dienstag, den 11. April 2017 um 12:29 Uhr -0700 schrieb "kaleemxii" [email protected] :

Kann jemand eine Zeitleiste darüber teilen, wann universal mit cli verfügbar sein würde, oder zumindest eine aktuelle Arbeitsanweisung, um das Rendern auf mehreren Seiten für das CLI-Projekt zu ermöglichen? Es sieht so aus, als ob https://github.com/devCrossNet/universal-cli derzeit nicht stabil ist (oder nicht erstellt wird). Welche Optionen stehen derzeit für ein CLI-Projekt zur Verfügung?

- -
Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie direkt auf diese E-Mail, zeigen Sie sie auf GitHub an oder schalten Sie den Thread stumm.

Danke Vijay.

Es wurde versucht, den Plattform-Server gemäß der Keynote zu verwenden, die main.server.ts konnte jedoch nicht in angle-cli.json konfiguriert werden, ohne cli auszuwerfen und zum Webpack zurückzukehren.

Versucht nach diesem https://www.softwarearchitekt.at/post/2017/03/07/server-side-rendering-with-angular-4.aspx , aber nach dem Auswerfen von cli gibt es mehrere Probleme mit Webpack (um scss und aot Zusammenstellung).

Warten auf Plattform-Server-Unterstützung mit cli ..

hier gilt das gleiche

Irgendwelche Updates?

Ich habe mir dieses Repo-Beispiel https://github.com/evertonrobertoauler/cli-universal-demo angesehen und es hat tatsächlich funktioniert. Ich bin jedoch auf einige Probleme gestoßen. Wenn Sie BrowserAnimationsModule verwenden, wird verhindert, dass der Server überhaupt geladen wird. NoopAnimationsModule funktioniert, aber offensichtlich mit weniger materiellem Flair. Ein weiteres Problem ist, dass Sie es scheinbar nicht anders als im Prod-Modus ausführen können. In beiden Fällen hat es funktioniert und Sie können ng serve weiterhin für die lokale Arbeit verwenden.

Vielen Dank an @janiukjf für das Teilen der Demo. Endlich konnte ich die SSR in meinem Projekt zum Laufen bringen, ohne Cli auszuwerfen, indem ich diesem Beispiel folgte.

@janiukjf Ich habe diese Demo vor 1 Woche aufgenommen und sie funktioniert auch nicht richtig. Beispielsweise funktioniert AngularFire 2 mit diesem Repo nicht für SSR. Mein gesamtes Projekt war mit Firebase verbunden und deshalb kann ich es nicht ablehnen.

@IPRIT Ja, ich muss wahrscheinlich aus dem CLI aussteigen, damit die Animationen richtig funktionieren. Es scheint keine Möglichkeit zu geben, BrowserAnimationsModule mit dieser Technik zum Laufen zu bringen, da alle dasselbe App-Modul verwenden.

@janiukjf Das Problem ist, dass Sie wirklich nicht nur ein ServerModule von AppModule erben lassen möchten (wenn Sie die Abhängigkeiten der Browser- / Serverplattform aufteilen müssen).

Was Sie wollen, ist ein Browser-Modul und ein Server-Modul (beide importieren app.module, das nur die häufigsten Dinge hat). Dann enthält Browser-app.module BrowserModule , AnimationsModule usw. Der Server hat ServerModule , NoOpAnimationsModule usw.

+                      app.module            (all the most common things)
+                    ^                ^
+    browser-app.module           server-app.module

Hoffentlich hilft das!

Hier finden Sie ein Beispiel dafür, wie Sie die Plattformlogik aufteilen können.

@ MarkPieszak Ja, das habe ich auch angenommen. Ich werde auf jeden Fall daran arbeiten, sobald ich mehr Zeit finde. Ich werde mir dieses Beispiel auf jeden Fall ansehen, wenn ich es tue. Danke für den Zeiger.

Könnte jemand darauf hinweisen, wie die http-Aufrufe beim serverseitigen Rendern funktionieren? Anfragen schlagen mit diesem Fehler fehl

Antwort:{
_Körper:
ProgressEvent: {
Typ: 'Fehler',
........
Status: 0,
ok: falsch,
statusText: '',
Typ: 3,
URL: null

Muss ich einen zusätzlichen HTTP-Anbieter importieren, damit SSR-Aufrufe funktionieren (während ich die Plattform-Server-Bibliothek verwende)?

@kaleemxii Sie müssen absolute URL zu eckigen http

Vielen Dank an @hheexx . Mein Fehler

Hallo allerseits, ich habe ein eckiges 4-CLI-Projekt und muss SSR über die Prerender-Logik implementieren, damit ich es in einen Amazon S3-Bucket hochladen kann.
Gibt es eine Anleitung oder Anleitung, der ich folgen kann?

Vielen Dank.

Hat jemand mit diesem Angular-SSR-Projekt experimentiert? Ich habe es durch The Inofficial Angular Docs gefunden . Klingt nach einer anständigen Lösung für eine Angular 4-Anwendung ...

irgendwelche Neuigkeiten

@ MuhammadShaban Ich habe meine App mit Cli und SSR anhand mehrerer Beispiele arbeiten lassen. Dies ist die, die für mich mit separaten Browser- und Server-Builds funktioniert hat. https://github.com/pquarme/cli-universal-demo

@janiukjf vielen Dank, ich werde es versuchen

@janiukjf ist die AOT-Server- / Client-Seite in https://github.com/pquarme/cli-universal-demo enthalten ?

@vforv Yup . Es ist. Die einzige Verrücktheit ist die SCSS-Kompilierung auf der Serverseite, aber das ist auch enthalten. Sie verwenden gulp, um die sass-Dateien zu verarbeiten, und führen dann das Webpack aus, um sie ordnungsgemäß zu verarbeiten. Ich möchte einige Zeit damit verbringen, dies ohne Schluck zum Laufen zu bringen, aber ich habe es noch nicht zu einer Priorität gemacht.

@janiukjf wie kann ich das überprüfen? Ich kann tsconfig-aot.json und Rollup-Dateien nicht finden ...

Kommt das Pre-Rendering mit einem der genannten Beispiele sofort? Wäre es mit diesen Setups möglich, mehrere statische HTML / CSS-Assets für einzelne Seiten zu rendern? Jetzt ist die einzige statische HTML-Seite, die gerendert wird, die Indexdatei. Ich benutze Evertonrobertoauler / Cli-Universal-Demo

Habe das Repo getestet, bin aber nicht zufrieden. Die Leistung ist schlechter als bei Universal-Cli, und Universal-Cli hat nicht einmal AOT.

@janiukjf Haben Sie es geschafft, dass Ihre App auch mit vorgerenderten AJAX-HTTP-Anforderungen mit CLI und SSR funktioniert? Ich habe unter https://github.com/pquarme/cli-universal-demo nachgesehen, aber es werden keine vorgerenderten AJAX-HTTP-Anforderungen implementiert. Gibt es ein Repo, das Cli mit SSR und vorgerenderten AJAX-Anforderungen präsentiert?

Vielen Dank,

G.

@ stratio84 So weit

@janiukjf Das Problem ist, dass ich einen vollständigen Prerender benötige, damit ich meine App auf einen AWS S3-Bucket hochladen kann. Ich versuche ein Beispiel zu finden, das eckiges Cli verwendet, aber ich habe bisher keines gefunden. Die unter https://github.com/clbond/angular-ssr hat ein Beispiel, verwendet jedoch keine Angular-Cli. Von welchem ​​Repo raten Sie mir, um ein funktionierendes Skelett zu entwickeln?

Vielen Dank,

G.

Fand dieses: https://github.com/stevermeister/angular-ssr Aber noch nicht getestet ...

@ stratio84. Mit https://github.com/evertonrobertoauler/cli-universal-demo können Sie zumindest eine funktionierende Anwendung vollständig rendern, die in einen S3-Bucket hochgeladen werden kann. Die einzige tatsächliche statische Datei ist die index.html und alles andere ist kompilierter Winkelcode, der geladen wird. Ich habe noch keine Lösung gefunden, die mehrere statische Seiten rendert. @vforv mit diesem Setup bekomme ich eine zufriedenstellende Leistung, aber nicht besser als das normale AOT in Angular-Cli.

Ich kann mir nicht vorstellen, dass die Leistung jeder einzelnen Technik jemals besser wird, da alle diese SSR-Ansätze im Wesentlichen denselben Prozess verwenden. Der gesamte Code muss immer denselben Compiler durchlaufen und den Plattformserver / Browser verwenden. Das einzige, was tatsächlich einen Unterschied machen kann, ist, auf welchem ​​Server es ausgeführt wird und wie komplex Ihre App beim ersten Laden sein muss.

@AntonScotte Ich habe dieses Repo überprüft, aber der Code implementiert keinen AJAX-HTTP-Aufruf. Wollen Sie damit sagen, dass wenn ich dieses Repo klone und selbst einen Aufruf hinzufüge, es nur durch Kompilieren mit ng build --aot vorgerendert wird?

Vielen Dank an alle für die Hilfe und Entschuldigung für die Rookie-Fragen, aber ich habe Angular 4 und SSR erst seit ein paar Wochen entdeckt. Ich komme von AngularJS und alles scheint ganz anders zu sein :)

@ stratio84 Schauen Sie sich https://github.com/FrozenPandaz/ng-universal-demo an. Es gibt ein transferState-Modul, nach dem Sie suchen. Die App-Server-Datei finden Sie hier: https://github.com/FrozenPandaz/ng-universal-demo/blob/master/src/app/server-app.module.ts#L38. Es verweist auf das TransferState-Modul.

@ stratio84 Ich bin mir nicht sicher, aber im Allgemeinen funktioniert meine Anwendung normal, wenn ich auf SSR portiert habe und eine Reihe von Observablen in der gesamten App verwende. Ich bin nicht scharf auf AJAX-Aufrufe, daher möchte ich keine falschen Hoffnungen machen, wenn Unwissenheit besteht, aber ein paar Macken mussten behoben werden, um Angular anzuweisen, Chunks auf dem Client anstatt auf der Serverseite auszuführen, wie dies beispielsweise im Fenster möglich ist nicht serverseitig zugegriffen werden. Ich vermute, dass Sie möglicherweise eine ähnliche Problemumgehung durchführen können, um zu verhindern, dass Angular den Anruf direkt auf dem Server ausführt, und warten, bis der Client betriebsbereit ist.

@janiukjf Client-Bundle kann die Leistung erheblich steigern ... Aktuelle Größe ist zu groß 350KB + ... Es wird Universal-CLI mit Angular 2 haben eine bessere Leistung als das Repo mit Angular 4.

Auf dem Regler 3G Netzwerk Universal-CLI "Hello World" App für 2 Sekunden geöffnet, aber für dieses Repo dauert es 5 Sekunden

@janiukjf Ich habe gerade geklont und es mit aot gebaut. Innerhalb der Homepage enthält es einen http-Aufruf an einen JSON, dessen Inhalt dann auf der Seite angezeigt wird. Selbst wenn aot build erstellt wird, wird die Anforderung zur Erstellungszeit nicht vorgerendert. Sie wird dennoch zur Laufzeit ausgegeben. Mein Hauptziel ist es, eine App zu haben, die zum Zeitpunkt der Erstellung vollständig vorgerendert werden kann, sodass der S3-Bucket, wenn er bereitgestellt wird, vollständig statisch ist und selbst auf der Clientseite keine Ausarbeitung erfolgt.

Vielen Dank

G.

@vforv universal-cli ist ebenfalls 4 Monate oder länger veraltet und scheint nicht mehr gewartet zu werden. Ich frage mich, wie die Leistung wäre, wenn sie mit dem neuesten Code auf den neuesten Stand gebracht würde.

@ stratio84 Wenn die Dinge so funktionieren, wie Sie es möchten, posten Sie sie bitte hier zurück. Es wäre interessant zu sehen. Viel Glück!

@janiukjf das universal-cli-projekt wird nicht mehr gepflegt. Ich bin weiter zu anderen Projekten übergegangen und Angular-Cli implementieren. Aber ich kenne den Status nicht.

Sie sagten, dass Angular Universal vom offiziellen Angular-Team beibehalten wird, wenn ng4 veröffentlicht wird. Gibt es immer noch ein Problem mit Angular-Cli und Universal?

@altugank Ich denke, es ist nicht wirklich klar, wie man es zusammen verwendet. Der ursprüngliche Plan für die Integration bestand darin, eine Art Flag zu haben, die Ihnen die gesamte Leistung des Cli bietet und die Verwendung von Angular-Universal mit verschiedenen Anwendungsfällen (Pre-Rendering / Re-Rendering) vereinfacht.

Im Moment scheint es eine ganze Reihe manueller Schritte zu sein, um diese Dinge zum Laufen zu bringen (meiner Meinung nach kein guter DX).

@FrozenPandaz : Arbeiten Sie noch an der Universal / CLI-Integration?

@devCrossNet Verbrauch zusammen, ich denke , letztlich , wenn es sein könnte Winkel ssr wäre toll!

Über @FrozenPandaz ... Ich habe https://github.com/angular/angular-cli/issues/1050#issuecomment -289225562 so verstanden, dass er im Grunde darauf wartet, dass Sie seine PRs zusammenführen. (Fast alle offenen PRs auf universal / cli sind von ihm zu dir).

Irre ich mich

Hallo, ich habe https://github.com/clbond/angular-ssr überprüft und das Beispiel mit Express für On-Demand-Rendering getestet. Das Problem ist, dass es nicht zur Erstellungszeit gerendert wird, sondern nur zur Anforderungszeit auf der Serverseite.

Es wäre sehr hilfreich, sich ein Beispiel anzusehen, das Routen und AJAX-Anforderungen zur Erstellungszeit vollständig vorrendert (besser, wenn mit angle-cli, aber alles andere funktioniert auch gut).

Kann jemand ein funktionierendes Repo bereitstellen, das diese Funktionen zeigt?

Vielen Dank,

G.

@somombo das universal-cli wird nicht mehr gepflegt. Das ist der Grund, warum die PRs nicht zusammengeführt werden. @FrozenPandaz und ich haben beschlossen, es so zu

@devCrossNet Ich

Sieht aus wie PR https://github.com/angular/angular-cli/pull/5194 ist, wo wir sind. Scheint so, als ob man notwendig ist, um den Rest zum Laufen zu bringen. Scheint vor fünf Tagen eine Commit-Aktivität gewesen zu sein. Natürlich ist @FrozenPandaz die beste Person, um all diese zu kommentieren.

Es sieht so aus, als ob # 5194 vor ein paar Stunden mit Master zusammengeführt wurde. Wo bleibt uns das?

Lässt uns jetzt auf eine Veröffentlichung warten :)

Ich denke, wir brauchen auch https://github.com/angular/angular-cli/pull/5547 . Jemand sollte die Basis neu festlegen, um den Konflikt zu beheben, und einen Komponententest schreiben, um ihn zu genehmigen.

Laut @FrozenPandaz hängt es nicht von # 5547 ab. Was machen wir jetzt?

Ja, die andere PR (# 5194) hängt nicht von # 5547 ab. Jetzt wird auch der Server-Bootstrap-Code ersetzt.

Aber die Funktion, die wir haben möchten (universell in Winkel-Cli interagieren), benötigt # 5547, um das richtige Bundle für NodeJS zu erstellen.

ondkondi Gotcha, danke!

kommt das bald

Wem gehört das? Irgendein Update?

OBEN! Es wäre wirklich schön, vorgerenderte Apps erstellen zu können, ohne die CLI aufzugeben. Die CLI ist sehr nützlich für die Entwicklung.

Um zu warten, können Sie dieses Projekt klonen: https://github.com/designcourse/angular-seo. Hoffe ich rette ein paar Leben lol

@glemiere Wenn ich ein Lazy-Modul hinzufüge , wird es leider nicht serverseitig gerendert.

ERROR { Error: Uncaught (in promise): ReferenceError: System is not defined
ReferenceError: System is not defined

Außerdem kann ich nicht herausfinden, wie ich serverseitig auf Cookies zugreifen kann. Ging zwischen verschiedenen Beispielen hin und her, die in GitHub gefunden wurden, aber sie unterscheiden sich sehr von dem Beispiel in Ihrem Link. Ich kann nichts daraus machen (außerdem verwenden die meisten einen Unversal-Starter).

Haben Sie es geschafft, dass es mit faulen Modulen funktioniert oder Cookies serverseitig gelesen werden?

angular2-cookie hat eine funktionierende Implementierung für die Serverseite. Es beinhaltet
einen separaten Anbieter für den Knoten haben und Zone.current verwenden

Am Sonntag, 18. Juni 2017, 18:44 Uhr Marian Stoica, [email protected]
schrieb:

@glemiere https://github.com/glemiere leider, wenn ich eine faule hinzufüge
Modul in das https://github.com/designcourse/angular-seo , es
wird nicht serverseitig gerendert.

FEHLER {Fehler: Nicht erfasst (versprochen): Referenzfehler: System ist nicht definiert
ReferenceError: System ist nicht definiert

Außerdem kann ich nicht herausfinden, wie ich serverseitig auf Cookies zugreifen kann. Ging zurück und
zwischen verschiedenen Beispielen, die in GitHub zu finden sind, aber sie sind sehr
Anders als im Beispiel in Ihrem Link kann ich nichts daraus machen.

Haben Sie es geschafft, dass es mit faulen Modulen funktioniert, oder haben Sie den Cookie-Server gelesen?
Seite?

- -
Sie erhalten dies, weil Sie kommentiert haben.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/angular/angular-cli/issues/1050#issuecomment-309277059 ,
oder schalten Sie den Thread stumm
https://github.com/notifications/unsubscribe-auth/AAeZ8SGRnnTAQu7Q05WLCVIsW-I5enBDks5sFSLNgaJpZM4Ixuiz
.

@glemiere Ich habe das gleiche Problem wie @MrCroft. Gibt es eine Lösung für das Rendern von verzögert geladenen Modulen?

Wann wird diese Funktion unterstützt?

@Brocco Im großen Maßstab benötigt die eckige Site 30 Sekunden, um in einem langsameren Netzwerk die erste aussagekräftige Farbe zu erhalten. Könnten Sie uns bitte einen Zeitplan für SSR geben? Ich möchte nicht von der CLI wechseln.

Leute, gibt es Neuigkeiten?
Diese Funktion ist wirklich wichtig
@ MarkPieszak

@glebmachine Soweit ich weiß, gibt es noch 1x PR und es hat eine sehr kleine Änderung, bevor es zusammengeführt werden kann: https://github.com/angular/angular-cli/pull/5547

Lieber Gott, ich hoffe es wird bald geschehen!)

Gibt es derzeit ein gutes Beispiel dafür, wie man serverseitiges Rendering in Angular Cli integriert?

PS Ich bin ziemlich enttäuscht von der Unterstützung des Angular-Cli-Teams. Es sieht so aus, als würde sich niemand um dieses Problem kümmern

@ dimitriy-k und alle anderen, die suchen, dann ist das beste Beispiel, das ich für eine serverseitig gerenderte Lösung mit eckigem CLI gefunden habe, dieser Artikel: https://coursetro.com/posts/code/68/Make-your-Angular-App -SEO-freundlich- (Angular-4 - + - Universal)

Das größte Problem ist jedoch, dass der Servercode nur über ngc und nicht über Webpack ausgeführt wird. Daher werden nicht alle Loader (Sass usw.) und Umgebungsvariablen an den serverseitigen Code übergeben und funktionieren nicht.

Derzeit auch an der gleichen Stelle wie @mikkeldamm stecken. Da ich derzeit in S3 mit einer ziemlich statischen Site hoste, suche ich auch, ob jemand anderes nur eine statische S3-Site verwendet und nicht EC2 / heroku / GCP / Azure / etc, um einen Server auszuführen.

Sie möchten den Prerender beim Erstellen mit einem S3-Upload nachbearbeiteter statischer Dateien verstehen (der dann an Cloudfront gesendet wird). Hat jemand eine gute Ressource / ein gutes Beispiel dafür gesehen? Rob Wormald erwähnte es als das einfachere Ende des Spektrums bei ng-conf, hatte aber kein Glück mit Angular-SSR und sah nicht viel Dokumentation dazu.

@mikkeldamm ja, das ist ein sehr einfaches Beispiel. Außerdem werden faul geladene Module nicht serverseitig gerendert.
Ich warte gespannt auf die CLI-Implementierung ... und einige Dokumentationen und einen Styleguide / Best Practices.

@wnabil in Bezug auf Ihren Kommentar unten: Das ist so viel Aufwand ... Mit 2 separaten Prozessen für Server / Client-Build, einer mit Cli / Webpack und einer mit Gulp.
Wenn Sie heute unbedingt SSR haben müssen, vielleicht. Aber ich würde auf die CLI warten.

Von meinem Samsung SM-G950F mit FastHub gesendet

@ Mikkeldamm
Ich bin noch neu in Angular Universal, aber ich denke, wir können die Integration wie hier machen
https://github.com/pquarme/cli-universal-demo
und mit gulp können wir das scss und auch die Bibliotheken von Drittanbietern mit webpack external kompilieren

Dieser sieht vielversprechend aus:
https://www.npmjs.com/package/angular-ssr
Ich hatte noch keine Zeit, es zu versuchen

Also, was ist der Plan über die Unterstützung von CLISR?
Ich warte so sehr :(

@goelinsights Ich habe auch S3 und CloudFront, die meine ng-App bedienen. Ich plane, nodejs in einem Docker-Container zu verwenden, um ihn serverseitig gerendert zu bedienen.

@ MrCroft

Aber ich würde auf die CLI warten.

Warten vom 27. März (mein erster Kommentar hier) :(

Hey Leute, ich weiß, dass es sich vielleicht nicht so anfühlt, aber das Cli-Team hat die Absicht, uns so schnell wie möglich eine stabile Integration von Universal in das Cli zu ermöglichen.

Ich kann mich nicht erinnern, mit welchem ​​der Teammitglieder ich während der Fragen und Antworten zu ngConf Angular Cli gesprochen habe, aber ich erinnere mich, dass dies meine erste Frage an das Team war, und ich erinnere mich, dass sie etwas gesagt haben, um zu bewirken, dass sie es wirklich hinzufügen möchten , aber wenn es in eine Version der CLI implementiert wird, wollten sie sicherstellen, dass es ihrem Standard entspricht, nämlich "es funktioniert einfach" - das heißt, sie möchten die Funktion erst dann auf ein Update übertragen, wenn sie es tun sind absolut zuversichtlich, dass es funktioniert und die Leute sich keine Sorgen über die Auswirkungen seiner Verwendung machen müssen.

Ich bin gespannt auf diese Fähigkeit. Warten ist scheiße, aber manchmal müssen wir mit Open Source.

Ich kann dem zustimmen , was

Angular CLI-Team. Beeil dich nicht. Wir alle verstehen, dass Sie, während wir unter der Sonne am Meer liegen, hart daran arbeiten, ein großartiges Produkt für uns herzustellen. Danke für das. Besser, es ist gut, wir können warten. Wir glauben an dich! Und ich liebe dich natürlich: heart :: kissing_heart:

Der beste Weg ist, eine Option in cli like zu geben
$ ng build --prod --ssr oder $ ng build --ssr
Dadurch wird ein einfacher Express-Server server.js im Verzeichnis dist wie in https://www.npmjs.com/package/angular-ssr erstellt

In der Zwischenzeit denke ich, dass viele von uns nur mit Dokumentation zufrieden wären
und Richtlinien zum Einrichten. Besonders zu tun mit:

1) Lazy Loading und SSR

2) Meta-Tags

3) Senden von http-Statuscodes wie 301, 404 usw. aus dem Modul zurück
bis durch Zone / Express

4) Preboot- und Statusübergangs-bezogene Dinge

5) Vorrendern von statischen HTML-Dateien für Komponenten / Seiten, auf die nicht angewiesen ist
dynamische Daten, wenn überhaupt möglich

6) optionales Caching von http / API-Aufrufen in einem serverseitigen Cache für
Seiten / Komponenten mit dynamischen Daten

Nicht wirklich relevant für die CLI, aber angesichts der Tatsache, dass die Funktion selbst hat
Fast keine Dokumentation, viele von uns wissen nicht einmal, wo sie anfangen sollen. Krank
wahrscheinlich versuchen Sie es bis dahin mit Angular-SSR. Es sieht ziemlich vielversprechend aus.

Ich habe fast alles gut mit ng2 funktioniert, aber ich bin gespannt auf ein Upgrade und
Nutzen Sie die Verbesserungen in Winkel 4. Bei dieser Geschwindigkeit bin ich wahrscheinlich
Es ist besser, sich auf dieses eine Problem einzulassen oder darauf zu reagieren.

Am Freitag, den 7. Juli 2017 um 23:27 Uhr schrieb Gopakumar, [email protected] :

Der beste Weg ist, eine Option in cli like zu geben
$ ng build --prod --ssr oder $ ng buil --prod --ssr
Dadurch wird ein einfacher Express-Server server.js im Verzeichnis dist erstellt
wie in https://www.npmjs.com/package/angular-ssr

- -
Sie erhalten dies, weil Sie kommentiert haben.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/angular/angular-cli/issues/1050#issuecomment-313751047 ,
oder schalten Sie den Thread stumm
https://github.com/notifications/unsubscribe-auth/AAeZ8Z02TLXe_KYfqEuCrC5j_wuxYHpLks5sLnFugaJpZM4Ixuiz
.

@kblestarge Ich habe https://github.com/clbond/angular-ssr verwendet und funktioniert ziemlich gut (auch mit eckigem Material und anderen Modulen)

@ stratio84 Ich weiß nicht, wie es möglich wäre, Build-Time-Rendering zu haben, da wir fast überall im Web Assync-Aufrufe haben.

um ehrlich zu sein .. sehr zufrieden mit dem @ clbond- Projekt und sobald die offizielle Unterstützung für Universal für SSR eckig wird, wird es ziemlich einfach sein, dieses Projekt darüber hinaus zu portieren!

Danke Angular Team für die tolle Arbeit!

1.3.0-rc.0 enthält das Universal / Server-Material, auf das wir von FrozenPandaz gewartet haben: https://github.com/angular/angular-cli/releases/tag/v1.3.0-rc.0
Hier ist ein Beispiel-Repository, auf das von der PR verwiesen wird, die es implementiert: https://github.com/FrozenPandaz/u-cli-app

Werde jetzt vielleicht ein bisschen damit herumspielen

Die Dokumentation scheint gerade hinzugefügt worden zu sein

https://github.com/angular/angular-cli/wiki/stories-universal-rendering

Ja, vor einem Tag)))

    Looks like a great step forward! Are there any instructions on aot pre-rendering? - I remember Rob talking about this at ng-conf (which then leads to pwa => amp pages which should be great for content sites)

Sehr aufgeregt für die faulen Ladezusätze (wäre großartig, wenn endlich Cli, Lazy Loading, Universal, Ng Rx Store und eckiges Material 2 gut zusammenspielen würden)

    Get Outlook for iOS

Am Dienstag, den 25. Juli 2017 um 23:10 Uhr -0700 schrieb "Eric" [email protected] :

Die Dokumentation scheint gerade hinzugefügt worden zu sein

https://github.com/angular/angular-cli/wiki/stories-universal-rendering

- -
Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie direkt auf diese E-Mail, zeigen Sie sie auf GitHub an oder schalten Sie den Thread stumm.

Schließlich! Ja)

Aber was ist mit dem faulen Laden?

Es scheint zu scheitern, wenn die App Bibliotheken mithilfe von ES2015-Importen importiert, z. B. @angular/flex-layout .

Schritte zum Reproduzieren:

• Erstellen Sie ein neues @ angle /
• Befolgen Sie die Schritte in der Universal-Rendering-Story (ich schreibe das endgültige Server- Testskript in server-test.js aus Schritt _Test des Bundles_ ).
• npm i -S @angular/flex-layout
• Fügen Sie in app.module.ts FlexLayoutModule zu AppModule imports
• ng build --prod --app 1 und benennen Sie das Hauptpaket so um, dass es dem Import in server-test.js
  
  
  
  • Zu Ihrer Information ein praktisches npm-Skript, das nach dem Server-Build umbenannt werden soll: "rename-server-main": "renamer dist-server/* --regex --find \"main\\.[^\\.]*?\\.bundle.js\" --replace main.bundle.js" + npm i -D renamer , und server-test.js auf require('./dist-server/main.bundle') aktualisieren.
  
  
• Test mit: node server-test.js

Es protokolliert den folgenden Fehler:

C:\nw\proto\ng-server\node_modules\@angular\flex-layout\media-query\breakpoints\break-points-token.js:8
import { InjectionToken } from '@angular/core';
^^^^^^

SyntaxError: Unexpected token import

Nach dem Kommentieren des FlexLayoutModule Modulimports funktioniert es wieder.

Ich glaube nicht, dass flexlayout für SSR bereit ist. In angular-ssr konnte ich sogar das eckige Material zum Laufen bringen, aber ich konnte das Flex-Layout nicht erstellen

• https://github.com/angular/flex-layout/issues/187

@mariohmol Es ist nur ein Beispiel für eine Bibliothek, die wir im Projekt finden können, und hat eine ES2015 import , wodurch die SSR blockiert wird. Ich denke, viele andere Bibliotheken haben das gleiche Modulformat (unter Verwendung von import ), und das obige Problem würde für jede von ihnen gelten. Ich habe es nicht versucht, aber wir können möglicherweise die gleichen Schritte ausführen und FlexLayoutModule durch ein anderes lib-Modul durch import ersetzen. (Aber das MdButtonModule aus Material verursacht das Problem nicht.)

Gut zu wissen, dass das Flex-Layout SSR nach dem import -Problem sowieso blockiert hätte, danke für den Link. Aber ich habe diesen Fehler (Dokument, Fenster ...) nicht einmal erreicht, er schlägt vorher fehl.

BEARBEITEN: Angular-Material scheint auch ES2015 import , daher ist mir nicht klar, warum der Import von Flex-Layout von Angular CLI SSR nicht toleriert wird, Material jedoch.

Ich kann ein ähnliches Verhalten bestätigen:

$ node server-test.js 
/mypath/node_modules/@ng-bootstrap/ng-bootstrap/alert/alert.js:1
(function (exports, require, module, __filename, __dirname) { import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, } from '@angular/core';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.28 (/mypath/dist-server/main.bcce3a638266c1136166.bundle.js:1:2933)

@esistgut Ich denke, wir könnten das Problem in jedem Repo öffnen, zum Beispiel fand ich dies über ng-bootstrap

• https://github.com/ng-bootstrap/ng-bootstrap/issues/1593#issuecomment -304612841

Ich denke, dies hängt mit dem Build-System zusammen. Verwenden Sie Webpack, um die Transpile Ihres Projekts zu erstellen

• https://stackoverflow.com/questions/43692755/how-to-use-ngx-bootstrap-with-angular4-with-server-side-rendering

@antoineol die gleiche Lösung arbeitet auch an der Kompilierungszeit für das Flex-Layout, aber wenn Sie es ausführen, funktioniert das Grid-System / CSS nicht. Dies war meine Erfahrung mit dem Flex-Layout im angular-ssr Projekt

Vermerkt, danke. Ich frage mich nur, ob es der richtige Ansatz ist, alle Bibliotheken zu bitten, ihr Bundle-Format für SSR zu aktualisieren. Die Webpack-Transpilation könnte etwas besser sein. Obwohl flex-layout ohnehin noch etwas zu reparieren scheint.

Schauen Sie sich einfach die universellen Rendering-Funktionen von 1.3 rc2 an.
Wird erwartet, dass der Dist-Server-Build keine Module von @angular/* etc enthält?

Ich kann das Bundle ausführen, solange die erforderlichen Module in node_modules verfügbar sind, aber es wird nicht ohne ausgeführt, da es nach @angular/core sucht.

Versucht, die main.server.ts so zu codieren, dass sie Folgendes enthalten:

import { AppServerModule } from './app/app.server.module';
import { renderModule } from '@angular/platform-server';
// Load zone.js for the server.
import 'zone.js/dist/zone-node';

// Load the index.html file.
const index = `
  <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>SsrAngular</title>
      <base href="/">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
      <link href="styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet"/>
    </head>
    <body>
      <app-root></app-root>
      <script type="text/javascript" src="inline.20497c77615e2913cbc9.bundle.js"></script>
      <script type="text/javascript" src="polyfills.1553fdd8173a081c720c.bundle.js"></script>
      <script type="text/javascript" src="vendor.fd573dc8ddf6ad07fe6a.bundle.js"></script>
      <script type="text/javascript" src="main.3dfa3440b0d6630d7495.bundle.js"></script>
    </body>
  </html>
`;

export const renderView = (callback, path, data, viewBag) => {
  renderModule(AppServerModule, { document: index, url: '/' })
    .then(html => callback(null, html));
};

Ich bin neu in Universal Angular und habe versucht, es auszuführen mit: https://github.com/pauldotknopf/JavaScriptViewEngine, da wir bereits eine React-Lösung haben, die mit dieser ausgeführt wird.

import { Component, ElementRef, EventEmitter, forwardRef, Input, Output, ViewEncapsulation } from '@angular/core'; ^^^^^^ SyntaxError: Unexpected token import at createScript (vm.js:74:10) at Object.runInThisContext (vm.js:116:10) at Module._compile (module.js:533:28) at Object.Module._extensions..js (module.js:580:10)

das gleiche Problem hier mit ngx-quill und ng-bootstrap, eine Problemumgehung?

hat jemand versucht, die Schritte in zu reproduzieren: https://github.com/angular/angular-cli/wiki/stories-universal-rendering

Nach dem Ausführen von ng build --prod --app 1 wird auch ein Inline-Bundle erstellt:

chunk {0} styles.d41d8cd98f00b204e980.bundle.css (styles) 0 bytes {2} [initial] [rendered]
chunk {1} main.c86b031d2c0a09ba2c12.bundle.js (main) 346 bytes [initial] [rendered]
chunk {2} inline.d1514d289cf4dea70986.bundle.js (inline) 1.42 kB [entry] [rendered]

Ich habe eine js-Datei im Projektstamm server.js und dort das "Testen des Bundles" hinzugefügt, erhalte aber weiterhin den folgenden Fehler:
ReferenceError: webpackJsonp is not defined

Ich überprüfe das Hauptpaket und es beginnt mit webpackJsonp, das nicht definiert ist.
Weiß jemand, wie man das löst?

PS Ich laufe @ [email protected]

@suau Klingt so, als würden Sie die js-Datei des Client-Bundles ausführen. Zumindest bekomme ich den gleichen Fehler, wenn ich das normale dist-Bundle mit rc2 ausführe.

@MartinSvarrer Vielen Dank, ich habe es ungefähr 10 Mal von Grund auf neu erstellt und kleine Änderungen versucht. Irgendwie habe ich immer vergessen, den Eintrag "platform": "server" zu angular-cli.json hinzuzufügen.
Ich wollte Ihnen gerade sagen, dass ich die Bundles in zwei verschiedenen Ordnern habe ( dist und dist-server ) und das Client-Bundle möglicherweise nicht ausführen konnte, entschied mich jedoch, nach diesem Schlüssel zu suchen.
Vielen Dank, du hast meine geistige Gesundheit und das Wochenende gerettet.

Es scheint, dass die styles und scripts aus den angular-cli.json nicht im ssr-html enthalten sind.
Ist das absichtlich? In Anbetracht dessen sind diese für global verfügbare Stile und Skripte gedacht, die unerwartet sind.

Was ist der empfohlene Weg, um es zu tun? Das Einfügen in den Ordner src/assets und das Einfügen in den Ordner src/index.html funktioniert, aber dann muss ich ein separates gulp / webpack ausführen, um es zu minimieren.

PS Die Komponente CSS ist richtig inline.

Ich habe derzeit folgendes Problem:

ERROR TypeError: this.html.charCodeAt is not a function
    at module.exports.Preprocessor.advance (/myapp/node_modules/parse5/lib/tokenizer/preprocessor.js:124:24)
    at module.exports.Tokenizer._consume (/myapp/node_modules/parse5/lib/tokenizer/index.js:278:30)
    at module.exports.Tokenizer.getNextToken (/myapp/node_modules/parse5/lib/tokenizer/index.js:236:23)
    at module.exports.Parser._runParsingLoop (/myapp/node_modules/parse5/lib/parser/index.js:393:36)
    at module.exports.Parser.parseFragment (/myapp/node_modules/parse5/lib/parser/index.js:348:10)
    at Object.parseFragment (/myapp/node_modules/parse5/lib/index.js:23:19)
    at Parse5DomAdapter.setInnerHTML (/myapp/node_modules/@angular/platform-server/bundles/platform-server.umd.js:947:49)
    at Parse5DomAdapter.setProperty (/myapp/node_modules/@angular/platform-server/bundles/platform-server.umd.js:583:18)
    at EmulatedEncapsulationServerRenderer2.DefaultServerRenderer2.setProperty (/myapp/node_modules/@angular/platform-server/bundles/platform-server.umd.js:2106:44)
    at BaseAnimationRenderer.setProperty (/myapp/node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js:505:27)

Hinweis 1: Da das Problem mit Animationen zu tun zu haben scheint, habe ich es versucht

1. Verwenden Sie NoopAnimationsModule im Servermodul und BrowserAnimationsModule im Browsermodul
2. Um Animationen vollständig aus meinem Projekt zu entfernen und
3. Um Animationen vollständig aus meinem Projekt zu entfernen und dennoch NoopAnimationsModule vom Servermodul zu laden.

Hinweis 2: Ich führe einen zusätzlichen Kompilierungsschritt mit Webpack durch, um ngrx und ng-bootstrap auf die Whitelist zu setzen
Das ist meine webpack.config.js:

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  entry: {
    server: './server.ts'
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  target: 'node',
  externals: [nodeExternals({
    whitelist: [
      /^@ng-bootstrap\/ng-bootstrap/,
      /^@ngrx/,
    ]
  })],
  node: {
    __dirname: true
  },
  output: {
    path: path.join(__dirname, 'dist-server'),
    filename: '[name]-webpack.js'
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  }
};

Das ist mein server.ts:

import * as express from 'express';
import {ValueProvider} from '@angular/core';
import {renderModuleFactory} from '@angular/platform-server';
import {join} from 'path';
import {readFileSync} from 'fs';

import * as xhr2 from 'xhr2';
xhr2.prototype._restrictedHeaders.origin = false;

// Load zone.js for the server.
require('zone.js/dist/zone-node');
require('reflect-metadata');
const AppServerModuleNgFactory = require('./dist-server/main.b02d144863c57aa83124.bundle').AppServerModuleNgFactory;


const template = readFileSync('./src/index.server.html', { encoding: 'utf8' });

// Render to HTML and log it to the console.
// renderModuleFactory(AppServerModuleNgFactory, {document: index, url: '/'}).then(html => console.log(html));

const app = express();

app.engine('html', (_, options, callback) => {
  const opts = {
    document: template, url: options.req.url, extraProviders: [
      <ValueProvider>{
        provide: 'REQUEST',
        useValue: options.req,
      }]
  };

  renderModuleFactory(AppServerModuleNgFactory, opts)
    .then(html => callback(null, html));
});

app.set('view engine', 'html');
app.set('views', 'src');

app.get('*.*', express.static(join(__dirname, 'dist-server')));

app.get('*', (req, res) => {
  res.render('index', {req});
});

app.listen(5000, () => {
  console.log(`listening on http://localhost:5000!`);
});

Universal scheint jetzt in 1.3 ziemlich gut zu funktionieren. Gibt es eine Idee, wann das verzögerte Laden unterstützt wird?

Wie löse ich das ng-Bootstrap-Problem?

node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.js:1 (function (exports, require, module, __filename, __dirname) { import { ComponentFactoryResolver, Directive, ElementRef, EventEmitter, forwardRef, Injector, Input, NgZone, Output, Renderer2, ViewContainerRef } from '@angular/core'; ^^^^^^ SyntaxError: Unexpected token import at Object.exports.runInThisContext (vm.js:73:16) at Module._compile (module.js:543:28)

@ dimitriy-k Füge einen zusätzlichen Kompilierungsschritt hinzu, indem du das Webpack verwendest, um es auf die Whitelist zu setzen.

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  entry: {
    server: path.join(__dirname, 'your_universal_loader.ts'),
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  target: 'node',
  externals: [nodeExternals({
    whitelist: [
      /^@ng-bootstrap\/ng-bootstrap/,
    ]
  })],
  node: {
    __dirname: false,
  },
  output: {
    path: path.resolve(__dirname,  'dist-server'),
    filename: '[name]-webpack.js',
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader'}
    ]
  }
};

@suau https://github.com/angular/angular-cli/issues/1050#issuecomment -318672196 :

Es scheint, dass die styles und scripts aus den angular-cli.json nicht im ssr-html enthalten sind.
Ist das absichtlich? In Anbetracht dessen sind diese für global verfügbare Stile und Skripte gedacht, die unerwartet sind. ...

Ich habe das gleiche Problem und bin verwirrt. Ist dies ein Hinweis darauf, dass der Server- / Browser-Übergang nicht stattfindet oder fehlerhaft ist?

Hat jemand ein grundlegendes Beispiel / Starter-Repo, das zeigt, wie Angular-Cli v1.3 + so eingerichtet wird, dass globale Browserskripte / -stile in der vom Server gerenderten Ausgabe enthalten sind?

Haben Sie Updates zum Support Lazy Loading?

@PSTime finden Sie dies möglicherweise nützlich
https://github.com/angular/universal/tree/master/modules/ng-module-map-ngfactory-loader

https://github.com/angular/universal/tree/master/modules/ng-module-map-ngfactory-loader
scheint zu funktionieren, danke

Danke @somombo , es ist nützlich für mich. Aber Angular Cli generiert kein LAZY_MODULE_MAP (ich habe Plattform = Server hinzugefügt). Haben Sie einen Vorschlag?

@PSTime Ich habe es noch nicht getestet. Aber vielleicht können @FrozenPandaz oder @intellix eine Anleitung geben. Ref # 6913 # 7107

Hallo Leute.
Ich habe ein Projekt, das mit angle / cli (https://github.com/angular/angular-cli) erstellt wurde, und ich versuche, Universal in meiner App einzurichten.
Also folgte ich https://github.com/angular/angular-cli/wiki/stories-universal-rendering, aber es funktioniert nicht für mich.

Ich mache auch Schritt für Schritt https://github.com/angular/angular-cli/wiki/stories-universal-rendering .

Aber im Moment habe ich folgenden Fehler:
/node_modules/@angular/flex-layout/flexbox/api/class.js:18 import { Directive, ElementRef, Input, Renderer, Renderer2, IterableDiffers, KeyValueDiffers } from '@angular/core'; ^^^^^^ SyntaxError: Unexpected token import at Object.exports.runInThisContext (vm.js:76:16) at Module._compile (module.js:542:28) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object.eO38 (dist-server/main.bundle.js:1:1140643) at l (dist-server/main.bundle.js:1:149)

Ich versuche auch, ts-node mit --ignore false , aber es funktioniert bei mir nicht.

Wie siehst du tsconfig.server.json aus?

Dies ist meine tsconfig.server.json.
{
"erweitert": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "commonjs",
"baseUrl": "",
"Typen": ["Knoten"]
},
"ausschließen": [
"test.ts",
" * / .spec.ts"
],
"angleCompilerOptions": {
"entryModule": "app / app.server.module # AppServerModule"
}}
}}

ok wollte nur überprüfen, ob Sie "module": "commonjs" da dieser Fehler normalerweise bedeutet, dass auf der Serverseite etwas zu es2015 kompiliert wurde, was in nodejs nicht funktioniert.

Zeigt Ihr tsconfig in angular-cli.json auf diese Datei für die Servereinstellungen?

Ja,
Dies ist meine Angular-Cli.json-Datei.

{
"$ schema": "./node_modules/@angular/cli/lib/config/schema.json",
"Projekt": {
"name": "appName"
},
"Apps": [
{
"root": "src",
"outDir": "dist",
"Vermögenswerte": [
"Vermögenswerte",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"Präfix": "App",
"Stile": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/font-awesome/css/font-awesome.css",
"../node_modules/devextreme/dist/css/dx.common.css",
"../node_modules/devextreme/dist/css/dx.light.css",
"styles.css",
"assets / theme / css / style.css",
"Assets / Styles / Step-Application.css"
],
"Skripte": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
"environmentSource": "environment / environment.ts",
"Umgebungen": {
"dev": "environment / environment.ts",
"prod": "environment / environment.prod.ts"
}}
},
{
"Plattform": "Server",
"root": "src",
"outDir": "dist-server",
"Vermögenswerte": [
"Vermögenswerte",
"favicon.ico"
],
"index": "index.html",
"main": "main.server.ts",
"test": "test.ts",
"tsconfig": "tsconfig.server.json",
"testTsconfig": "tsconfig.spec.json",
"Präfix": "App",
"Stile": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/font-awesome/css/font-awesome.css",
"../node_modules/devextreme/dist/css/dx.common.css",
"../node_modules/devextreme/dist/css/dx.light.css",
"styles.css",
"assets / theme / css / style.css",
"Assets / Styles / Step-Application.css"
],
"Skripte": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
"environmentSource": "environment / environment.ts",
"Umgebungen": {
"dev": "environment / environment.ts",
"prod": "environment / environment.prod.ts"
}}
}}
],
"e2e": {
"Winkelmesser": {
"config": "./protractor.conf.js"
}}
},
"Flusen": [
{
"project": "src / tsconfig.app.json"
},
{
"project": "src / tsconfig.spec.json"
},
{
"Projekt": "e2e / tsconfig.e2e.json"
}}
],
"Prüfung": {
"Karma": {
"config": "./karma.conf.js"
}}
},
"Standardeinstellungen": {
"styleExt": "css",
"Komponente": {}
}}
}}

Versuchen Sie, die Skripte aus Ihren Servereinstellungen zu entfernen

"module": "commonjs" hilft, jetzt muss ich mit Paketen von Drittanbietern kämpfen)

Haben Sie Ideen, ob Angular Cli Universal Rendering mit ASP.NET Core verwendet werden kann, wie es von @MarkPieszak in Angular Universal mit ASP.NET Core implementiert wurde?

Ich konnte erfolgreich Server-Bundles mit CLI erhalten. Sobald ich jedoch main.bundle in Microsoft.AspNetCore.SpaServices.Prerendering.Prerenderer.RenderToString (...) verwende, wird ein Fehler ausgegeben, dass die Funktion webpackJsonp nicht verfügbar ist. Es ist in inline.bundle definiert und wird hier als Fensterobjekt verwendet, aber das Fensterobjekt ist auf der Serverseite nicht verfügbar. Ich bin nicht sicher, ob / wie es mit .NET Core funktioniert. Irgendwelche Ideen?

@KhalipskiSiarhei Sie können versuchen, es Funktion aus Inline zu importieren. .bundle.js, das nach ng build / ng build --prod generiert wurde.oder versuchen Sie 'dist / inline zu importieren. .bundle.js '
Ich habe es nicht versucht, könnte Arbeit sein

@PSTime Ich bin nicht sicher, wie es möglich ist, inline.bundle in die Server-ASP.NET-Core-Umgebung zu importieren: In Microsoft.AspNetCore.SpaServices.Prerendering.Prerenderer.RenderToString (...) kann nur ein Modul übergeben werden in der Tat ist main.bundle. Darüber hinaus wird inline.bundle für die Browserumgebung erstellt, da es document.getElementsByTagName, document.createElement und Fensterreferenzen enthält, die in der Serverumgebung nicht verfügbar sind.

Wenn es hilft, habe ich eine kleine Demo, die zeigt, wie Universal in der CLI mit prerendering und express Szenarien arbeitet und Lazy Loading hier https://github.com/Toxicable/universal-starter/tree/ cli
Führen Sie einfach npm run build:prerender oder npm run build:dynamic und überprüfen Sie den Ordner /dist zu sehen, wie meine Implementierung funktioniert.
Wenn Sie Fragen haben, können Sie mich gerne mit pingen. Https://gitter.im/angular/angular

@ Giftig danke, ich werde es mir ansehen. Derzeit verwenden wir noch CLI für Client-Bundles und Webpack für Server-Bundles und es ist nicht ideal ...

https://github.com/angular/angular-cli/issues/1050#issuecomment -322974848
... Angular Cli generiert nicht LAZY_MODULE_MAP (ich habe Plattform = Server hinzugefügt). Haben Sie einen Vorschlag?

@PSTime Ich kann bestätigen, dass ich LAZY_MODULE_MAP auch nicht importieren konnte und es nirgendwo in der Build-Ausgabe sehe.

Ich schlage vor, einen separaten Fehler in diesem @ angle / cli-Repo einzureichen.

Stört es Sie, es einzureichen? : Strauß :: erleichtert:

Verweisen Sie unbedingt auf die Anweisungen für @ nguniversal / module-map-ngfactory-loader.

@ Somombo welche Version der CLI? Sie benötigen v1.3 + für LAZY_MODULE_MAP
Bei all den Tests, die ich durchgeführt habe, hat es immer so funktioniert
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require( ./dist-server/main.${hash}.bundle );

@ Toxicable Danke dafür!
Beste Implementierung, die ich bisher gefunden habe, damit ich einfach arbeiten kann, ohne meinen Kopf gegen die Wand zu schlagen oder Fehler zu bekommen, die ich nicht einmal verstehen konnte :) Außerdem die erste Implementierung, die mit faul geladenen Modulen funktioniert.
Ich bin allerdings gespannt, wie die endgültige offizielle Implementierung aussehen wird ... Ich meine, wie wird die CLI dies tun, indem beim Erstellen und Erstellen der App nur ein Befehl / Argument verwendet wird ...

Haben Sie Beispiele für Dinge wie:

• Lesen von Cookies auf der Serverseite (der Inhalt einiger Komponenten kann davon abhängen, beispielsweise ob ein Benutzer authentifiziert ist oder nicht - durch ein Cookie überprüfbar)
• Keine http-Anfrage auf der Clientseite, wenn diese Daten bereits in der vom Server gerenderten Ansicht vorhanden sind

?

@ MrCroft Soweit ich weiß, denke ich nicht, dass es sich zu sehr ändern wird, wie es jetzt aussieht.
Dinge wie das Skript prerender.js, das ich habe, und das Skript server.js sind sehr viele Dinge, die die Domäne anstelle der CLI bereitstellen sollte. Daher denke ich, dass die CLI in dieser Hinsicht nicht viel mehr bereitstellen kann.

Was Cookies betrifft, habe ich mir noch nicht angesehen, wie dies funktionieren wird. Ich werde dies jedoch auf meine Liste setzen, wenn Sie ein Problem / einen Vorschlag auf https://github.com/angular/universal dafür machen möchten geschätzt werden.

Ihr zweiter Punkt bezieht sich auf ein Konzept namens StateTransfer. Hierbei wird Ihr Status auf dem Server gespeichert, dann an den Client übertragen und wiederverwendet.
Ich arbeite derzeit an einem Vorschlag dafür und anschließend an einer PR

Ist Universal jetzt Teil von Angular Client oder noch nicht? Wenn nicht, gibt es eine Zeitleiste, in der dies möglich ist?

@ennyta Ja, schauen Sie sich Universal-Starter an, um es in Aktion zu sehen. Ich werde die Dokumente hier in der CLI auch dafür aktualisieren.

@mrcroft Sie müssen die Server-Dinge immer noch selbst ausführen und bündeln, es wird nicht Teil von ng serve sein, das wird immer noch nur das Client-Bundle produzieren. Das Konzept der Universalität impliziert den Serveraspekt, daher muss es diese Trennung geben.

Dies gibt auch jeder Art von Knotenserver Freiheit, die jemand verwenden möchte, Hapi Koa Express usw.

Was Cookies betrifft, müssten Sie auf dem Server selbst damit umgehen, indem Sie das req-Objekt an die Anbieter übergeben [] und dann die Abhängigkeitsinjektion verwenden, damit der Server diese verwendet, während der Client sie von document.cookies erhält.

Hoffe das hilft ein bisschen!

Im Moment können Sie auch eines der TransferHttp-Beispiele, die wir haben, manuell erstellen oder verwenden, aber bald wird es Teil von Core sein, das es (optional) handhabt, wenn Sie es anweisen, es für einen bestimmten GET-Aufruf auszuführen.

Danke @MarkPieszak
Gibt es eine Möglichkeit, den universellen Build vom dist-Server lokal zu testen?

@ennyta Wenn Sie https://github.com/angular/universal-starter und im Projekt cli , können Sie npm run serve:static für statisches Rendern (auch als Prerendering bezeichnet) oder verwenden
npm run serve:dynamic für dynamisches Rendern (mit Express)
um zu sehen, wie es aussieht, als ob Sie auf einem Produktserver laufen würden, aber lokal

@Toxicable , ich bin im Client und habe zwei Ordner nach https://github.com/angular/angular-cli/wiki/stories-universal-rendering.
Gibt es eine Möglichkeit, den dist-Server lokal zu testen?

@ennyta planen Sie das Vorrendern oder die Verwendung von Express / Aspnetcore für das dynamische Rendern?

@Toxicable Beim Versuch, das Vorrendern durchzuführen, ist es gelungen, es auszuführen, und jetzt wird folgende Fehlermeldung angezeigt:
{Injectable} aus '@ angle / core' importieren;
^^^^^^
SyntaxError: Unerwarteter Token-Import
bei createScript (vm.js: 53: 10)
at Object.runInThisContext (vm.js: 95: 10)
at Module._compile (module.js: 543: 28)
at Object.Module._extensions..js (module.js: 580: 10)
bei Module.load (module.js: 488: 32)
bei tryModuleLoad (module.js: 447: 12)
at Function.Module._load (module.js: 439: 3)
at Module.require (module.js: 498: 17)
bei Bedarf (intern / module.js: 20: 19)
at Object.sZvN (C: \ Benutzer \ ana \ Arbeitsbereich \ foodfest \ foodfest-client-clidist-server \ main.ed8dace87ce02020841a.bundle.js: 1: 859271)

Irgendeine Idee, ob es reparabel ist? Ich sehe mehrere Personen in diesem Thema, aber ich sehe nicht, ob es eine Lösung dafür gibt.

@ennyta Die CLI muss wahrscheinlich NodeExternals und Whitelist-Winkelmodule enthalten, damit Webpack die Syntax des es6-Moduls lesen kann

Dies scheint entfernt worden zu sein: https://github.com/Toxicable/universal-starter/tree/cli (ich bekomme eine 404).
Ich denke, wir können den Universal-Starter / CLI verwenden - er wurde wie vor 10 Tagen aktualisiert -, aber es gibt einige Unterschiede in den Dateien server.js und prerender.js (im Vergleich zu dem Repo von @Toxicable ) - und Vielleicht andere Dateien, die ich noch nicht überprüft habe (ich glaube, ich kann sagen, dass sie für mich fast wie einfache "Text" -Differenzen sind, weil ich überhaupt keine Ahnung von der Knotenentwicklung habe).
Sollten wir berücksichtigen, dass der CLI-Ordner im Universal-Starter das aktuellste Beispiel für die Universal-Implementierung in einer CLI-generierten App ist (und auch weiterhin sein wird)?

@ gdi2290 Über das Vorrendern habe ich gelesen, dass "_it Ihre Anwendung rendert und die dist index.html durch eine gerenderte Version ersetzt._". Wofür ist das nützlich? Ich meine, wir haben nicht nur eine Root-Seite (Homepage). Sollten wir alle Routen manuell durchgehen und für jede mögliche Route eine statische HTML-Datei generieren? Und wird dies durch einfaches Ersetzen des Werts des Schlüssels url in den Optionen renderModuleFactory ? Aber trotzdem ... haben wir möglicherweise dynamische Routen oder Routenparameter und Abfrageparameter, die im Skript prerender.js nur sehr schwer (wenn nicht unmöglich) zu berücksichtigen sind, um alle möglichen HTML-Inhaltsdateien für alle möglichen zu generieren Kombinationen von Routen / Routenparametern / Abfrageparametern (ganz zu schweigen davon, dass die tatsächlichen Werte für die Routenparameter höchstwahrscheinlich aus einer Datenbank stammen). Ich verstehe überhaupt nicht, worum es beim Vorrendern geht ... Ich muss etwas vermissen, ich denke, es muss seinen Nutzen haben ... Ich denke, ich verstehe nur nicht, was das ist? Wenn nicht, dann scheint es ein Overkill zu sein, dies zu implementieren. Der Weg wäre dann dynamisch und ich bin sicher, dass ein Node-Entwickler auch in der Lage sein würde, den bei der ersten Anfrage generierten Inhalt einfach zwischenzuspeichern und für zukünftige Anfragen zu verwenden.

BEARBEITEN:
Okay, also ich habe meine Antwort unten. Ich verstehe, dass das Vorrendern besser für Apps geeignet ist, bei denen das Generieren des Inhalts nicht stark von dynamischen Parametern abhängt (die höchstwahrscheinlich mit Bezeichnern in einer Art serverseitiger Datenbank korrespondieren). Und dafür sind wir mit dynamischem Rendering (und natürlich einer Art Caching) besser dran. Vielen Dank, dass Sie @Toxicable

@ennyta Informationen zu diesem Problem finden Sie in dieser Ausgabe unter https://github.com/angular/angular-cli/issues/7200

@ MrCroft Meine Demo wurde in https://github.com/angular/universal-starter/tree/master/cli zusammengeführt
Das Beispiel dort zeigt nur die Route / , die gerendert wird. Ich habe jedoch ein Tool in Arbeit, mit dem Sie dynamisch Vorrender für jede statische Route in Ihrer App generieren können. Siehe: https://github.com/angular/ universal / pull / 778 oder https://github.com/Toxicable/universal/tree/routes-ls
für mehr darüber.
Dynamische Routen mit Parametern können nicht einfach vorgerendert werden. Verwenden Sie am besten eine der dynamischen Rendering-Engines, die wir haben, entweder die Node One für Aspnetcore One, die Ihre App im laufenden Betrieb rendert, was bedeutet, dass sie alle verwenden kann Parameter, die mit der Anfrage einhergehen

@ MarkPieszak

Was Cookies betrifft, müssten Sie auf dem Server selbst damit umgehen, indem Sie das req-Objekt an die Anbieter übergeben [] und dann die Abhängigkeitsinjektion verwenden, damit der Server diese verwendet, während der Client sie von document.cookies erhält.

Seit Ihrem Kommentar habe ich nach einem tatsächlichen Beispiel gesucht, aber keines gefunden. Also habe ich es blind geschafft, nachdem ich verschiedene Probleme gelesen / verschiedene Repos durchgesehen habe, mit diesem in meiner app.server.module.ts Datei:

// ...
import { Request } from 'express';
import { REQUEST } from '@nguniversal/express-engine/tokens';

export class RequestCookies {
    constructor(@Inject(REQUEST) private request: Request) {}

    get cookies() {
        return !!this.request.headers.cookie ? this.request.headers.cookie : null;
    }
}

@NgModule({
    imports: [
        // ...
    ],
    providers: [
        MyCustomCookieService,
        { provide: 'req', useClass: RequestCookies }
    ],
    bootstrap: [AppComponent]
})
export class AppServerModule {}

Während ich auch einen Dummy { provide: 'req', useValue: null } in meinem app.module.ts (der im Browser ausgeführt wird) bereitstelle. Dann injiziere ich in meine MyCustomCookieService Folgendes: @Inject('req') private readonly req: any und überprüfe einfach, ob es null dann verwende ich document.cookie , sonst verwende ich req.cookies .

Es funktioniert, aber ich muss fragen: Ist es genau das ,
Sollte ich auch mit dem Importieren von etwas aus express in meinen Angular-Code vertraut sein?

Außerdem können Sie jetzt eines der vorhandenen TransferHttp-Beispiele manuell erstellen oder verwenden

Wo finde ich ein solches Beispiel?

Seit 5.0.0-rc.0 (wenn ich mich nicht irre) wird TransferState mit Angular geliefert.

In Bezug auf https://github.com/angular/angular-cli/issues/1050#issuecomment -328584662 von @ gdi2290 :

Die CLI muss wahrscheinlich NodeExternals- und Whitelist-Winkelmodule enthalten, damit Webpack die Syntax des es6-Moduls lesen kann

Ich habe das gleiche Problem beim Versuch, ng-bootstrap mit universal zu verwenden.

Weiß jemand, ob es ein offenes Problem für das oben genannte gibt (ich kann anscheinend kein finden)?
@hansl / @filipesilva ... wenn es keine gibt, sollte es eine geben?

Kann geschlossen werden, da die CLI mit Universal funktioniert
https://github.com/angular/angular-cli/wiki/stories-universal-rendering

@ MrCroft schön gemacht, ja das ist ein toller Weg, um es zu bekommen! Ja, dir geht es gut, du kannst auch einfach deine eigene Oberfläche dafür erstellen, da du genau die Teile kennst, die du willst. Beides ist in Ordnung, da dies sowieso alles im Server-Rendering ist! 👍

@ Somombo
Ich habe das Problem, ng-bootstrap mit universal zu verwenden. Ein offenes Thema ist hier
https://github.com/ng-bootstrap/ng-bootstrap/issues/858

Lassen Sie mich wissen, ob Sie einen Ausweg gefunden haben!

@itstyro Ich habe mein Problem "behoben", indem ich im Grunde genommen kein ng-bootstrap verwendet habe, dh den Code, den ich brauchte, gegabelt und direkt in mein Projekt integriert habe. lol

Ja, abgesehen von den oben beschriebenen externen Knoten , gibt es immer noch eine Reihe von Problemen mit der Art und Weise, wie angle-cli den Serveraspekt des Projekts erstellt.

Zum Beispiel kann ich in meinem main.server.ts anscheinend keinen Zugriff auf die globale Variable __dirname . Ich verwende stattdessen process.cwd() aber sie sind eigentlich nicht genau dasselbe.

Auch in main.server.ts ein Fehler auf, wenn Sie AppServerModule nicht exportieren ... Ich möchte dies nicht tun müssen, da ich meine main.server.ts -Datei als Datei verwende wo ich die renderModuleFactory() -Funktion aufrufe .. nicht in einem separaten server.ts wie in der universellen Cli-Geschichte vorgeschlagen .

Das Schließen als @Toxicable korrekt erwähnte CLI funktioniert mit Universal.

Dieses Problem wurde aufgrund von Inaktivität automatisch gesperrt.
Bitte reichen Sie ein neues Problem ein, wenn Sie auf ein ähnliches oder verwandtes Problem stoßen.

Lesen Sie mehr über unsere Richtlinien zum automatischen Sperren von Konversationen .

_{_Diese Aktion wurde automatisch von einem Bot ausgeführt._}