Angular2 Router Error: Unable to find the main exit to download "HomePage"

Question

I just started using the new routing library (@ angular / router v3.0.0-alpha.7), but after the official docs it leads to the error below:

browser_adapter.ts:74: EXCEPTION: Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'HomePage' 

Question: how can I get rid of the error and make the router behave as expected? Did I skip the setup?

(A similar error appears when using version alpha.6.)

app.component.ts

 import { Component } from '@angular/core'; import { ROUTER_DIRECTIVES } from '@angular/router'; @Component({ selector: 'app', template: ` <p>Angular 2 is running...</p> <!-- Routed views go here --> <router-outlet></router-outlet> `, providers: [ROUTER_DIRECTIVES] }) export class AppComponent { } 

app.routes.ts

 import { provideRouter, RouterConfig } from '@angular/router'; import { HomePage } from './pages/home/home'; export const routes: RouterConfig = [ { path: '', component: HomePage } ]; export const APP_ROUTER_PROVIDERS = [ provideRouter(routes) ]; 

home.ts

 import { Component } from '@angular/core'; @Component({ template: '<h1>Home Page</h1>' }) export class HomePage { } 

main.ts

 /* Avoid: 'error TS2304: Cannot find name <type>' during compilation */ ///<reference path="../../typings/index.d.ts" /> import { bootstrap } from "@angular/platform-browser-dynamic"; import { APP_ROUTER_PROVIDERS } from './app.routes'; import { AppComponent } from "./app.component"; bootstrap(AppComponent, [ APP_ROUTER_PROVIDERS, ]).catch(err => console.error(err)); 

Answer 1

You have a bug in app.component.ts Looks like you specified the directive in the providers array.

 import { Component } from '@angular/core'; import { ROUTER_DIRECTIVES } from '@angular/router'; @Component({ selector: 'app', template: ` <p>Angular 2 is running...</p> <!-- Routed views go here --> <router-outlet></router-outlet> `, directives: [ROUTER_DIRECTIVES] //here }) export class AppComponent { } 

Answer 2

Although @JS_astronauts already provided a solution, I think it would be instructive to explain the error ...

The main output is set when Angular parses the HTML template and finds the RouterOutlet directive , i.e. when it finds the RouterOutlet selector: <router-outlet></router-outlet> .

Although your template contains <router-outlet></router-outlet> , your component does not contain directives: [ROUTER_DIRECTIVES] , so Angular will not look for any of the directives defined by this constant:

 export const ROUTER_DIRECTIVES = [RouterOutlet, RouterLink, RouterLinkWithHref, RouterLinkActive]; 

Therefore, when Angular parses AppComponent HTML templates, if it does not recognize <router-outlet></router-outlet> , so it just ignores it. Later, when Angular tries to display the default route component (HomePage), it complains because it does not know where to put it.

---

This error may also occur if you have a typo in the element selector, for example:

 <roter-outlet></roter-outlet> 

In this case, even if your directives array is set correctly, Angular will never find the required <router-outlet> element.

Answer 3

It should be directives metadata instead of providers ,

 directives: [ROUTER_DIRECTIVES]