I'm having trouble loading route data from a service and automatically creating routes in Angular 2 RC Final. I've been trying to assign route data using the Router.Module.forRoot() function, but I can't figure out how to assign fetched data to it. The code snippet below doesn't work for me and shows an error saying "Property 'forRoot' does not exist on type 'RouterModule'."
Although my approach may be incorrect, the code gives an idea of what I want to achieve. The paths for my app are as follows: mysite.com/london/ mysite.com/new-york/, etc. Is there a way to accomplish this?
The version of the router I am utilizing is: "@angular/router": "~3.0.1"
app.module.ts:
import { NgModule, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { PathService } from './path.service';
import { Path } from './path';
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule
],
declarations: [
AppComponent
],
providers: [
PathService
],
bootstrap: [AppComponent]
})
export class AppModule implements OnInit {
private ROUTES: Array<Object>;
private paths: Path[];
constructor(
@Inject(RouterModule) private _routerModule: RouterModule,
@Inject(PathService) private _pathService: PathService) {}
ngOnInit() {
this.getPathData();
}
getPathData() {
this._pathService.getPaths().subscribe((paths: Path[]) => this.paths = paths, (err: any) => { }, () => this.generateRoutes());
}
generateRoutes() {
this.ROUTES = 'do something with these.paths and set the route data here';
this._routerModule.forRoot(this.ROUTES);
}
}
JSON:
[
{
id: "1",
name: "London",
path: "london"
},
{
id: "2",
name: "New York",
path: "new-york"
},
{
id: "3",
name: "Paris",
path: "paris"
},
{
id: "4",
name: "Tokyo",
path: "tokyo"
}
]