So stellen Sie Angular2-Projekte ohne Verwendung von CLI bereit

8

Dies ist die Ordnerstruktur, die ich für ein in Winkel 2 erstelltes Projekt gemacht habe. Ich habe den Knoten-Modul-Ordner und einen anderen Ordner gelöscht, um ihn hier einzupassen. Zum Styling habe ich nur Bootstrap benutzt. Ich habe Angular-CLI nicht verwendet. Kann mir irgendjemand sagen, wie ich es einsetzen soll? Sollte ich Schluck nehmen? Was sollen meine Schritte sein? Ich habe eine Menge Antworten auf Stackoverflow durchgespielt, aber alle verwendeten GULP und CLI. Ist es erforderlich, beide zu verwenden? Wenn ja, erläutern Sie, wie Sie die Bereitstellung erreichen. Leider wird nichts über den Einsatz auf der offiziellen Website von Anular2 erwähnt. Jede Hilfe, Anleitung und Anregung ist willkommen.

%Vor%

Das ist meine Datei system.config.js:

%Vor%     
heman123 28.10.2016, 09:50
quelle

3 Antworten

2

Ich habe dieses Problem mit Webpack gelöst. Mein Webpack erstellt ein bundle.js, das alle .js .ts .html-Dateien enthält und konvertiert es in bundle.js. was ich in Index.html importiere. Dieses bundle.js enthält alle für die Ausführung erforderlichen Dinge. Andere Dinge, die von meiner Seite benötigt werden, wie style.css und einige Bootstrap-Bibliotheken, müssen extern in index.html enthalten sein. Schritte, die Sie folgen müssen, sind:

  1. Include "compression-webpack-plugin": "^ 0.3.2" -Paket in package.json in der Dev-Abhängigkeit
  2. Wenn Sie Webpack verwenden, sollten Sie einige Dinge beachten. Sie müssen die korrekte Syntax verwenden, um Ihre Vorlagen in Komponenten zu importieren, und es gibt nur wenige Änderungen an Routen.
  3. Ich habe mein Build-Skript auch in package.json geändert. Code hinzugefügt, damit Webpack funktioniert

      

    "build": "npm run tsc & amp; & npm run clean & amp; & amp; mkdir _dist & amp; & amp; webpack   --devtool Inline-Quellkarte ",

  4. Sie müssen Ihr Webpack konfigurieren. webpack.config.js enthält die gesamte Konfiguration, die ich gemacht habe. Es sieht ungefähr so ​​aus.

%Vor%
    
heman123 28.02.2017, 13:52
quelle
2

Endlich haben angulare Kerle auf mein Problem gehört und eine sehr umfangreiche Lösung gegeben. Sie haben ihre Website aktualisiert und den obigen Schritt auf ihrer Website eingefügt. Bitte gehen Sie für eine ordnungsgemäße Anleitung Webpack für Angular2

durch     
heman123 11.04.2017 07:21
quelle
0

Antwort auf TLDR : Sehen Sie sich die QuickStart-Dokumentationen von Angular2 an und verstehen Sie, wie alles funktioniert und dann herauszufinden, was Sie verwenden möchten, um Ihr Projekt zu erstellen, um Ihre Bedürfnisse anzupassen. Wenn Sie nur üben, folgen Sie einfach dem Tutorial und probieren Sie Kombinationen aus. Ich empfehle auch, das Tour des Helden-Tutorials für zusätzliche Beschreibungen zu probieren.

Ich hatte das gleiche Problem, auf das Sie stoßen. Ich wusste nicht, wie ich mit Angular2 anfangen sollte, da es so aussieht, als ob es viele Schritte gäbe. Darüber hinaus sind viele der Projekte, die Sie online finden, sehr eingeschränkt in dem, was sie tun. In den meisten Fällen handelt es sich nur um Tutorials, wie Sie angular2 im Frontend mit Systemjs und CLI-Aufgaben verwenden können - was gut ist, da sie helfen zu verstehen, was Sie zum Starten der Anwendung benötigen oder welche Fragen Sie haben.

Nachdem gesagt wurde, dass der optimale Build subjektiv ist, was Sie tun möchten und wie Sie das Projekt erstellen möchten. Zum Beispiel ging ich selbst mit dem Gulp-Ansatz, da es ein Werkzeug ist, das mir vertraut ist und kein cli mehr tun wollte, als nur in gulp einzutippen. Der Nachteil dabei war, dass es keine Tutorials gab, die zeigen, wie man Angular2 so zusammenfügt und ausführt, wie ich es wollte, mit der zusätzlichen Schwierigkeit, ein Backend zu verbinden, das meinen Bedürfnissen entsprach.

Ich weiß, das ist wahrscheinlich nicht die Antwort, die du willst, aber nimm es als Tipp. Um zu verstehen, was Sie tun möchten, spielen Sie mit Angular 2 so herum, wie die Google Docs Sie durchgehen und darauf achten, wie sie das Projekt aufbauen und wie alles zusammenwirkt. Wenn du dies tust, ignoriere alle anderen Informationen über einen Schluck oder was auch immer du benutzt, andere; um sicherzustellen, dass Sie verstehen, was Sie brauchen. Von da an würde ich vorschlagen, Ihre Fähigkeiten und Kenntnisse anderer Tools zu nutzen, um ein robusteres Paket zu erstellen, das Ihre Anforderungen erfüllt und was Sie erreichen möchten. Auch wenn Sie Schritt für Schritt ein Eckertour von Helden Tutorial möchten, ist das ziemlich anschaulich und ein guter Weg gestartet.

    
CriCri 28.10.2016 18:51
quelle

Tags und Links