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 - https://www.jvandemo.com/a-10-minute-primer-to-the-new-angular-router/ . 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 — Walter Chapilliquen - wZVanG
– Walter Chapilliquen - wZVanG, Commented Jun 7, 2015 at 4:01
I got this new router file straight from there github account - github.com/angular/router/tree/master/dist — Suresh
– Suresh, Commented Jun 7, 2015 at 4: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 github.com/CodeDistillery/router/tree/master/dist — Veikko Karsikko
– Veikko Karsikko, Commented Jun 7, 2015 at 7:38
@vepasto Sorry!!! But, i can't able to get you. Where I'm doing wrong in my code ? — Suresh
– Suresh, Commented Jun 7, 2015 at 7:40

acalvo · Accepted Answer · 2015-06-08 07:11:57Z

1

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

answered Jun 8, 2015 at 7:11

acalvo

4352 gold badges4 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

IntelligenceGuidedByExperience · Accepted Answer · 2016-01-12 22:32:45Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related