Cannot read property 'when' of undefined

[marius-hi]

I'm running a project that uses angular hybrid with the following versions:

• "angular": "1.8.0"
• "@angular/core": "10.0.3"
• "@uirouter/angular-hybrid": "11.0.2"
• "@uirouter/angular": "7.0.0"
• "@uirouter/angularjs": "1.0.28"
  ....

When executing unit tests I'm getting "Cannot read property 'when' of undefined" in most of the tests (karma with chai and mocha). I tried to debug and see that is pointing to node_modules/@uirouter/core/lib-esm/resolve/resolvable.js
this.promise = this.resolved ? services.$q.when(this.data) : undefined; ( https://github.com/ui-router/core/blob/master/src/resolve/resolvable.ts#L84 )
If I guard against this.resolved the error is gone
this.promise = this.resolved && services ? services.$q.when(this.data) : undefined;

Could you suggest in which cases services can be undefined and if this can be fixed on master?
Should I create a pull request for it?

[christopherthielen]

Hi @marius-hi ,

services.$q should be automatically assigned before each test by the test framework. Try to inject the UIRouter class (or AngularJS $uiRouter) before each test to cause the initialization code to run.

[christopherthielen]

I also think this can be caused by multiple copies of @uirouter libraries in your node_modules

Try running:

yarn why @uirouter/core
yarn why @uirouter/angular
yarn why @uirouter/angularjs
yarn why @uirouter/angular-hybrid

or

npm ls @uirouter/core
npm ls @uirouter/angular
npm ls @uirouter/angularjs
npm ls @uirouter/angular-hybrid

Look for any uirouter packages with two different versions listed.

[marius-hi]

Hi @christopherthielen,

Most probably this issue is caused by multiple copies of @uirouter:

├── @uirouter/angular@7.0.0
├── @uirouter/angular-hybrid@11.0.2
└─┬ @uirouter/angularjs@1.0.28
└── @uirouter/core@6.0.6

What is the possible solution to prevent this issue as we will still need to rely on Angular-hybrid and AngularJs for some time until the project is fully upgraded to Angular?

[christopherthielen]

it is expected to have all four of those packages, as long as none are duplicated.

[eydrian]

for angularjs/angular-hybrid when uirouter/core@6.0.8 is explicitly installed, exactly this error will happen!
Only works with @uirouter/core@6.0.7

[mansevmann]

It's true what @eydrian states. Version @uirouter/core@6.0.8 breaks our teamcity build with the error message of "Cannot read property 'when' of undefined"

[christopherthielen]

@eydrian @mansevmann can you show the output of yarn why @uirouter/core or npm ls @uirouter/core please

[eydrian]

FOO_APPS@1.0.1 /PATH_TO_REPO
├─┬ @uirouter/angular@8.0.1
│ └── @uirouter/core@6.0.7 deduped
├─┬ @uirouter/angularjs@1.0.29
│ └── @uirouter/core@6.0.7 deduped
├── @uirouter/core@6.0.7
├─┬ @uirouter/rx@0.6.5
│ └── @uirouter/core@6.0.7 deduped
└─┬ @uirouter/visualizer@7.2.1
  └── @uirouter/core@6.0.7 deduped

@christopherthielen

[matthewborgman]

@eydrian or @mansevmann did you ever solve this?

[eydrian]

nope

[ThibaudAV]

haha and now ? I have the same problem apparently

[ThibaudAV]

I don't know if this is it. but apparently
ui-router/angularjs uses lib-esm which uses lib-esm for import coreservices
ui-router/angular uses fesm2015 and so uses llib for import coreservice
so for Angular coreservice was never init

[ThibaudAV]

Probably due to my project which looks like frankenstein monster. With this configuration in webpack it seems to solve the problem

      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
        resolve: { mainFields: ['es2015', 'browser', 'module', 'main'] }, // <-- this ligne
      },

apparently the resolve.mainFields that I added globally is not taken into account I have to give it again for the mjs.
now core lib-esm is loaded in both cases. and I no longer have this error

[WLyKan]

I use pnpm to install and run start. It fails with error: cannot read properties of undefined (reading 'when')
so i remove node_modules and use yarn.
It works fine.

[jozzeed]

Hi, I am having a similar issue but in my actual live code. It works fine on angular 13's side but not in my AngularJs. As soon as I add the "ui.router.upgrade" dependency to my "app" module, I receive the following error: ERROR TypeError: Cannot read properties of undefined (reading 'when').

As others have mentioned, it comes from the following line of code: this.promise = this.resolved ? services.$q.when(this.data) : undefined;

Almost looks like Resolvable is not able to get any services from my AngularJs. Any idea why?