角1.4 + ngNewRouter + ES6：无法读取属性未定义'$ routeConfig“ [英] Angular 1.4 + ngNewRouter + ES6 : Cannot read property '$routeConfig' of undefined
问题描述
我目前试图抛出连同这两个新的路由器以及ECMAScript的6我一直在这个code不停摆弄写了一个角1.4应用程序的一个基本工作示例，我不明白为什么我越来越被抛出的错误：
I am currently trying to throw together a basic working example of an Angular 1.4 app written with both the new router as well as ECMAScript 6. I have been fiddling with this code non stop and I don't understand why I am getting the error that is being thrown:
Failed to instantiate module bookShelf due to:
TypeError: Cannot read property '$routeConfig' of undefined
我已经被自举在我的index.html文件我的角度应用程序像这样：
I have my angular app being bootstrapped in my index.html file as so:
<!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路由器的配置以及在另一个文件中，这样我的角模块加载code：
I have configuration for the 1.4 router as well as my angular module loading code in another file as such:
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;
和最后实际的引导文件：
And finally the actual bootstrapping file:
import { default as bookShelfModule} from './app/bookShelf.main.js';
angular.bootstrap(document, [bookShelfModule]);
我在全损及任何帮助将非常AP preciated，因为我真的想开始ES6和新路由器的工作。
I am at a total loss and any help would be much appreciated as I really want to start working with ES6 and the new router.
推荐答案
为了让这个例子中的工作，我需要的AppController的应用到body标签index.html文件中，就像这样：
In order to get this example working, I needed to apply the AppController to the body tag in the index.html file, like so:
<!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>
这篇关于角1.4 + ngNewRouter + ES6：无法读取属性未定义'$ routeConfig“的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
