Errore: impossibile trovare l'uscita principale per caricare 'ProfileDetailsComponent'

Question

Sto provando a utilizzare il routing nella mia applicazione, utilizzando la versione 3.0.0-beta.1 del router, l'applicazione è in esecuzione ma quando clicco il pulsante 'successivo' nei soggetti .component.html Non vedo l'ora di ottenere il contenuto di "profileDetails.component.html". Ho creato un plunkr ad es. qui: http://plnkr.co/edit/jR3jnC6CzmRVCoVFrn1W?p=preview Non funziona su plunkr anche se a causa dei pulsanti angolari di materiale 2 ecc. che sto usando credo, ma qualcuno può dirmi dove sto andando male? Ecco il mio main.ts:

import {bootstrap} from '@angular/platform-browser-dynamic'; 
import {enableProdMode} from '@angular/core'; 
import {AppComponent} from './app/app.component'; 
import {HTTP_PROVIDERS} from '@angular/http'; 
import { appRouterProviders } from './app/app.routes'; 

//import {disableDeprecatedForms, provideForms} from '@angular/forms'; 

bootstrap(AppComponent, [ 
    // disableDeprecatedForms(), 
    // provideForms(), 
    HTTP_PROVIDERS, 
    appRouterProviders 
]); 

Ecco app.routes.ts:

import { provideRouter, RouterConfig } from '@angular/router'; 
import {SubjectsComponent} from './subjects.component'; 
import {ProfileDetailsComponent} from './profileDetails.component'; 
import {AgreementComponent} from './agreement.component'; 

export const routes: RouterConfig = [ 
    { path: 'card', component: BasicCardComponent }, 
    { path: 'subjects', component: SubjectsComponent }, 
    { path: 'profile', component: ProfileDetailsComponent }, 
    { path: 'agreement', component: AgreementComponent } 
]; 

export const appRouterProviders = [ 
    provideRouter(routes) 
]; 

Ecco il mio app.component.ts:

@Component({ 
    selector: 'my-app', 
    template: ` 
    <a [routerLink]="['/card']"></a> 
    <router-outlet></router-outlet> 
    ` , 
// templateUrl: 'app/app.component.html', 
    styleUrls: ['app/app.component.css'], 
    directives: [BasicCardComponent, MdButton,MdCard,MdToolbar,MdIcon,MdInput,MD_INPUT_DIRECTIVES,MdCheckbox,ROUTER_DIRECTIVES], 
    providers:[MdIconRegistry] 
}) 

il flusso è un po 'come questo app .component.ts-> basicCard.component.ts-> basicCard.component.html-> subject.component.ts-> subject.component.html-> profileDetails.component.ts-> profileDetails.component.html

Answer 1

Nella vostra app.component manca la direttiva router outlet.

@Component({ 
    selector: 'my-app', 

          // you can do somthing like this 
    template: `<card></card> 
      <router-outlet></router-outlet> `, 
    styles: .... 
    directives: [ROUTER_DIRECTIVES] 
}) 
export class AppComponent { 

} 

plunker