Issue 1:
I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

this is to reopen #12410.

Current behavior

With the following routes:

[{
path: 'root',
canActivateChild: [RootGuard],
children: [{
path: 'branch',
canActivateChild: [BranchGuard],
children: [{
path: 'leaf', component: LeafCmp
}]
}]
}]

when navigating to /root/branch/leaf, RootGuard will run twice.

With more levels of nested routes, it's repeating more times. Generally, canActivateChild will run repeatedly for each level of children.

Expected behavior

canActivateChild guard should only run once for a navigation.

Minimal reproduction of the problem with instructions

http://plnkr.co/edit/1Qs4vFxKOGAedNYagFwq?p=preview

What is the motivation / use case for changing the behavior?

This is a bug with canActivateChild, and after walking through all test suites related, no found of cases to test this.

Update: for example, if firing XHR request in the canActivateChild guard, the requests may be repeated, that's apparently a perf issue.

Please tell us about your environment:

Angular version: 2.x/4.x

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

all

Language: [all | TypeScript X.X | ES6/7 | ES5]

all

Node (for AoT issues): node --version =

6.9.x

Issue 2:
I'm submitting a ... (check one with "x")

[x] bug report
[x] feature request

Current behavior

When using the new forms with rc2 binding a template reference variable to ngModel doesn't work as described in the new form proposal. The error I'm getting is:

EXCEPTION: Error: Uncaught (in promise): Template parse errors:
There is no directive with "exportAs" set to "ngModel" (" type="text" class="form-control"
formControlName="email" [(ngModel)]="admin.email" [ERROR ->]#email="ngModel">
<div *ngIf="loginForm.hasError('required', 'email') && email.touched" c"): LoginComponent@12:66
There is no directive with "exportAs" set to "ngModel" ("assword" class="form-control"
formControlName="password" [(ngModel)]="admin.password" [ERROR ->]#password="ngModel">
<div *ngIf="loginForm.hasError('required', 'password') && password.t"): LoginComponent@19:70

Expected/desired behavior

It should be possible to bind a template reference variable to ngModel to check if a field is valid, touched, pristine, etc. Like so:

<input [(ngModel)]="person.name.first" #first="ngModel">
<input [(ngModel)]="person.name.last">
{{ first.valid }} // true

Reproduction of the problem

Trying to bind ngModel to a template reference variable.

What is the motivation / use case for changing the behavior?

To show custom error messages, like so:

<input type="text" class="form-control"
formControlName="email" [(ngModel)]="admin.email" name="email" #email="ngModel">
<div *ngIf="loginForm.hasError('required', 'email') && email.touched" class="alert alert-danger">Email is required</div>
<div *ngIf="loginForm.hasError('pattern', 'email') && email.touched" class="alert alert-danger">Not a valid email address</div>

Please tell us about your environment:

Angular version: 2.0.0-rc.2

Browser: [all]

Language: [TypeScript 1.8.10 | ES5]