Angular new router error Cannot read property 'path' of undefined

Question

I'm trying to write an app in angularjs by using the new router. But, don't know what's i'm doing wrong. From two days i went through a lot of articles,videos but till now can't able to get a grip on this.

Right now, i'm following this article - http://goo.gl/ayPmxr . My folder setting is like this..

- components
-- home
--- home.html

- angular.js
- app.js
- index.html
- router.es5.js

My Files -

index.html Test new router

<body ng-app="app" ng-controller="AppController">

    <!-- Multiple viewports require a name -->
    <div ng-viewport="nav"></div>
    <div ng-viewport="main"></div>

    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="router.es5.js"></script>
    <script type="text/javascript" src="app.js"></script>
</body>

app.js

enter image description here

Chrome Console error

enter image description here

Can any one please help me to find out where I'm doing wrong & how I can fix that.

The error is clearly in the 'router.es5.js' file, I recommend you check the versions of angular, and use the [most current version](https://code.angularjs.org/1.3.16/) — Walter Chapilliquen - wZVanG, Jun 07 '15 at 04:01
I got this new router file straight from there github account - https://github.com/angular/router/tree/master/dist — Suresh, Jun 07 '15 at 04:04
I had the same issue, builded a new version of new router an it worked. In case you need I have builded version in https://github.com/CodeDistillery/router/tree/master/dist — Veikko Karsikko, Jun 07 '15 at 07:38
@vepasto Sorry!!! But, i can't able to get you. Where I'm doing wrong in my code ? — Suresh, Jun 07 '15 at 07:40
@vepasto - I'm using your version of 'router.es5.js' file. That console error has been cleared now. But, i can't able to see my home.html content in index.html page. It's just showing as BLANK. Any clue ? My 'home.html' content is "
This is Home Component
". — Suresh, Jun 07 '15 at 07:51
In new version of router you must replace 'ng-viewport' to 'ng-outlet' in html — Veikko Karsikko, Jun 07 '15 at 07:56
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/79880/discussion-between-vepasto-and-mi6crazyheart). — Veikko Karsikko, Jun 07 '15 at 07:57
@vepasto what did you mean by 'builded a new version' what did you actually do ? — eran otzap, Oct 05 '15 at 20:26

score 1 · Answer 1 · answered Jun 08 '15 at 07:11

That's because you are not specifying any component for the nav viewport/outlet.

You should either remove from your view

<div ng-viewport="nav"></div>

or specify a component in your routes, something like

components: { 'nav': 'home', 'main': 'home' }

It's a known behavior/bug: https://github.com/angular/router/issues/207

score 0 · Answer 2 · answered Jan 12 '16 at 22:32

As of 2016-01-12, the following works for me: (just the body of index.html):

<body ng-app="app" ng-controller="AppController">

  <ng-viewport></ng-viewport>

  <script src="/node_modules/angular/angular.js"></script>
  <script src="/node_modules/angular-new-router/dist/router.es5.js"></script>

  <script src="./app.js"></script>
  <script src="./components/home/home.js"></script>

</body>

// app.js
// This example works as of 2016-01-12 using
// angular 1.5.0-rc.0
// angular-new-router 0.5.3
// Assumes:
// 1. app.js is in the root of the folder structure
// 2. components/home/ folder exists off the root and contains:
//     a.  home.js
//     b.  home.html

angular.module('app', ['ngNewRouter', 'app.home'])
  .controller('AppController', ['$router', AppController]);

function AppController ($router) {
  console.log('made it to AppController');

    $router.config([

        {path: '/', component: 'home' }

    ]);

}

I can post home.js and home.html, if needed, but based on the question, the problem is within app.js.

One key difference I spot right away is my (perhaps simplistic) example does NOT enclose the route confiuration inside of a components {} object.

Hope this helps.

Angular new router error Cannot read property 'path' of undefined

This is Home Component

2 Answers2