Error: Unable to find the main outlet for downloading "ProfileDetailsComponent"

Question

I am trying to use routing in my application using a router version 3.0.0-beta.1, the application works, but when I click the "next" button in subject.component.html, I look forward to the contents of 'profileDetails.component.html'. I created plunkr, for example. here: http://plnkr.co/edit/jR3jnC6CzmRVCoVFrn1W?p=preview This doesn’t work on plunkr, although due to the angular 2 buttons of the material etc. that I use, I think, but can someone say me where am I going wrong? Here is my 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 ]); 

Here 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) ]; 

Here is my 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] }) 

The stream is similar to this app.component.ts-> basicCard.component.ts-> basicCard.component.html-> themes.component.ts-> themes.component.html-> profileDetails.component.ts- → profileDetails.component. html

Answer 1

In your app.component you are missing a router exit directive.

 @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