Search code examples
angularjsecmascript-6angular-new-router

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

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.

Solution

  • 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>