2016-07-07 11 views
0

Beim Versuch, das Angular-Tutorial zu machen, bin ich auf viele Probleme gestoßen, die versuchen, den Router-Abschnitt zu machen. Zuerst konnte ich es überhaupt nicht kompilieren und es sagte, dass es den Router nicht finden konnte, was mich dazu brachte, auf das 3.0.0 Alpha und andere mögliche Lösungen zu aktualisieren, an die ich mich nicht einmal erinnern kann. Schließlich habe ich es kompilieren, aber wenn ich versuche, und die Seite, alles, was ich bekommen ist der Standard „Loading ...“ Text auf unbestimmte Zeit und eine Konsole Fehler in der JS-Konsole:Angular Tutorial "Tour of Heroes" - Router nicht gefunden

localhost/:18 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/router(…)(anonymous function) @ localhost/:18 
http://localhost:3000/node_modules/@angular/router/router.umd.js Failed to load resource: the server responded with a status of 404 (Not Found) 

Mein index.html Aussehen etwa so:

<html> 
<head> 
<base href="/"> 
<title>My lil' tour o' 'roes</title> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="styles.css"> 
<!-- 1. Load libraries --> 
<!-- Polyfill(s) for older browsers --> 
<script src="node_modules/core-js/client/shim.min.js"></script> 
<script src="node_modules/zone.js/dist/zone.js"></script> 
<script src="node_modules/reflect-metadata/Reflect.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 
<!-- 2. Configure SystemJS --> 
<script src="systemjs.config.js"></script> 
<script> 
    System.import('app').catch(function(err){ console.error(err); }); 
    System.import('router').catch(function(err){ console.error(err); }); <!-- LINE 18 --> 
</script> 
</head> 
<!-- 3. Display the application --> 
<body> 
<my-app>Loading...</my-app> 
</body> 
</html> 

und mein package.json wie folgt aussieht:

{ 
"name": "angular2-quickstart", 
    "version": "1.0.0", 
    "scripts": { 
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", 
    "lite": "lite-server", 
    "postinstall": "typings install", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w", 
    "typings": "typings" 
    }, 
    "license": "ISC", 
    "dependencies": { 
    "@angular/common": "2.0.0-rc.1", 
    "@angular/compiler": "2.0.0-rc.1", 
    "@angular/core": "2.0.0-rc.1", 
    "@angular/http": "2.0.0-rc.1", 
    "@angular/platform-browser": "2.0.0-rc.1", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.1", 
    "@angular/router": "3.0.0-alpha.7", 
    "@angular/router-deprecated": "2.0.0-rc.1", 
    "@angular/upgrade": "2.0.0-rc.1", 
    "angular2-in-memory-web-api": "0.0.11", 
    "bootstrap": "^3.3.6", 
    "core-js": "^2.4.0", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.6", 
    "systemjs": "0.19.27", 
    "zone.js": "^0.6.12" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.0.0", 
    "lite-server": "^2.2.0", 
    "typescript": "^1.8.10", 
    "typings": "^1.0.4" 
    } 
} 

ich Web-Entwicklung neu bin und weiß nicht, was andere Dateien/Infos wäre hilfreich, wird aber versuchen, Aktualisieren Sie den Post mit was auch immer Leute schlagen vor. Ich laufe auf OS X (El Capitan 10.11.5), entwickle in Visual Studio Code und benutze Vivaldi (Chrome-based) als meinen Webbrowser.

Antwort

0

Angular bewegte alle ihre Module in ein bundles Unterverzeichnis (see the breaking changes for rc.2 here). In Ihrer system.config müssen Sie das Router-Paket diesem Verzeichnis zuordnen:

var packages = { 
    /* Other packages..*/ 
    '@angular/router': { main: 'bundles/router.umd', defaultExtension: 'js' } 
} 
Verwandte Themen