SubNavigation within Angular2

Question

I am trying to create an application that has 2 (potentially 3) levels of navigation. I am using @RouterConfig to create this navigation.

When I created the first level of navigation the application worked fine, so I went through the same process to create level 2 of the navigation.

The navigation format I want to create is as follows

mainApplication (sidebar navigation)

---select (tabs)
   ---by Collection
   ---by Category
   ---by Range

---Inspect (tabs)
   ---forecast
   ---inventory
   ---purchase

---Other
   ---sublevel
   ---sublevel
   ---sublevel
---Other
   ---sublevel
   ---sublevel
---Other

I am receiving the following error which I don't understand...

Child routes are not allowed for "/inspect". Use "..." on the parent's route path.

In this example I am focusing on the sub-Navigation within the Inspec component. Below is the code...

app.component.ts

import { Component,OnInit}  from 'angular2/core';
import { Routes, Router, ROUTER_DIRECTIVES ,ROUTE_PROVIDERS,RouteConfig} from 'angular2/router';


//ROUTER PAGES
import {ProjectSelect}          from 'app/project.select'
import {ProjectInspect}         from 'app/project.inspect'


@Component({
    selector        :  'my-app',
    templateUrl :  'app/app.component.html',
    styleUrls   : ['app/app.component.css']
    directives  : [
                                        ROUTER_DIRECTIVES,
                                        ProjectSelect,
                                        ProjectInspect
        ]
})

@RouteConfig([
    {path: '/select',   name:'Select',  component: ProjectSelect, useAsDefault: true},
    {path: '/inspect',  name:'Inspect', component: ProjectInspect},
])


export class AppComponent implements OnInit {

    applicationTitle:String = "Slim 4 Angular"

  constructor(private router: Router) {}

  ngOnInit() {
    this.router.navigate(['Select']);
  }
}

app.component.html


    
        {{applicationTitle}}
        
            Select
            Inspect
            Order
            Intelligence
            Demand
            Introduce
            Update
            Promote

project.inspect.ts

import { Component,OnInit}  from 'angular2/core';
import { Routes, Router, ROUTER_DIRECTIVES ,ROUTE_PROVIDERS,RouteConfig} from 'angular2/router';


//ROUTER PAGES
import {WorkbenchForecast}      from 'app/workbench.forecast'
import {WorkbenchInventory}     from 'app/workbench.inventory'
import {WorkbenchPurchase}      from 'app/workbench.purchase'



@Component({
    selector        :  'project-inspect',
    templateUrl     :  'app/project.inspect.html',
    styleUrls   : ['app/app.component.css']
    directives  : [
                                        ROUTER_DIRECTIVES,
                                        WorkbenchForecast,
                                        WorkbenchInventory,
                                        WorkbenchPurchase
        ]
})


@RouteConfig([
    {path: './forecast',    name:'Forecast',    component: WorkbenchForecast, useAsDefault: true},
    {path: './inventory', name:'Inventory', component: WorkbenchInventory},
    {path: './purchase',    name:'Purchase',    component: WorkbenchPurchase},
])


export class ProjectInspect implements OnInit {

    projectTitle:String = "Inspect"

  constructor(private router: Router) {}

  ngOnInit() {
    this.router.navigate(['Forecast']);
  }
}

project.inspect.html


  
      Forecast
      Inventory
      Purchase

I'm not sure if two levels of navigation can be achieved in Angular2 but I hope it can. If anyone can help me with the correct implementation I would be grateful.

SubNavigation within Angular2

Answers (1)

Related Questions