New router

[georgiosd]

I've tried my luck at the Gitter channels with limited success so I'm trying my last resort :)

What's the current way of importing the new component router to a project?

I see most recent work is in angular/angular repo but don't seem to find a recent package anywhere.
The JSPM angular-new-router package points to @btford's repo and brings version 0.5.3 which looks pretty outdated.

[ryanwalls]

+1

[brandonroberts]

@georgiosd Since the new router isn't published yet, you're gonna have to build it from source using the http://github.com/angular/angular repo. From there you can take the built file (angular_1_router.js) and use it

[brandonroberts]

Here is a plunkr with the latest build as of today.

http://plnkr.co/edit/MxzjC99l8WDbuEu14ws2?p=preview

[georgiosd]

That's wonderful, thank you. Is there an ETA on a release currently?

[brandonroberts]

I have no idea. I thought the new router was supposed to come with 1.5, but we'll have to wait and see.

[georgiosd]

Indeed! Thanks, closing this now!

[georgiosd]

@brandonroberts what sequence of commands do you use to build the router?

I did the "normal" npm install npm build.js steps and didn't get an angular_1_router.js file...

[brandonroberts]

@georgiosd you need to run gulp buildRouter.dev. It will put the angular_1_router.js in your dist folder.

[vguede]

@brandonroberts can you give us all the sequence of commands to build the router ? I'm a newbie on gulp and it doesn't work with me.

[brandonroberts]

@vguede Sure. You need to have at least node 5 and at least npm 3.x installed.

Install gulp globally npm install -g gulp@latest
Clone the angular 2 repo: git clone git@github.com:angular/angular.git angular2
Go into the angular2 directory and install the dependencies cd angular2 and npm install
After npm finishes, run the gulp command to build the router file gulp buildRouter.dev

The angular_1_router.js file will be in your angular2/dist folder.

Hope this helps

[vguede]

@brandonroberts It works fine ! Many thanks !

[pauloya]

@brandonroberts Thanks for the info. I couldn't use child routes correctly, and can't find any example with child routes. I expanded the plunker you sent with a child route, as I understand it should be used.
http://plnkr.co/edit/5PyC9MjSaI5xC3fZRkgw?p=preview

The Home component has a new outlet, and configures a new route at "/", but this fails with
Error: Configuration '/' conflicts with existing route '/'

I don't think it should conflict, since the home controller is configuring a child route, it look's like the home controller is receiving the top router instead of a child one.
I based this on this presentation: https://docs.google.com/presentation/d/1bGyuMqYWYXPScnldAZuxqgnCdtgvXE54HhKds8IIPyI/edit#slide=id.gcbc539c5a_2_619

Can someone help me understand how to set up child routes, or point me to a working sample?

[brandonroberts]

@pauloya Setting up child routes in Angular 1 is a little different then setting them up in Angular 2. To setup up your child routes, you have to place a $routeConfig property on your directive factory function in the parent directive. I forked your plunk and updated it with a working example.

http://plnkr.co/edit/2ZNQzWfspvpmMCLRBOdN?p=preview

If you also want to look at another example, Its using the upcoming component helper, but the concepts are the same. https://github.com/brandonroberts/angularjs-component-router

If you want a newer build you can install the router from npm now.

npm install @angular/router

[vguede]

Many thanks @brandonroberts for npm !

[pauloya]

That's exactly what I needed, thanks!

[vguede]

