Question

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

<div class="grid-headers">
	<div class="grid-column-date grid-header-item">Date</div>
	<div class="grid-column-col1 grid-header-item">Col1</div>
	<div class="grid-column-col2 grid-header-item">Col2</div>
	<div class="grid-column-col3 grid-header-item">Col3</div>
</div>

<ul class="grid-content">
    <li ng-repeat="item in vm.gridItems" class="grid-row">
         <div class="grid-column-date grid-row-item"></div>
         <div class="grid-column-col1 grid-row-item"></div>
         <div class="grid-column-col2 grid-row-item"></div>
         <div class="grid-column-col3 grid-row-item"></div>
    </li>
</ul>

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

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)

我的package.json看起来像：

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

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

Answer 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' }
}

Angular“英雄之旅”教程 - 未找到路由器

1 个答案: