Dealing with nested router

[Rafi993]

I am having issue dealing with nested routes.

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import homeComponent from './home.component';
import data from './data';

let homeModule = angular.module('home', [
  uiRouter,
  data
])

.config(($stateProvider, $urlRouterProvider) => {
  "ngInject";

  $stateProvider
    .state('home', {
      url: '/home',
      component: 'home'
    });
})

.component('home', homeComponent)

.name;

export default homeModule;

this is my data.js

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import dataComponent from './data.component';

let productModule = angular.module('data', [
  uiRouter
])

.config(($stateProvider, $urlRouterProvider) => {
  "ngInject";

  $stateProvider
    .state('home.data', {
      url: '/home/data',
      component: 'data'
    });
})

.component('data', dataComponent)

.name;

export default dataModule;

the route /home/data is not working and I have added <div ui-view></div> inside home.html

[Rafi993]

It worked when I used /data instead of /home/data sorry for the fuss