UIRouter with NgModules

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UIRouterModule } from './uirouter.module';
import { MyRouterConfig } from './uirouter.config';


@NgModule({
    declarations: [],
    imports: [
        BrowserModule,
        UIRouterModule.forRoot(DybRouterConfig, [])],
    bootstrap: [UIView],
})
export class AppModule { }

feature.module.ts

import { NgModule, Component } from '@angular/core';
import { Ng2StateDeclaration } from 'ui-router-ng2';
import { UIRouterModule } from './uirouter.module';

@Component({
    selector: 'home',
    template: '<h1>Home</h1>',
})
export class HomeComponent { }


export const HomeState: Ng2StateDeclaration = {
    name: 'home',
    url: '/home',
    component: HomeComponent,
}


@NgModule({
    declarations: [HomeComponent],
    imports: [UIRouterModule.forChild([HomeState])],
})
export class FeatureModule { }

uirouter.config.ts

import { UIRouter, Ng2StateDeclaration } from 'ui-router-ng2';
import { Injectable, Injector, Inject } from '@angular/core';
import { STATES } from 'app/common/uiRouter'



@Injectable()
export class MyRouterConfig {

    constructor(private injector: Injector,
                @Inject(STATES) private states: Ng2StateDeclaration[][]) {
    }

    configure(uiRouter: UIRouter) {

        // let vis = require('ui-router-visualizer');
        // vis.visualizer(uiRouter);

        this.states.forEach(states => {
            states.forEach(state => {
                uiRouter.stateRegistry.register(state);
            })
        })

        uiRouter.urlRouterProvider.otherwise('home');

    }

}

uirouter.module.ts

import { NgModule, ModuleWithProviders, ANALYZE_FOR_ENTRY_COMPONENTS, OpaqueToken } from '@angular/core';

import { LocationStrategy, PathLocationStrategy, PlatformLocation } from '@angular/common'
import { BrowserPlatformLocation } from '@angular/platform-browser';

import { UIROUTER_PROVIDERS, UIROUTER_DIRECTIVES, Ng2StateDeclaration, UIRouterConfig, UIRouter} from 'ui-router-ng2'


interface UIRouterConfigFactory { new(...params: any[]): UIRouterConfig}


export const STATES = new OpaqueToken('STATES');


const LOCATION_STRATEGEY = {
    provide: LocationStrategy,
    useClass: PathLocationStrategy,
}


const PLATFORM_LOCATION = {
    provide: PlatformLocation,
    useClass: BrowserPlatformLocation,
}


@NgModule({
    declarations: UIROUTER_DIRECTIVES,
    exports: UIROUTER_DIRECTIVES,
})
export class UIRouterModule {

    static forRoot(config: UIRouterConfigFactory,
                   states: Ng2StateDeclaration[]): ModuleWithProviders {

        return {
            ngModule: UIRouterModule,
            providers: [
                UIROUTER_PROVIDERS,
                LOCATION_STRATEGEY,
                PLATFORM_LOCATION,

                provideConfig(config),
                provideStates(states),
            ]
        }
    }

    static forChild(states: Ng2StateDeclaration[]): ModuleWithProviders {
        return {
            ngModule: UIRouterModule,
            providers: [
                provideStates(states),
            ],
        }
    }
}

function provideConfig(configClass: Function) {
    return {
        provide: UIRouterConfig,
        useClass: configClass,
    }
}


function provideStates(states: Ng2StateDeclaration[]) {
    return [
        {provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: states, multi: true},
        {provide: STATES, useValue: states, multi: true},
    ];
}