AngularJS TypeScript编写的config单元测试：路由获取返回null

Let's walk through the possible issues here and how to fix them, since your JS version works but the TS one isn't registering the route properly even though config() runs.

1. Fix Module Loading Order in Tests #

Looking at your spec file, you're loading the component module first, then the parent oit module. AngularJS needs parent modules to be loaded before child modules that depend on them. Swap the order to ensure the parent module is initialized first:

beforeEach(module('oit')); // Load parent module first
beforeEach(module('oit.components.batch.batchprocess.stateticolumnar.stateticolumnarworkpaper'));

Even if your component module declares a dependency on oit, explicitly loading the parent first in tests avoids any initialization race conditions that could prevent the route from being registered.

2. Verify Route Registration with Debug Logs #

Add a quick debug step to confirm whether the route is actually being added to $stateProvider at all. Update your test to log all registered states:

describe('oit.components.batch.batchprocess.stateticolumnar.stateticolumnarworkpaper', function () {
  beforeEach(module('oit'));
  beforeEach(module('oit.components.batch.batchprocess.stateticolumnar.stateticolumnarworkpaper'));

  var state = 'oit.stateticolumnar.stateticolumnarworkpaper';

  it('lists all registered states for debugging', inject(function ($state) {
    console.log('Registered states:', Object.keys($state.get()));
  }));

  it('has a route', inject(function ($state) {
    var route = $state.get(state);
    expect(route).not.toBeNull();
    expect(route.url).toBe('/stateticolumnarworkpaper');
  }));
});

If the target route doesn't show up in the log, that means the $stateProvider.state() call isn't working as expected—even though config() runs.

3. Fix Context Binding for the Resolve Function #

While this might not be the immediate cause of the route not being found, it's a common TypeScript pitfall in AngularJS: when you pass this.resolves directly to the resolve object, the this context gets lost when ui-router executes the function. This will break the resolve logic later, so fix it now with one of these approaches:

Option 1: Use an Arrow Function in the Config #

private config() {
  this.$stateProvider
    .state('oit.stateticolumnar.stateticolumnarworkpaper', {
      // ... other config properties
      resolve: {
        onLoad: (...args) => this.resolves(...args) // Preserve `this` context
      }
    });
}

Option 2: Bind the Function in the Constructor #

constructor(private $stateProvider: ng.ui.IStateProvider) {
  this.resolves = this.resolves.bind(this); // Bind context once during initialization
  this.config();
}

4. Validate TypeScript Compilation & Annotation #

Double-check that your tooling is handling TypeScript and dependency injection correctly:

• Confirm the @ngInject decorator on your constructor is preserved in the compiled JS. If it's missing, AngularJS won't inject $stateProvider properly (though you said config() runs, so this is less likely—but worth verifying).
• Inspect the compiled JS output for your StatetiworkpaperConfig class. Make sure the $stateProvider.state() call is present and uses the exact state name you're testing.

5. Check for Typos in State Name #

Double-check that the state name in your TS config (oit.stateticolumnar.stateticolumnarworkpaper) is exactly the same as the one in your test. Even a single typo (like a missing letter or extra character) will cause $state.get() to return null.

Fixing the module loading order is the most likely solution to your immediate route-not-found issue. The other steps will help you catch additional problems that might pop up once the route is properly registered.

内容的提问来源于stack exchange，提问作者Ricardo