After update to 15: UI router error TypeError: this.factory is undefined about angular-hybrid

[xfh]

I have the same problem with an Angular 15 hybrid app. Indeed, downgrading to version 14 works.

I think I found the problem - at least I could reproduce in the sample-app-angular-hybrid.

@uirouter/angularjs pulls in @uirouter/[email protected] - core should be on version 6.1.0.

In my app, this causes a typescript compilation error, due to conflicting uirouter/core types.
To resolve the conflict, I've added the following override to my package.json (npm uses overrides, yarn uses resolutions):

  "overrides": {
    "@uirouter/core": "6.1.0"
  },
  "resolutions": {
    "@uirouter/core": "6.1.0"
  }

Adding the override to the sampe-app-angular-hybrid repo causes the runtime error as reported in this issue.

Conclusion:

• The update in angular-hybrid should be reverted because we cannot use two different uirouter/core dependencies at runtime
• @uirouter/angularjs should be updated to allow @uirouter/[email protected] dependencies

Current workaround:

• Use overrides to get uirouter/core version 6.1.0
• Use angular-hybrid version 14

[wawyed]

Can you double check you are using @uirouter/[email protected]?

[wawyed]

Also what do you mean production build looks fine?

[hheexx]

Yea, 15.0.1 was in package-lock, I checked.

Also what do you mean production build looks fine?

ng build works and produces good build but ng serve does not work. When I visit website I get blank page and exception above.

[wawyed]

It's going to be difficult for me to debug it without being able to reproduce the issue...

the sample angular hybrid app seems to be working fine https://github.com/ui-router/sample-app-angular-hybrid

[hheexx]

Call stack does not help at all?

[wawyed]

Not really, sorry

[pacome35220]

Same problem for me with v15.0.1, I can give you a more precise stacktrace :

I don't use ng build or ng serve, I use a custom webpack config.

PS : is it possible to update your exemple of custom webpack config to Angular 15 ?

Thank you for your time.

[Camo30]

Same here. Seems to be related with this line, which was introduced with the Angular 15 update:

angular-hybrid/src/angular-hybrid.ts

Line 244 in 077d8e6

$uiRouter.plugin<ServicesPlugin>(servicesPlugin);

What is the purpose of this line? As a workaround it seems to work when downgrading to version 14.

[wawyed]

Hi, the example projects were failing without it. Is the way you bootstrap the app different from the example project? https://github.com/ui-router/sample-app-angular-hybrid

[pacome35220]

@xfh I want to use Angular v15 and downgrading ui-router to version v14 is not possible for me because I'm using npm v8, and npm install fails because the resolution of the dependency tree is stricter with npm v8, so I get an error during npm install.

[xfh]

Ultimately, you are depending on @uirouter/[email protected] - otherwise you wouldn't need angular-hybrid.

@uirouter/angularjs hasn't been maintained since 2 years. It still depends on @uirouter/core 6.0.8. I'd be very surprised if you didn't have these dependency conflicts before. Even with uirouter/angular-hybrid 15, you will have a dependency conflict due to uirouter/angularjs. It has nothing to do with npm v8.

In the absence of a new release, all you can do is to ignore the well-meant advise of npm and enforce the package installation - hoping that there is no API incompatibility. uirouter/angularjs is the reason I've allowed legacy-peer-deps.

[wawyed]

I'll try to change ui-router/angularjs to use peerDependencies for uirouter/core when I get some free time. Would that solve the issues you've been having?

[pacome35220]

Unfortunately I don't want to allow legacy-peer-deps using --force or --locagy-peer-deps in my CI/CD pipeline because it might cause other problems later for others packages.

I had no dependency conflicts before because @uirouter/core was in 6.0.8 in all @uirouter packages.

The solution I found is a to update subdependencies npm update @uirouter/core to 6.1.0.

• @uirouter/[email protected] -> @uirouter/core 6.0.8
• @uirouter/[email protected] -> @uirouter/core 6.1.0

Now there are 2 versions of @uirouter/core :

• 6.0.8 from @uirouter/angularjs
• 6.1.0 from @uirouter/angular

and it works.

It's maybe not related to this issue but in my project but :

• I have to import Transition from @uirouter/angularjs instead of @uirouter/angular in my Angular routing module

[xfh]

I'll try to change ui-router/angularjs to use peerDependencies for uirouter/core when I get some free time. Would that solve the issues you've been having?

Hi @wawyed, allowing 6.x.x peer dependencies in uirouter/angularjs should fix the dependency conflicts, thanks!
You will also have to revert your change in angular-hybrid 15 though - you will get the same problem as the original poster.

@pacome35220, do you really want to bundle two versions of uirouter/core? That sounds to me way more fragile... Are you sure both routers use the same configuration? It might not be a problem in a simple app, but if you configure for instance the UrlConfig to e.g. use a custom ParamTypeDefinition, you'd have to do so for each router...

You can easily verify in the sample app, that there are two uirouter/core dependencies bundled:

npm run build -- --source-map
npx source-map-explorer dist/**.js

[wawyed]

Okay, I'm working on reverting the changes.

[wawyed]

Alright version 15.0.2 has been released. Please make sure you use either in your package.json:

if you use yarn:

  "resolutions": {
    "@uirouter/core": "^6.1.0"
  },

If you use npm:

  "overrides": {
    "@uirouter/core": "6.1.0"
  },

This should solve the issues for now. I need to get access to uirouter/angularjs before I can fix the peerDep so for now this is the way to get it to work.

[xfh]

Thanks @wawyed, I really appreciate your work, keeping this amazing library alive!

[wawyed]

No worries. Sorry I didn't realise the issue with the dependency that lead to the wrong fix.