角1.4 + ngNewRouter + ES6 :无法读取未定义的属性“$routeConfig”
目前，我正在尝试编写一个使用新路由器和ECMAScript 6编写的角1.4应用程序的基本工作示例。我一直在不停地修改这段代码，我不明白为什么会出现抛出的错误：
Failed to instantiate module bookShelf due to:
TypeError: Cannot read property '$routeConfig' of undefined我在我的index.html文件中引导了我的角应用程序，如下所示：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Home</title>
</head>
<body>
<div class="container">
<ng-viewport></ng-viewport>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-new-router/dist/router.es5.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script type="module" src="app/bootstrap.js"></script>
</body>
</html>我有1.4路由器的配置，以及在另一个文件中加载代码的角度模块，如下所示：
import { default as NerdController } from 'public/components/Nerd/Nerd.js';
import { default as MainController } from 'public/components/Main/Main.js';
import { default as NerdService } from 'public/services/NerdService.js';
var moduleName = 'bookShelf';
var app = angular.module(moduleName, ['ngNewRouter', NerdService])
.config(['$componentLoaderProvider', SetTemplatesPath])
.controller('AppController', ['$router', AppController])
.controller(NerdController)
.controller(MainController);
function SetTemplatesPath ($componentLoaderProvider) {
$componentLoaderProvider.setTemplateMapping(name => `public/components/${name}/${name}.html`);
}
function AppController ($router) {
$router.config([
{ path: '/', redirectTo: '/main' },
{ path: '/main', component: 'main' }, // component is template + controller from components folder
{ path: '/nerds', component: 'nerd' }
]);
}
export default moduleName;最后是实际的引导文件：
import { default as bookShelfModule} from './app/bookShelf.main.js';
angular.bootstrap(document, [bookShelfModule]);我是在一个完全失去和任何帮助将非常感谢，因为我真的想开始工作与ES6和新路由器。
回答 3
Stack Overflow用户
发布于 2015-06-21 16:30:39
为了使这个示例有效，我需要将AppController应用于index.html文件中的body标记，如下所示：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Home</title>
</head>
<body ng-controller="AppController">
<div class="container">
<ng-viewport></ng-viewport>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-new-router/dist/router.es5.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script type="module" src="app/bootstrap.js"></script>
</body>
</html>Stack Overflow用户
发布于 2015-06-20 06:09:46
基本上，它没有附带角v1.4，所以您在运行它方面的成功可能会有所不同。
https://github.com/angular/router
一个新的路由器角1.5和2.0，编写与TypeScript。 目前，代码已移动到角/角。API仍然在迅速变化，所以我还不建议在一个重要的生产应用程序中使用它。(编辑)
每周状态医生：
EznPV1I1UHMTbEl61t4hZ7ZpS0/edit#
2015年5月11日 (igor)：路由器 太多粗糙的边缘，还没有准备好进行1.4版。与Brian和Matias合作来改进它。
Stack Overflow用户
发布于 2015-11-13 02:56:03
经过几个小时的实验和调整，我发现当您首先定义控制器，而代码在控制器定义之后，则会导致此失败。
如果你移动你的AppController
function AppController ($router) {
$router.config([
{ path: '/', redirectTo: '/main' },
{ path: '/main', component: 'main' }, // component is template + controller from components folder
{ path: '/nerds', component: 'nerd' }
]);
}在此之前
var app = angular.module(moduleName, ['ngNewRouter', NerdService])
.config(['$componentLoaderProvider', SetTemplatesPath])
.controller('AppController', ['$router', AppController])
.controller(NerdController)
.controller(MainController);那你就不会看到这个问题了。
最佳实践是先定义控制器，然后声明
就像明智的angular.module(moduleName).controller(NerdController) also throws the same错误。( enter code hereangular.module(moduleName).controller('NerdController'，NerdController)也会抛出相同的
https://stackoverflow.com/questions/30950290
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号