2015-07-16 10 views
7

Dieser Code soll eine div zeigen, die Hello World enthält, aber stattdessen erhalte ich den Fehler Uncaught TypeError: System.import is not a function. Ich folge der Erste Schritte Tutorial-Video für ng-book2, die den folgenden Code in index.html enthält:Uncaught TypeError: System.import ist keine Funktion

<!DOCTYPE html> 
<html> 
<head> 
    <title>Angular 2</title> 

    <script src="js/traceur-runtime-0.0.90.js"></script> 
    <script src="js/system-0.18.4.js"></script> 
    <script src="js/angular2-alpha31.js"></script> 
</head> 
<body> 
    <script>System.import('js/app');</script> 
    <hello-world></hello-world> 
</body> 
</html> 

und app.ts:

/// <reference path="../lib/node_modules/angular2/angular2.d.ts" /> 

import { 
    Component, 
    View, 
    bootstrap 
} from 'angular2/angular2'; 

// Annotation section 
@Component({ 
    selector: 'hello-world' 
}) 
@View({ 
    template: '<div>Hello World</div>' 
}) 
// Component controller 
class HelloWorld { 

} 

bootstrap(HelloWorld); 

und schließlich die aktuelle Verzeichnisstruktur:

/ng2 
    /js 
    angular2-alpha31.js 
    app.js 
    app.js.map 
    system-0.18.4.js 
    system-0.18.4.js.map 
    traceur-runtime-0.0.90.js 
    index.html 

Nach Lösungen suchen, die only issue that seems similar enough Staaten gibt es ein Problem mit System config.js. Mit Ausnahme dieses Tutorials zeigt das Video, dass dies ohne einen Hinweis auf die Konfiguration funktioniert. Ich sollte erwähnen, dass dies auf einem Remote-Server statt auf dem lokalen HTTP-Server im Video gehostet wird.

Screenshots des Entwickler Fenster:

System.import is not a function

File list

Jede Datei in der obigen Verzeichnisstruktur dargestellt ist die aktuellste auf GitHub, da dies zu schreiben. Gibt es eine Standardkonfigurationsdatei, die ich aufnehmen sollte, wenn ich einen Remote-Server benutze oder fehlt mir etwas völlig anderes?

+0

Wird 'System' korrekt geladen? Was zeigt die automatische Vervollständigung in der JavaScript-Konsole nach "System"? – tadman

+0

versuchen Sie dieses Seed-Projekt, Sie haben eine laufende Hallo Welt von Anfang an -> https://github.com/mgechev/angular2-seed –

+0

@tadman Sorry, nicht sicher, was Sie mit Auto-Vervollständigen? Im Konsolenfenster unter dem Fehler wird '(anonyme Funktion) @ (Index): 11' angezeigt. Gibt es eine Methode innerhalb des "System" -Objekts, das ich testen kann, um zu sehen, ob es geladen wird? –

Antwort

6

Nachdem ich mit den Dateien weiter herumgespielt habe, habe ich festgestellt, dass Angular2 das Objekt System von SystemJS mit seinem eigenen überschreibt. Wenn angular2.js oben system.js im HTML bewegt, dann ist die Aussage

<script>System.import('js/app');</script> 

verwendet das richtige Objekt System.

Dies sollte nicht passieren, aber es ist ein Problem für die Zeit.

1

Ein Hinweis darauf, dass js/system-0.18.4.js nicht geladen werden konnte.

+0

Noch mehr auf Basarat gehen? Ich habe dieselbe Fehlermeldung. –

+0

Sehen Sie, was 'System' ist ... ist es definiert – basarat

+0

Ich habe einen separaten Beitrag erstellt und meine Configs und solche veröffentlicht: http://StackOverflow.com/Questions/35636823/Systemjs-and-Karmajs-Typerror-System- Import-ist-nicht-eine-Funktion –

Verwandte Themen