I am currently in the process of working on a project involving Angular2. If you are interested in understanding why I need to do what I am about to explain, please take a look at this issue.
The main component in my project is called AppComponent and it is bootstrapped using bootstrap. It is a simple component with the following structure:
@Component({
selector: 'app-view',
directives: [ Devtools, MainComponent ],
template: `
<ngrx-devtools></ngrx-devtools>
<main-cmp></main-cmp>
`
})
export class AppComponent { }
Within this component, there is another component called MainComponent (accessed via the main-cmp selector) where I want to configure my routing for specific reasons.
Below is the code implementation:
@Component({
selector: 'main-cmp',
directives: [ ROUTER_DIRECTIVES, NavComponent ],
template: `
<h1>App</h1>
<nav-cmp></nav-cmp>
<router-outlet></router-outlet>
`
})
@RouteConfig([
{ path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true },
{ path: '/medias', name: 'Medias', component: MediasComponent }
])
export class MainComponent {
constructor (private router:Router, private store:Store<AppStore>) {
router.subscribe(url => store.dispatch(changeUrl(url)));
}
}
Additionally, MainComponent also incorporates NavComponent, which functions as a basic navigation component.
Despite the setup described above, an issue arises stating:
EXCEPTION: Component "AppComponent" has no route config. in [['Home'] in NavComponent@2:15]However, when I move my routing logic to AppComponent, everything works perfectly fine.
Therefore, my query is: is there a way to implement routing functionality in a component other than the one being bootstrapped?
Thank you :).