@brandonroberts You have the same bug templateUrl <=> $onActivate (issue : angular/angular#4633) on angularjs-component-router.
Have you any idea when this bug will be fixed ?

[brandonroberts]

@vguede I have no idea when it will be fixed. I normally have a build step that imports the html as is and use the template property.

[pauloya]

Thanks @brandonroberts, I got things working using module.component() !
I'm not sure how I'm supposed to inject and use $router in the component.
I want to call navigate() programmatically, and also read the params.

http://plnkr.co/edit/xdEYFmUCv0xzvEbXrh0p?p=preview
In this plunkr I added a call to navigate, but it doesn't work unless I use _childrouter:

$router._childRouter.navigate([...])

Thanks!

[brandonroberts]

@pauloya I thought whenever you inject the router it will use that component as the parent component for navigating and creating links. In the case of your example, you need to change

$router.navigate(['./Son']);

to

$router.navigate[('/Home', 'Son']);

If you want to use parameters with a route, just add the params after each component in the array

$router.navigate(['/Home', {name:'HomeParam'}, 'Son', {name:'SonParam'}]);

[pauloya]

Thanks @brandonroberts.
But the ng-link in the template uses the relative link ['./Son'].
I thought I would be able to the same on the controller.

[brandonroberts]

@pauloya I thought so also. It may be a bug, but I'm not sure.

[smkamranqadri]

It's a nice discussion and helps to find some answers for router

[brandonroberts]

@pauloya the router delegates navigation to the root router, which explains why you have to provide the full route path even in a child component when navigating programmatically.

[btribouillet]

Hi,

I'm trying to use the new router, ngComponentRouter in a new project using AngularJs 1.5 and ES6.

So i downloaded it with npm (npm install @angular/router) and imported it in my app.js.

import ngComponentRouter from 'npm/@angular/router/angular1/angular_1_router.js';

console.log(ngComponentRouter) is returning an empty object {}.

Therefore i can't instantiate ngComponentRouter.

angular.module('app', [
    ngComponentRouter,
    ....
    ]
);

This will return :

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module {} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object

Any ideas what could be done to be able to use it?

[brandonroberts]

@btribouillet You don't need to import it that way. Just import it and use the string

import 'npm/@angular/router/angular1/angular_1_router.js';

angular.module('app', [
    'ngComponentRouter'
    ]
);

[btribouillet]

@brandonroberts Thank you! perfectly working ;).

[brandonroberts]

@btribouillet 👍

[btribouillet]

I talked to fast ;).

Actually i'd like to inject it in the configuration of my module.

import angular from 'npm/angular';
import 'npm/@angular/router/angular1/angular_1_router'; 
import uiRouter from 'angular-ui-router';
import homeComponent from './home.component';

let homeModule = angular.module('home', [
    uiRouter,
    // 'ngComponentRouter' 
])

.config(($stateProvider) => {
// .config(($router) => { // Using ngComponentRouter

    console.log($stateProvider); // return the stateProvider object
    // console.log($router); // Using ngComponentRouter

    // $router = [
    //     { path: '/home', as: 'Home',  component: homeComponent }
    // ]

})

.component('home', homeComponent);

export default homeModule;

The commented code is the code i'd like to use (using ngComponentRouter) but returning Unknown provider: $router. This code is working with ui-router.

Am i wrong to inject $router instead of something else?

[brandonroberts]

@nicl there currently isn't a public way to access the params in the constructor. What you would need to do is use the routerOnActivate method and get the id from next.params.id

There is an example in Pete's repo here: https://github.com/petebacondarwin/ng1-component-router-demo/blob/master/app/heroes.js#L80-L95

If you look at the HeroDetail route you see it has an :id parameter also.

[petebacondarwin]

@nicl also it doesn't strictly make that much sense to access the params in the constructor since the component could be reused. That is why we have the various hooks: $routerOnActivate and $routerOnReuse

[andreiho]

@brandonroberts @petebacondarwin the $routerOnActivate method doesn't work with the templateUrl property, only with template. Wasn't this fixed at some point? I remember reading somewhere about it.

[brandonroberts]

@andreiho There is a PR for it here: angular/angular#6978, it just hasn't been merged in yet.

[andreiho]

@brandonroberts Oh right, I saw that at some point, just couldn't recall.

[petebacondarwin]

Hopefully @matsko will merge that today.

[nicl]

@brandonroberts @petebacondarwin thanks for the help and example project!
@andreiho I was experiencing this issue so good to know :)

[andreiho]

@nicl just for the record, until the fix for $routerOnActivate is merged in, you can also access the params by injecting $router in your controller and getting the params from $router._currentInstruction.component.params.

[brandonroberts]

@andreiho that only gives you the root router though. I'd stick to getting the params through the routerOnActivate hook

[andreiho]

