Angular“英雄之旅”教程——找不到路由器答案

【问题标题】：Angular "Tour of Heroes" Tutorial -- Router Not FoundAngular“英雄之旅”教程——找不到路由器
【发布时间】：2016-07-08 04:27:39
【问题描述】：

在尝试做 Angular 教程时，我在尝试做路由器部分时遇到了很多问题。起初我根本无法编译它，它说找不到路由器，导致我尝试升级到 3.0.0 alpha 和其他我什至不记得的潜在解决方案。最终我得到了编译，但是当我尝试查看页面时，我得到的只是无限期的默认“正在加载...”文本和 JS 控制台中的控制台错误：

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)

我的 index.html 看起来像这样：

<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>

我的 package.json 看起来像：

{
"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"
  }
}

我是网络开发的新手，不知道还有哪些其他文件/信息会有所帮助，但我会尝试根据人们的建议更新帖子。我在 OS X（El Capitan 10.11.5）上运行，在 Visual Studio Code 中开发并使用 Vivaldi（基于 Chrome）作为我的网络浏览器。

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

Angular 将他们所有的模块都移到了 bundles 子目录 (see the breaking changes for rc.2 here) 中。在您的 system.config 中，您需要将路由器包映射到该目录：

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

【讨论】：