State 'x' is already defined

[jspizziri]

EDIT: I've filed this issue with the ui-router/ng2 repository. Please close this issue if it's preferred to have new issues in said repo.

I'm running [email protected]. I have several states defined, and my application has been running fine until now. However, today I started getting the following error:

Error: State 'passwordReset' is already defined
    at StateQueueManager.register (http://localhost:3001/main-ca1ad05741637e0ac0b6.js:109962:19) [angular]
    at StateRegistry.register (http://localhost:3001/main-ca1ad05741637e0ac0b6.js:110128:32) [angular]
    at http://localhost:3001/main-ca1ad05741637e0ac0b6.js:73573:69 [angular]
    at Array.forEach (native) [angular]
    at applyModuleConfig (http://localhost:3001/main-ca1ad05741637e0ac0b6.js:73573:12) [angular]
    at http://localhost:3001/main-ca1ad05741637e0ac0b6.js:112687:155 [angular]
    at Array.forEach (native) [angular]
    at http://localhost:3001/main-ca1ad05741637e0ac0b6.js:112687:17 [angular]
    at Object.onInvokeTask (http://localhost:3001/main-ca1ad05741637e0ac0b6.js:52390:37) [angular]
    at ZoneDelegate.invokeTask (http://localhost:3001/main-ca1ad05741637e0ac0b6.js:157475:40) [angular]
    at Zone.runTask (http://localhost:3001/main-ca1ad05741637e0ac0b6.js:157365:47) [<root> => angular]
    at ZoneTask.invoke (http://localhost:3001/main-ca1ad05741637e0ac0b6.js:157546:33) [<root>]
    at data.args.(anonymous function) (http://localhost:3001/main-ca1ad05741637e0ac0b6.js:158363:25) [<root>]

passwordReset is not defined anywhere else. Once I remove that particular state, the app works normally, with all the other states I defined in the exact same manner.

[jspizziri]

I believe I've isolated the issue. It appears to be a change in the behavior of ui-router once [email protected] is installed.

If I have two modules:

//app/foo/foo.module.ts
import { NgModule } from '@angular/core';
import { UIRouterModule } from 'ui-router-ng2';

import FooComponent from './foo.component';

@NgModule({
  imports:      [
    UIRouterModule.forChild({ states: [
      {
        name: 'foo',
        url: '/foo',
        component: FooComponent
      }
    ]),
  ],
  declarations: [],
  exports: [],
  providers: [],
})
export default class FooModule { }

//app/bar/bar.module.ts
import { NgModule } from '@angular/core';
import { UIRouterModule } from 'ui-router-ng2';

import FooModule from '../foo/foo.module';
import BarComponent from './bar.component';

@NgModule({
  imports:      [
    UIRouterModule.forChild({ states: [
      {
        name: 'bar',
        url: '/bar',
        component: BarComponent
      }
    ]),

    FooModule,
  ],
  declarations: [],
  exports: [],
  providers: [],
})
export default class BarModule { }

In this case I receive a runtime error stating State 'foo' is already defined, as a result of adding FooModule to the list of imports in BarModule. I'm not sure if this is intended behavior, however this is not how the router behaves in [email protected]

[christopherthielen]

Closing in favor of ui-router/angular#42