It appears the PR was finally merged in, so I went ahead and built the router to fix the issue with lifecycle hooks not working with templateUrl.

Gist: https://gist.github.com/andreiho/abc94a492c5986678385

$router was renamed to $rootRouter, so remember to update all references.

[andreiho]

@petebacondarwin @brandonroberts is there currently a way to access the params inside the $canActivate hook? Does it even make sense, lifecycle-wise?

[petebacondarwin]

Since canActivate is invoked by the injector, the instructions are passed as "locals", which can also be injected...

function $canActivate($nextInstruction, $prevInstruction) {
  var nextParams = $nextInstruction.params;
}

See https://github.com/petebacondarwin/ng1-component-router-demo/blob/master/app/crisis-center.js#L28

(By the way, I think we ought to rename that hook to be $routerCanActvate inline with the other hooks.)

[andreiho]

@petebacondarwin Thanks, didn't think of that.

(And I agree it would be a good idea to rename the hook. That's actually what I tried initially and couldn't figure out why it wasn't working, so I had to go in the source file and find how it was named)

[zakdances]

Is $canActivate supposed to be usable as a component option? Because it never gets fired here:

angular.module('myApp').component('app', {
        template: '<ng-outlet></ng-outlet>',
        $routeConfig: [
          { path: '/', component: 'home', name: 'Home' } // works fine
        ],
        $canActivate: function($nextInstruction, $prevInstruction) {
            console.log('I never fire. :-( ')
        },
        controller: function() {

        }
    })

EDIT My mistake, I guess you can't put $canActivate into the the same component which is defining your $routeConfig. I moved $canActivate into one of my child components and now it's apparently working.

[petebacondarwin]

Yes the $canActivate must currently appear on the component being activated.
There is some discussion about all this at the moment and is subject to change: it is likely that we will make it so that the parent component/router is responsible for deciding whether a child route can activate.

[diegohaz]

Is ng-link-active class actually working? If so, how it works?

[brandonroberts]

@diegohaz yes, its working. The ng-link-active class is added when the current route matches the route provided in the ng-link.

[petebacondarwin]

But it has not yet been released in version 0.2.0 of the router

[diegohaz]

@brandonroberts @petebacondarwin I see. Thank you. By the way, where can I post issues about the ngComponentRouter for Angular 1.x? I want to know if it has support for states/sibling views.

[brandonroberts]

@diegohaz you should file those here: https://github.com/angular/angular

[petebacondarwin]

Actually for Angular 1.x you can start posting in https://github.com/angular/router
I am rebooting that as the holding place for the Angular 1 Component Router.
(Still a WIP but should be the place to go by the end of the month)

[geroyche]

so with the recent changed to angular2's gulp file, gulp buildRouter.dev doesn't work anymore.
what's the offically recommended way right now to get the component router working in angularjs 1?

[petebacondarwin]

@geroyche there is currently no recommended way as the router that we did have is no longer compatible with the latest router for Angular 2, and the old router has outstanding bugs that will not be resolved.
We plan to port the latest router to Angular 1 over the summer but there are technical hurdles to overcome around bundling, DI, Zones and Observables.

[geroyche]

that's a bit disappointing to hear, since it was communicated as a best-practice approach to use the component router in angular1.5 projects in order to ease a future migration to angular2 (we already switched from "angular-new-router" to the "angular1_router" backport).
guess we'll have to wait and see.

[petebacondarwin]

I am sorry and I understand your disappointment. We are working hard to get this fixed for you but we have limited resources and are being pulled in lots of directions. If there are people in the community who want to get involved in working out how to port the router (and the http library) then I would love to get in touch with them.

[christopherthielen]

Also worth noting that ui-router supports both ng1 and ng2, as well as hybrid ng1/ng2 apps

[geroyche]

true. we specifically chose not to add another dependency, ui-router, based on the notion that the new angular router(s by now) would fix the shortcomings that led to ui-router's existence in the first place.

but yes, maybe we should reconsider.

[kaflan]

npm install "@angular/router": "^0.2.0" -D
import Route from '@angular/router/angular1/angular_1_router';