angularjs - Angular 1.4 + ngNewRouter + ES6 : Cannot read property '$routeConfig' of undefined -
i trying throw basic working example of angular 1.4 app written both new router ecmascript 6. have been fiddling code non stop , don't understand why getting error being thrown:
failed instantiate module bookshelf due to: typeerror: cannot read property '$routeconfig' of undefined i have angular app being bootstrapped in index.html file 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 1.4 router angular module loading code in file such:
import { default nerdcontroller } 'public/components/nerd/nerd.js'; import { default maincontroller } 'public/components/main/main.js'; import { default nerdservice } '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 template + controller components folder { path: '/nerds', component: 'nerd' } ]); } export default modulename; and actual bootstrapping file:
import { default bookshelfmodule} './app/bookshelf.main.js'; angular.bootstrap(document, [bookshelfmodule]); i @ total loss , appreciated want start working es6 , new router.
in order example working, needed apply appcontroller body tag in index.html file, 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>
Comments
Post a Comment