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

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -