2016-08-22 2 views
3

Ich versuche, in meiner lokalen Umgebung angle2 Quickstart Beispiel von Plunker laufen.Running Quick-Start-Kolben auf Chrom-Browser?

Dazu folgte ich diese Schritten-

  1. Laden Sie alle Dateien aus https://angular.io/resources/live-examples/quickstart/ts/plnkr.html in lokalen Ordner auf meinem Rechner.

  2. Doppelklicken Sie auf index.html, um die Anwendung auszuführen.

so kann ich Anwendung auf Firefox ausführen. aber ich erhalte einen Fehler bei chrome-

[email protected]?main=browser:101 XMLHttpRequest cannot load file:///C:/Adi/angular2-RC5-plunker/app/main.ts. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Wie führe ich diese Schnellstart-Anwendung auf Chrom-Browser erfolgreich?

chrome error screenshot

+0

Der Schnellstart hat einen Knoten lite Server hinein gebaut. Ich würde empfehlen, dies stattdessen zu verwenden. https://github.com/angular/quickstart –

+0

** Unglaublich **, dass es keine Möglichkeit gibt, ein Projekt auszuführen, wenn Sie den vollständigen Quellcode haben. Was fehlt? Fehlt die Konfiguration? Sind die Abhängigkeiten nicht vorhanden ??? In Java zum Beispiel gibt es eine einzige Datei, Pom oder Gradle, die Ihnen alle Konfigurationen/Abhängigkeiten zur Verfügung stellt, die zum Ausführen eines Projekts benötigt werden. Was fehlt in Angular 2 ??? –

+0

Auch seltsam, dass dies auf Firefox läuft, aber nicht auf Chrome. Ich dachte, Angular benötigt einige serverseitige Funktionen für einen Teil seiner Kernkomponenten. Obwohl ich wirklich froh wäre, dass es nicht der Fall war. Siehe [Warum benötigt Angular einen Server in seinen Lernprogrammen?] (Http://stackoverflow.com/q/31624686/435605). –

Antwort

0

Kombination Schritte mit dem Prozess Erklärung zu beheben. Folgen Sie den nummerierten Fixes, um die Konfiguration zu reparieren.

* Lösung basiert auf npm wie in der official Angular 2 guide verwendet.

Angular 2 plunker link leitete mich zu einem Angular 2 QuickStart-Beispiel um (das sich von Plunkers Angular 2-Vorlage unterscheidet - FYI).

Ich habe Plunker-Projekt heruntergeladen, wie Adi99 tat.

Ich versuchte dann, die Schritte in Angulars QuickStart setup zu folgen, scheiterte jedoch auf npm install.

Fehler: ENOENT: no such file or directory, open '/home/alik/Dev/help2/package.json'.

Fix Schritt 1: Download package.json von Angular 2 QuickStart source code, steckt es in den Projektordnern und Änderung der Wurzel in der Datei src mit ..

Die Ausführung von npm install wird jetzt erfolgreich durchgeführt und lädt wahrscheinlich alle erforderlichen Abhängigkeiten herunter.

Der nächste Schritt im QuickStart-Lernprogramm ist die Ausführung npm start, die unter error TS5057: Cannot find a tsconfig.json file at the specified directory: './' fehlschlägt.

Fix Schritt 2: tsconfig.json von Angular 2 QuickStart source code herunterladen und in den Projektordner des Stamm setzen ..

npm start jetzt Laufen geht erfolgreich, den Server erstellen und eine Browser-Seite mit der Adresse http://localhost:3000/, Öffnungs Rendering Angular 2 erfolgreich Code mit der Meldung:

Hello Angular

Hope this half und Angular Team :) wird die ursprüngliche Konfiguration erleichtern. Es ist eine schlechte Architektur, viele Konfigurationsdateien zu haben. Es ist schwer zu verstehen, was benötigt wird, warum und wie man es ändert. Zum Beispiel in Angular's QuickStart source project gibt es 10 Konfigurationsdateien: bs-config.e2e.json, bs-config.json, karma-test-shim.js, karma.conf.js, package.json, protractor.config.js, tslint.json, src/systemjs.config.extras.js, src/systemjs.config.js, src/tsconfig.json