Error: Cannot find primary outlet to load 'ProfileDetailsComponent'
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 {
}
Himanshi Gupta
Updated on July 12, 2022Comments
-
Himanshi Gupta almost 2 years
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
-
Himanshi Gupta almost 8 yearsBut I've added template:<card></card> in app.component.ts & <router-outlet></router-outlet> in basicCard.component.html, I've provided the plunkr link in the question...
-
KB_ almost 8 yearsthe problem there is that router outlet is in an ngIf.
-
jessepinho almost 8 years@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.
-
Himanshi Gupta almost 8 yearsBut 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 almost 8 years@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]
-
KB_ almost 8 yearsYou may need a base route: ` { path: '', component: Component },` A working plunker is in my answer. I did cut out all the missing files.
-
Himanshi Gupta almost 8 years@JS_astronauts Thanks a lot!! It's working exactly the way I wanted, you saved my day :D
-
hogan over 7 yearsMy outlet was inside of an ngIf. Moving it out worked. Thx @JS_astronauts!