AngularJs Ui-Router adding new states to the existing app.config

Question

I'm currently working on a very large scale application that involves many routes for the many different components the application has. My team and I have decided to try and separate out the different routes into their own file, rather than having a very large routes file.

I have poked around trying to create a variable and importing into my app.js file and passing my created route object to a new state.

I keep running into errors when I try to import a file in my app.js file.

I want to know if there is a way to pass state objects from different files into the main app.config ?

Here is my App.js file that works with a statically defined state

    let app = angular.module('ordyxApp', ['ui.router']);



app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'pages/login.html'
        })
        .state(system)
}); 

This is what I'm trying to achieve

pages/clockIn/clockInRoute.js

export  let  ClockIn =  {
    url: '/clockIn',
    templateUrl: 'pages/clockIn/clockIn.html'
};

Then my app.js file would look similar to something like this

 let app = angular.module('ordyxApp', ['ui.router']);

import {ClockIn} from "./pages/clockIn/clockIn.route";

app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'pages/login.html'
        })
        .state(ClockIn)
});

Answer 1

you should set a name for the state

stateProvider .state('home', {
 url: '/home',
 templateUrl: 'pages/login.html' 
}) 
.state('clockIn', ClockIn)