<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>

<p dir="auto">When a redirect is before the thing redirects to it crashes the browser without an error message<br>
<strong>Expected behavior</strong></p>

<p dir="auto">It is ok if it doesn't work, but it should produce an error.<br>
<strong>Minimal reproduction of the problem with instructions</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { NgModule } from '@angular/core';
import { Routes, RouterModule  } from '@angular/router';

import { PageNotFoundComponent } from './not-found.component';
import { LoginComponent } from './login/login.component';
import { UserProfileComponent } from './user-profile/user-profile.component';


const appRoutes: Routes = [
  {
    path: '',
    redirectTo: '/products', pathMatch: 'full'
  },
  {
    path: 'products',
    loadChildren: 'app/products/products.module#ProductsModule'
  },
  {
    path: 'admin',
    loadChildren: 'app/admin/admin.module#AdminModule'
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'profile',
    component: UserProfileComponent
  },
  { path: '404', component: PageNotFoundComponent },
  { path: '**', component: PageNotFoundComponent }
];


@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }"><pre class="notranslate"><code class="notranslate">import { NgModule } from '@angular/core';
import { Routes, RouterModule  } from '@angular/router';

import { PageNotFoundComponent } from './not-found.component';
import { LoginComponent } from './login/login.component';
import { UserProfileComponent } from './user-profile/user-profile.component';


const appRoutes: Routes = [
  {
    path: '',
    redirectTo: '/products', pathMatch: 'full'
  },
  {
    path: 'products',
    loadChildren: 'app/products/products.module#ProductsModule'
  },
  {
    path: 'admin',
    loadChildren: 'app/admin/admin.module#AdminModule'
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'profile',
    component: UserProfileComponent
  },
  { path: '404', component: PageNotFoundComponent },
  { path: '**', component: PageNotFoundComponent }
];


@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }
</code></pre></div>

<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<p dir="auto">Mac OSX 10.12.3<br>
Angular cli running localhost:4200<br>
Atom editor</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.X</li>
</ul>

<p dir="auto">angular-cli: 1.0.0-beta.25.5<br>
node: 6.9.5<br>
os: darwin x64<br>
@angular/common: 2.4.7<br>
@angular/compiler: 2.4.7<br>
@angular/core: 2.4.7<br>
@angular/forms: 2.4.7<br>
@angular/http: 2.4.7<br>
@angular/material: 2.0.0-beta.1<br>
@angular/platform-browser: 2.4.7<br>
@angular/platform-browser-dynamic: 2.4.7<br>
@angular/router: 3.4.7<br>
@angular/compiler-cli: 2.4.7</p>
<ul dir="auto">
<li><strong>Browser:</strong> [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 ]</li>
</ul>

<p dir="auto">Chrome Version 56.0.2924.87 (64-bit)</p>
<ul dir="auto">
<li><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
TS</li>
<li><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =<br>
6.9.5</li>
</ul>
<p dir="auto">Moving the  redirectTo: '/products' towards the bottom fixes this problem.  Which is fine, but doing it wrong should not crash the browser.</p>
<p dir="auto">I've been digging into Angular 2 and have run into a potential road block for extending certain kinds of components.</p>
<p dir="auto">In the the following example, I have a button component, and a directive that will apply styles based on touch events. There will be many other objects other than just the button that will inherit the exact same touch behavior. I've explored my options, and I'm at a loss:</p>
<ul dir="auto">
<li>Directly extend a TouchClass. This seems less than ideal since typescript doesn't support multiple class inheritance, and I'd also like to expose the behavior to consumers for use in their own classes.</li>
<li>Fake multiple class inheritance through an interface. This seems like a hack and requires me to redeclare a shim api on every class I'm trying to mix into. <a href="https://www.stevefenton.co.uk/2014/02/TypeScript-Mixins-Part-One/" rel="nofollow">https://www.stevefenton.co.uk/2014/02/TypeScript-Mixins-Part-One/</a></li>
<li>Create a helper function that does it through a service directly on elementRef.nativeElement in the component constructor. I really don't want to do this since it states in the docs that nativeElement will be null when running in a worker, and that capability is something I'm the most excited about.</li>
</ul>
<p dir="auto">Without getting too deep into the guts, I'd presume that the componentMetadata is available during the components compile time, and that the host property could be scanned for additional directives that could be added dynamically and compiled at the same time. This would allow you to do mixins the angular way: using composable directives to extend functionality, and doing it without breaking view projection. Short example below.</p>
<p dir="auto"><strong>Current behavior</strong><br>
Declaring a directive in componentMetadata.host treats it as a regular attribute</p>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
The directive declared in host would be processed at compile time.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/**
 * App
 */
