CODEWITHSUNDEEP
angularangular-ui-router
Shafaq Kazmi
Shafaq Kazmi

Reputation: 225

Angular 4 - UI-Router

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?

Upvotes: 3

Views: 4673

Answers (2)

chandrakant
chandrakant

Reputation: 370

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});

Upvotes: -1

David Chelliah
David Chelliah

Reputation: 1349

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

Upvotes: 4

Related Questions