可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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

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>

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]);

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.

回答1:

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>

回答2:

Basically, it didn't ship with Angular v1.4, so your success in getting it running may vary.

https://github.com/angular/router

A new router for Angular 1.5 and 2.0, written with TypeScript.

For now, the code has been moved to angular/angular. APIs are still rapidly changing, so I don't recommend using this in an important production app quite yet. (edited)

From the Weekly Status doc:

https://docs.google.com/document/d/150lerb1LmNLuau_a_EznPV1I1UHMTbEl61t4hZ7ZpS0/edit#

May 11th, 2015

(igor): router

Too many rough edges, not ready for v1.4. Work with Brian and Matias to improve it.

回答3:

After hours of experimenting and tweaking i found that when you define the controller first and the code is after the controller definition cause this failure

if you move your AppController

function AppController ($router) {    $router.config([      { path: '/', redirectTo: '/main' },      { path: '/main', component: 'main' }, // component is template + controller from components folder     { path: '/nerds', component: 'nerd' }    ]); }

before this

var app = angular.module(moduleName, ['ngNewRouter', NerdService])   .config(['$componentLoaderProvider', SetTemplatesPath])   .controller('AppController', ['$router', AppController])   .controller(NerdController)   .controller(MainController);

then you will not see that issue.

Best practice is define the controller first then declare

Like wise angular.module(moduleName).controller(NerdController) also throws the same error. enter code hereangular.module(moduleName).controller('NerdController',NerdController) also throws the same

文章来源: Angular 1.4 + ngNewRouter + ES6 : Cannot read property '$routeConfig' of undefined

标签

angular

脚本

Angular 1.4 + ngNewRouter + ES6 : Cannot read property &#039;$routeConfig&#039; of undefined

问题:

回答1:

回答2:

回答3:

Angular 1.4 + ngNewRouter + ES6 : Cannot read property '$routeConfig' of undefined