Error: Cannot find primary outlet to load 'ProfileDetailsComponent'

Question

I am trying to use routing in my application, using router version 3.0.0-beta.1, the application is running but when I click the 'next' button in subjects.component.html I am looking forward to getting the content of 'profileDetails.component.html'. I've created a plunkr eg. here : http://plnkr.co/edit/jR3jnC6CzmRVCoVFrn1W?p=preview It doesn't work on plunkr though due to the angular 2 material buttons etc that I'm using I guess, but can anyone tell me where am I going wrong? Here's 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's 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's 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 flow is somewhat like this app.component.ts->basicCard.component.ts->basicCard.component.html->subjects.component.ts->subjects.component.html->profileDetails.component.ts->profileDetails.component.html

[Angular2 Router error: cannot find primary outlet to load 'HomePage'](http://stackoverflow.com/questions/37950413/angular2-router-error-cannot-find-primary-outlet-to-load-homepage/37951430#37951430) — KB_, Jul 16 '16 at 12:31
Possible duplicate of [Angular2 Router error: cannot find primary outlet to load 'HomePage'](https://stackoverflow.com/questions/37950413/angular2-router-error-cannot-find-primary-outlet-to-load-homepage) — ishandutta2007, Aug 07 '17 at 12:11

KB_ · Accepted Answer · 2016-07-16T10:18:53.387

10

In your app.component you are missing the router outlet 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

edited Jul 16 '16 at 10:18

answered Jul 16 '16 at 09:30

KB_

2,113
2
26
28

But I've added template: in app.component.ts & in basicCard.component.html, I've provided the plunkr link in the question... – Himanshi Gupta Jul 16 '16 at 09:43
2

the problem there is that router outlet is in an ngIf. – KB_ Jul 16 '16 at 10:02
@HimanshiGupta, you still need to provide a router-outlet at the top-level component. This is the "primary outlet" that Angular is complaining about not finding. – jessepinho Jul 16 '16 at 10:03
But I want the profile component to come only when the 'next' button in basicCard.html is clicked...what should I use then instead of ngIf..? – Himanshi Gupta Jul 16 '16 at 10:06
@jessepinho I tried what you suggested & have added app.component.ts in my question, now I am getting : Potentially unhandled rejection [2] Error: Cannot match any routes: at Observable.eval [as _subscribe] – Himanshi Gupta Jul 16 '16 at 10:37
You may need a base route: ` { path: '', component: Component },` A working plunker is in my answer. I did cut out all the missing files. – KB_ Jul 16 '16 at 10:45
@JS_astronauts Thanks a lot!! It's working exactly the way I wanted, you saved my day :D – Himanshi Gupta Jul 16 '16 at 10:50
My outlet was inside of an ngIf. Moving it out worked. Thx @JS_astronauts! – hogan Dec 30 '16 at 05:28

Error: Cannot find primary outlet to load 'ProfileDetailsComponent'

1 Answers1