State 'foo' is already defined - [email protected]

[jspizziri]

This is a duplicate issue of angular-ui/ui-router#3326, as I wasn't sure where the appropriate place to file it was. Upon upgrading my app to [email protected] I started receiving a duplicate state declaration error in the following situation.

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]

Can you post your root module too?

[jspizziri]

//app/app.module.ts

import { LocationStrategy, PathLocationStrategy, Location } from '@angular/common';
import { SystemJsNgModuleLoader, NgModuleFactoryLoader, NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UIRouterModule, UIRouter } from 'ui-router-ng2';

import FooModule from './foo/foo.module';
import BarModule from './bar/bar.module';
import AppComponent from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    UIRouterModule.forRoot({
      useHash: false,
      config: function uiRouterConfigFn(router: UIRouter) {
        router.urlService.rules.otherwise({ state: 'foo' });
        router.stateRegistry.root();
      },
    }),

    FooModule,
    BarModule,
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ],
  providers: [
    { provide: LocationStrategy, useClass: PathLocationStrategy },
    { provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader },
    { provide: Location, useClass: Location },
  ],
})
export class AppModule {}

[christopherthielen]

OK, that's interesting.
What happens if you change your root module imports (removing FooModule) to:

  imports: [
    BrowserModule,
    UIRouterModule.forRoot({
      useHash: false,
      config: function uiRouterConfigFn(router: UIRouter) {
        router.urlService.rules.otherwise({ state: 'foo' });
        router.stateRegistry.root();
      },
    }),

    BarModule,
  ],

[jspizziri]

Thanks for looking into this!

That does make the error go away, however I'd prefer to not have to do that long term as FooModule also contains functionality which is used by a couple of other modules (e.g. a form or something) If I import FooModule into more than one other module (let's say FooBarModule uses the FooComponent) then the duplicate state error occurs again.

The option of moving the reusable forms into a SharedModule is also not really appealing as I would basically just end up with a giant SharedModule with a other modules effectively only representing views of the application, which would effectively result in a flat app structure.

[christopherthielen]

Agreed, this is a bug that needs to be fixed

[christopherthielen]

I'm unable to reproduce this error. Can you please reproduce it for me?

I've got an angular-cli project started here: https://github.com/christopherthielen/foo-is-already-defined

Run ng serve

[jspizziri]

I'll try to get a working repo for you this weekend.

…

On Thu, Feb 9, 2017 at 8:19 AM Chris Thielen ***@***.***> wrote: I'm unable to reproduce this error. Can you please reproduce it for me? I've got an angular-cli project started here: https://github.com/christopherthielen/foo-is-already-defined Run ng serve — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#42 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABYoIp5nac4fK1HfLVQeVWpxNsQmxwyxks5rayBkgaJpZM4L7Wxd> .

[aeternusrahl]

I believe this is related to this angular issue: angular/angular#13652

[christopherthielen]

Thanks for posting that. I think we can work around the bug by eliminating duplicates when applying the ng module configs

[christopherthielen]

@jspizziri I think I have a fix for this, but I can't test it without a reproduction. I'm going to push the change, and when I do will close the issue. If it's not fixed we can reopen.

[jspizziri]

@christopherthielen,

Thanks for working on this! Sorry I wasn't able to get you a reproduction. Once the fix is pushed, I'll make sure to let you know if it does or does not fix the issue in our repository.

Thanks again!