Angular 2 routing without navbar

Question

Every topic on Angular2 routing has a fixed navbar

<nav>
    <a [routerLink]="['/component-one']">Component One</a>
    <a [routerLink]="['/component-two']">Component Two</a>
</nav>
<router-outlet></router-outlet>

So basically when clicked on the link to Component One, this Component will be rendered underneath the <nav></nav>

What I need is when you click on Component One, the full view (full page) changes to the view of Component One (thus without the <nav></nav>)

I tried putting the <router-outlet> in a seperate @Component

// view.component.ts    
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'view',
    template:`<router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES]
})

export class ViewComponent {

}

and then

// home.component.ts
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'home',
    template: `
        <nav>
            <a [routerLink]="['/component-one']">Component One</a>
            <a [routerLink]="['/component-two']">Component Two</a>
        </nav>
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})

export class HomeComponent {

}

the App component looks like this:

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { HomeComponent } from './containers/home.component';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  template: `
  <h1>{{title}}</h1>
  <view></view>
  <home></home>
  `,
  styleUrls: ['app.component.css'],
  directives:  [HomeComponent, ROUTER_DIRECTIVES]
})
export class AppComponent {
  title = 'app works';
}

also tried putting <home> inside <view> but nothing

Always getting the same error:

Error: Cannot find primary outlet to load 'OneComponent'

Anyone that can help me with this? Thx!

edit

// app.routes.ts
import { provideRouter, RouterConfig } from '@angular/router';

import { ViewComponent } from './containers/view.component';
import { HomeComponent } from './containers/home.component';
import { OneComponent } from './containers/one.component';
import { TwoComponent } from './containers/two.component';

const routes: RouterConfig = [
    {
        path: '',
        redirectTo: '',
        pathMatch: 'full'
    },
    { 
        path: '', 
        component: HomeComponent, 
    },
    { 
        path: 'one', 
        component: OneComponent 
    },
    { 
        path: 'two', 
        component: TwoComponent 
    }
];

export const appRouterProviders = [
    provideRouter(routes)
];

Can you paste your router config ? – MatWaligora Aug 10 '16 at 09:30 — MatWaligora, Aug 10 '16 at 09:30

score 0 · Answer 1 · answered Aug 10 '16 at 09:34

Move your routing to own component

<nav>
    <a [routerLink]="['/component-one']">Component One</a>
    <a [routerLink]="['/component-two']">Component Two</a>
</nav>

and inject them on the component you want to have them and when you route to that component you will see nav and when you go to another component they will be removed from there .

everything above or under this <router-outlet></router-outlet> will be available in every page

score 0 · Answer 2 · answered Aug 10 '16 at 10:01

You have wrong paths in your routerLinks:

<nav>
  <a [routerLink]="['/component-one']">Component One</a>
  <a [routerLink]="['/component-two']">Component Two</a>
</nav>

compared to your router config paths

 { 
    path: 'one', 
    component: OneComponent 
},
{ 
    path: 'two', 
    component: TwoComponent 
}

fix them to:

<nav>
  <a [routerLink]="['/one']">Component One</a>
  <a [routerLink]="['/two']">Component Two</a>
</nav>

Sfen · Answer 3 · 2016-08-10T10:56:45.977

Thx for the quick responses guys... you both pointed me in the right direction.

Solution:

The main component just needs another component to render the views (<view></view>)

// app.component.ts
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { ViewComponent } from './containers/view.component';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  template: `
  <h1>
    {{title}}
  </h1>
  <view></view>
  `,
  directives:  [ViewComponent, ROUTER_DIRECTIVES]
})
export class AppComponent {
  title = 'app works!';
}

The view component just contains the <router-outlet></router-outlet>

// view.component.ts
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'view',
    template:`<router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES]
})

export class ViewComponent {  
}

The routes have to be correct (oops)

// app.routes.ts
import { provideRouter, RouterConfig } from '@angular/router';

import { HomeComponent } from './containers/home.component';
import { OneComponent } from './containers/one.component';
import { TwoComponent } from './containers/two.component';

const routes: RouterConfig = [
    {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
    },
    { 
        path: 'home', 
        component: HomeComponent, 
    },
    { 
        path: 'one', 
        component: OneComponent 
    },
    { 
        path: 'two', 
        component: TwoComponent 
    }
];

export const appRouterProviders = [
    provideRouter(routes)
];

Then it's just building the views (pages)

// home.components.ts
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { NavigationComponent } from './navigation.component';

@Component({
    selector: 'home',
    template: `
        <div><h1>{{title}}</h1></div>
        <navigation></navigation>
    `,
    directives: [ROUTER_DIRECTIVES, NavigationComponent]
})

export class HomeComponent {
    title = 'This is home';
}

the navigation component used in HomeComponent:

// navigation.component.ts
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'navigation',
    template: `
        <nav>
            <a [routerLink]="['/one']">Comp one</a>
            <a [routerLink]="['/two']">Comp two</a>
        </nav>
    `,
    directives: [ROUTER_DIRECTIVES]
})

export class NavigationComponent {
}

and

// one.component.ts
import { Component } from '@angular/core';

import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'one',
    template: `
        <p>ONE: {{message}}</p>
        <a [routerLink]="['/two']">GOTO Comp two</a>
    `,
    directives: [ROUTER_DIRECTIVES]
})

export class OneComponent {
    message = 'ONE comp here';
}

and

// two.component.ts
import { Component } from '@angular/core';

import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'two',
    template: `
        <p>TWO: {{message}}</p>
        <a [routerLink]="['/one']">GOTO Comp one</a>
    `,
    directives: [ROUTER_DIRECTIVES]
})

export class TwoComponent {
    message = 'TWO here';
}

Angular 2 routing without navbar

3 Answers3