3

How to integrate ui-router in angular 4. Given example doesn't seems to be working with latest version (https://ui-router.github.io/ng2/)

package.json

"dependencies": { "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/router": "^4.0.0", "core-js": "^2.4.1", "rxjs": "^5.1.0", "ui-router-ng2": "^1.0.0-beta.1", "zone.js": "^0.8.4" } 

app-routing.module.ts

import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router' import { DashboardComponent } from './components/dashboard/dashboard.component'; import { UsersComponent } from './components/users/users.component'; /** Routing with ui-router */ import { UIRouter } from "ui-router-ng2"; let helloState = { name: 'dashboard', url: '/dashboard', component: DashboardComponent }; let aboutState = { name: 'users', url: '/users', component: UsersComponent }; @NgModule({ imports: [ UIRouter.forRoot({ states: [helloState, aboutState] }) ], exports: [ RouterModule ] }) export class AppRoutingModule { } 

There is also an error on 'UIRouter.forRoot' (property forRoot doesn't exist). Any help or example?

2 Answers 2

4

As of "@uirouter/angular": "^1.0.0-beta.6",

You need to import UIRouterModule, which contains forRoot()

import { UIRouterModule } from "@uirouter/angular"; 

Here is an official demo application that shows the integration https://ui-router.github.io/ng2/tutorial/helloworld

Sign up to request clarification or add additional context in comments.

Comments

-1

i think you are missing something, i have work fine,below is my app.routes.ts

import {Routes, RouterModule} from '@angular/router'; import {HomeComponent} from './home/home.component'; const routes: Routes = [ { path: '', component: your component..., }, { path: 'home', component: HomeComponent, children: [ {path: '', redirectTo: 'dashboard', pathMatch: 'full'}, ] }, ]; export const appRoutes = RouterModule.forRoot(routes, {useHash: true}); 

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.