@Component({
    selector: 'app-component',
    template: '&lt;g-btn&gt;TEST&lt;/g-btn&gt;',
    directives: [gBtn, gTouch]
})

export class AppComponent {
    constructor() {

    }
}

/**
 * Touch Directive
 * Will be used in lots and lots of components
 */
@Directive({
    selector: '[g-touch]',
    host: { 
        '(touchstart)': '...',
        '(touchend)': '...',
        '(touchmove)': '...',
        '(touchcancel)': '...'
    }
})

export class gTouch {
    constructor() {

    }
}

/**
 * Simple button component
 */
@Component({
    selector: 'g-btn',
    template: '&lt;ng-content&gt;&lt;/ng-content&gt;',
    host: {
        'role': 'button',
        // WOULD LOVE FOR THIS TO COMPILE THE DIRECTIVE!
        // right now it just adds an attribute called g-touch
        'g-touch': ' ' 
    }
})

export class gBtn {

    constructor() {

    }
}"><pre class="notranslate"><span class="pl-c">/**</span>
<span class="pl-c"> * App</span>
<span class="pl-c"> */</span>
@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">'app-component'</span><span class="pl-kos">,</span>
    <span class="pl-c1">template</span>: <span class="pl-s">'&lt;g-btn&gt;TEST&lt;/g-btn&gt;'</span><span class="pl-kos">,</span>
    <span class="pl-c1">directives</span>: <span class="pl-kos">[</span><span class="pl-s1">gBtn</span><span class="pl-kos">,</span> <span class="pl-s1">gTouch</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>

<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">AppComponent</span> <span class="pl-kos">{</span>
    <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

    <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-c">/**</span>
<span class="pl-c"> * Touch Directive</span>
<span class="pl-c"> * Will be used in lots and lots of components</span>
<span class="pl-c"> */</span>
@<span class="pl-smi">Directive</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">'[g-touch]'</span><span class="pl-kos">,</span>
    <span class="pl-c1">host</span>: <span class="pl-kos">{</span> 
        <span class="pl-s">'(touchstart)'</span>: <span class="pl-s">'...'</span><span class="pl-kos">,</span>
        <span class="pl-s">'(touchend)'</span>: <span class="pl-s">'...'</span><span class="pl-kos">,</span>
        <span class="pl-s">'(touchmove)'</span>: <span class="pl-s">'...'</span><span class="pl-kos">,</span>
        <span class="pl-s">'(touchcancel)'</span>: <span class="pl-s">'...'</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>

<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">gTouch</span> <span class="pl-kos">{</span>
    <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

    <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-c">/**</span>
<span class="pl-c"> * Simple button component</span>
<span class="pl-c"> */</span>
@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">'g-btn'</span><span class="pl-kos">,</span>
    <span class="pl-c1">template</span>: <span class="pl-s">'&lt;ng-content&gt;&lt;/ng-content&gt;'</span><span class="pl-kos">,</span>
    <span class="pl-c1">host</span>: <span class="pl-kos">{</span>
        <span class="pl-s">'role'</span>: <span class="pl-s">'button'</span><span class="pl-kos">,</span>
        <span class="pl-c">// WOULD LOVE FOR THIS TO COMPILE THE DIRECTIVE!</span>
        <span class="pl-c">// right now it just adds an attribute called g-touch</span>
        <span class="pl-s">'g-touch'</span>: <span class="pl-s">' '</span> 
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>

<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">gBtn</span> <span class="pl-kos">{</span>

    <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

    <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Some ideas of how this could work:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// Option 1: just scan the host properties for directives.
// This would be my ideal, simple and understandable
@Component({
    selector: 'g-btn',
    template: '&lt;ng-content&gt;&lt;/ng-content&gt;',
    host: {
        'role': 'button',
        'g-touch': true // or {prop: 'foo'} or string
    }
})

// Option 2: definitely more declarative using a hostDirectives property
// more declarative, albeit more annoying to have to reimport the touch class
@Component({
    selector: 'g-btn',
    template: '&lt;ng-content&gt;&lt;/ng-content&gt;',
    hostDirectives: gTouch,
    host: {
        'role': 'button',
        'g-touch': true
    }
})

// Option 3: declare host directives as its own thing, still just
// use keys pointing to bool, obj, or string
@Component({
    selector: 'g-btn',
    template: '&lt;ng-content&gt;&lt;/ng-content&gt;',
    hostDirectives: {
        'g-touch': {someOption: someOption}
    },
    host: {
        'role': 'button',
    }
});

// Option 4: Not a huge fan of this one, but understandable if
// people want to keep one host property
@Component({
    selector: 'g-btn',
    template: '&lt;ng-content&gt;&lt;/ng-content&gt;',
    host: {
        'role': 'button',
        _directives: {
            'g-touch': true
        }
    }
});"><pre class="notranslate"><span class="pl-c">// Option 1: just scan the host properties for directives.</span>
<span class="pl-c">// This would be my ideal, simple and understandable</span>
@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">'g-btn'</span><span class="pl-kos">,</span>
    <span class="pl-c1">template</span>: <span class="pl-s">'&lt;ng-content&gt;&lt;/ng-content&gt;'</span><span class="pl-kos">,</span>
    <span class="pl-c1">host</span>: <span class="pl-kos">{</span>
        <span class="pl-s">'role'</span>: <span class="pl-s">'button'</span><span class="pl-kos">,</span>
        <span class="pl-s">'g-touch'</span>: <span class="pl-c1">true</span> <span class="pl-c">// or {prop: 'foo'} or string</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>

<span class="pl-c">// Option 2: definitely more declarative using a hostDirectives property</span>
<span class="pl-c">// more declarative, albeit more annoying to have to reimport the touch class</span>
@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">'g-btn'</span><span class="pl-kos">,</span>
    <span class="pl-c1">template</span>: <span class="pl-s">'&lt;ng-content&gt;&lt;/ng-content&gt;'</span><span class="pl-kos">,</span>
    <span class="pl-c1">hostDirectives</span>: <span class="pl-s1">gTouch</span><span class="pl-kos">,</span>
    <span class="pl-c1">host</span>: <span class="pl-kos">{</span>
        <span class="pl-s">'role'</span>: <span class="pl-s">'button'</span><span class="pl-kos">,</span>
        <span class="pl-s">'g-touch'</span>: <span class="pl-c1">true</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>

<span class="pl-c">// Option 3: declare host directives as its own thing, still just</span>
<span class="pl-c">// use keys pointing to bool, obj, or string</span>
@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">'g-btn'</span><span class="pl-kos">,</span>
    <span class="pl-c1">template</span>: <span class="pl-s">'&lt;ng-content&gt;&lt;/ng-content&gt;'</span><span class="pl-kos">,</span>
    <span class="pl-c1">hostDirectives</span>: <span class="pl-kos">{</span>
        <span class="pl-s">'g-touch'</span>: <span class="pl-kos">{</span><span class="pl-c1">someOption</span>: <span class="pl-s1">someOption</span><span class="pl-kos">}</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c1">host</span>: <span class="pl-kos">{</span>
        <span class="pl-s">'role'</span>: <span class="pl-s">'button'</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// Option 4: Not a huge fan of this one, but understandable if</span>
<span class="pl-c">// people want to keep one host property</span>
@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">'g-btn'</span><span class="pl-kos">,</span>
    <span class="pl-c1">template</span>: <span class="pl-s">'&lt;ng-content&gt;&lt;/ng-content&gt;'</span><span class="pl-kos">,</span>
    <span class="pl-c1">host</span>: <span class="pl-kos">{</span>
        <span class="pl-s">'role'</span>: <span class="pl-s">'button'</span><span class="pl-kos">,</span>
        <span class="pl-c1">_directives</span>: <span class="pl-kos">{</span>
            <span class="pl-s">'g-touch'</span>: <span class="pl-c1">true</span>
        <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Thanks everyone, Angular 2 is looking great!. Let me know if theres something I'm missing.</p>