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/[email protected]
├── @uirouter/[email protected]
└─┬ @uirouter/[email protected]
└── @uirouter/[email protected]

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/[email protected] is explicitly installed, exactly this error will happen!
Only works with @uirouter/[email protected]

[mansevmann]

It's true what @eydrian states. Version @uirouter/[email protected] 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]

[email protected] /PATH_TO_REPO
├─┬ @uirouter/[email protected]
│ └── @uirouter/[email protected] deduped
├─┬ @uirouter/[email protected]
│ └── @uirouter/[email protected] deduped
├── @uirouter/[email protected]
├─┬ @uirouter/[email protected]
│ └── @uirouter/[email protected] deduped
└─┬ @uirouter/[email protected]
  └── @uirouter/[email protected] 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?

[zavrakv]

Had this problem on angularJS+Angular hybrid project because of incorrect require() statements. I had to install @angular-builders/custom-webpack and set such a config for template loading of old JS:

module: {
    rules: [
        {
            test: /\.html$/,
            type: 'asset/source',
            include: [
                path.resolve(__dirname, "YourParentPathToLegacyTemplates"),
            ],
        }
    ]
}

And I had to change require statements from require("raw-loader!../path-to-template/template.html").default to require("../path-to-template/template.html")
No loader + no .default at the end of the statement
It solved my problem, tested on Angular 12 and 13

[eaemilio]

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?

@jozzeed Have you been able to resolve this? I'm having the same issue when adding 'ui.router.upgrade' to my angularjs module.

[IgorWolbers]

I had the same problem.

npm ls @uirouter/core

Output:

[email protected] 
+-- @uirouter/[email protected]
| `-- @uirouter/[email protected]
+-- @uirouter/[email protected]
| `-- @uirouter/[email protected]
`-- @uirouter/[email protected]
  `-- @uirouter/[email protected] deduped

As of npm cli v8.3.0 (2021-12-09) this can be solved using the overrides field of package.json

First add an explicit install of @uirouter/core. I used version 6.0.8 because I am not sure if the latest version 6.0.9 is supported on @uirouter/angularjs.

npm i @uirouter/[email protected] --P -E

Your package.json should now have this line added to it.

"@uirouter/core": "6.0.8",

Next specify that this installed version of @uirouter/core should be used by the dependent libraries. Manually update your package.json and add/update the overrides section.

"overrides": {
  "@uirouter/rx": {
    "@uirouter/core": "$@uirouter/core"
  },
  "@uirouter/angular": {
    "@uirouter/core": "$@uirouter/core"
  }
}

Run your install one more time.

npm i

And finally check the dependent versions one last time.

npm ls @uirouter/core

[email protected] 
+-- @uirouter/[email protected] overridden
| `-- @uirouter/[email protected] deduped
+-- @uirouter/[email protected]
| `-- @uirouter/[email protected] deduped
+-- @uirouter/[email protected] overridden
`-- @uirouter/[email protected] overridden
  `-- @uirouter/[email protected] deduped

[JonayLo]

For anyone that is still facing this issue, fixed it by also updating uirouter/angularjs from v 1.0.30 to 1.1.0