Documentation states that when you return a promise from the $routerOnActivate function in a component, the activation of the route is delayed until the promise is resolved. However, it seems that it doesn't really work that way.

In my fork (https://github.com/bvklingeren/ng1-component-router-demo) I have added code in heroes.js (lines 16 and 85-88) that adds a controller function call to the heroList template. I would have expected that the function notify() would not have been called before activation of the route. But if you add a timeout to the getHeroes() function in the HeroService (line 52-54) and run the app and navigate to the Hero list, it shows (look in you console) that the notify() function is indeed called before the heroes list is resolved (the 'Is notified' message is printed before the 'Got heroes' message).

Does anyone experience the same issues, or am I misunderstanding the intentions of the code/documentation?

I can pass hardcoded data to component

$routeConfig: [{
      path: '/record/:id/...',
      component: 'record',
      name: 'Record',
      data: 'pass to component'
    }]

The problem I encountered is that $routeConfig is run before controllers, canActivate etc. Would be useful to pass url param from parent route or some object with data required for that component, is there a way to do this?

Is there some documentation somewhere ?

Thanks for putting this demo out, helped solve many issues.
But there is something I've stumbled upon and though maybe you can help resolve.

if you change template to templateUrl in a code below then controller events like $routerOnActivate() stop triggering.
https://github.com/petebacondarwin/ng1-component-router-demo/blob/master/app/crisis-center.js

.component('crisisList', {
    template:
      '<ul>\n' +
      '  <li ng-repeat="crisis in $ctrl.crises"\n' +
      '    ng-class="{ selected: $ctrl.isSelected(crisis) }"\n' +
      '    ng-click="$ctrl.onSelect(crisis)">\n' +
      // '    >' +
      // '  <a ng-link="[\'CrisisDetail\', { id: crisis.id }]">\n' +
      '    <span class="badge">{{crisis.id}}</span> {{crisis.name}}\n' +
      // '  </a>' +
      '  </li>\n' +
      '</ul>\n',
    bindings: { router: '=' },
    controller: CrisisListComponent,
    $canActivate: function($nextInstruction, $prevInstruction) {
      console.log('$canActivate', arguments);
    }
  })

I keep getting this issue when running the demo app. I double checked several times to make sure I'm using the router js from this demo package but the error is still there?

Perhaps the router is not ready yet and I should stick to angular ui router for now?

Win10 64bit
node version is 5.5.0
lite-server is 2.1.0

Ello, I ran
npm install
then npm start
and on npm start got the following.

λ npm start

> [email protected] start C:\Users\terra\Documents\GitHub\ng1-component-router-demo
> lite-server

Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
** browser-sync options **
{ injectChanges: false,
  files: [ './**/*.{html,htm,css,js}' ],
  server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3002
    External: http://10.164.161.47:3002
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://10.164.161.47:3001
 --------------------------------------
[BS] Serving files from: ./
[BS] Watching files...
events.js:154
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::3001
    at Object.exports._errnoException (util.js:856:11)
    at exports._exceptionWithHostPort (util.js:879:20)
    at Server._listen2 (net.js:1236:14)
    at listen (net.js:1272:10)
    at Server.listen (net.js:1368:5)
    at Object.module.exports.startServer [as fn] (C:\Users\terra\Documents\GitHub\ng1-component-router-demo\node_modules\browser-sync-ui\lib\async.js:116:39)
    at C:\Users\terra\Documents\GitHub\ng1-component-router-demo\node_modules\browser-sync-ui\lib\UI.js:184:14
    at iterate (C:\Users\terra\Documents\GitHub\ng1-component-router-demo\node_modules\async-each-series\index.js:8:5)
    at C:\Users\terra\Documents\GitHub\ng1-component-router-demo\node_modules\async-each-series\index.js:16:16
    at C:\Users\terra\Documents\GitHub\ng1-component-router-demo\node_modules\browser-sync-ui\lib\UI.js:192:13

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v5.5.0
npm ERR! npm  v3.3.12
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `lite-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'lite-server'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the component-router-angular-1 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     lite-server
npm ERR! You can get their info via:
npm ERR!     npm owner ls component-router-angular-1
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\terra\Documents\GitHub\ng1-component-router-demo\npm-debug.log

I have module component which has List and Record routes using respective components called list and record.

module.js

$routeConfig: [
    {
      path: '/list',
      component: 'list',
      name: 'List',
      useAsDefault: true
    },
    {
      path: '/record/:id/...',
      component: 'record',
      name: 'Record'
    }
  ]

/module/Installations/list/
/module/Installations/record/9c3dcf35-5da9-c7f2-a4e8-56bc516c6097/details

List just shows list of modules
while Record shows a list of tabs for that module, default tab is Details which uses component details and shows module fields in a form, other tabs are related modules and I need to show them in a list so I figure I use the same list component to do that.

record.js

$routeConfig: [
    {path: '/details', name: 'DetailsTab', component: 'detailsComponent', useAsDefault: true},
    {path: '/:tab', name: 'ListTab', component: 'list'}
  ],

In a list component template I have links to Record, I want to use them and be able to navigate to Module/:moduleName/record/:id/details which worked fine using $router.navigate(['Record', { id: module.id }]) in list component controller while in /Module/List, but once it is in /Module/Record/ListTab the link stopped working throwing Component "Root" has no route config.

I am probably missing something obvious here, hoped maybe you can help out. thanks.

Running the application on http://localhost:3000/ results in page with "Component Router" and this additional html comment in source code:

<!-- ngOutlet: undefined -->

Seems like ng-outlet is not working correctly.