Comments (19)
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
from angular-hybrid.
Can you double check you are using @uirouter/[email protected]?
from angular-hybrid.
Also what do you mean production build looks fine?
from angular-hybrid.
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.
from angular-hybrid.
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
from angular-hybrid.
Call stack does not help at all?
from angular-hybrid.
Not really, sorry
from angular-hybrid.
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.
from angular-hybrid.
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
What is the purpose of this line? As a workaround it seems to work when downgrading to version 14.
from angular-hybrid.
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
from angular-hybrid.
@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
.
from angular-hybrid.
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.
from angular-hybrid.
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?
from angular-hybrid.
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
from angular-hybrid.
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
from angular-hybrid.
Okay, I'm working on reverting the changes.
from angular-hybrid.
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.
from angular-hybrid.
Thanks @wawyed, I really appreciate your work, keeping this amazing library alive!
from angular-hybrid.
No worries. Sorry I didn't realise the issue with the dependency that lead to the wrong fix.
from angular-hybrid.
Related Issues (20)
- Jest test suite failed to run AngularJS v1.x is not loaded! after upgrade from angular 7 to 9 HOT 6
- How to augment all routes with additional resolve using decorator HOT 2
- ui.router.upgrade' is not available! HOT 1
- Angular 9 - optimization: true breaks build HOT 1
- Version 12 causes "Unknown provider" on Angular states HOT 12
- Upgraded AngularJS component renders itself in ui-view HOT 1
- The target entry-point "@uirouter/angular-hybrid" has missing dependencies HOT 2
- Support for angular12 HOT 5
- UIViewNgUpgrade downgradedModule not specified HOT 1
- ngcc fails
- Angular 14 compatibility HOT 6
- Error bootstrapping AppModule Error: Cannot read properties of undefined (reading 'when') HOT 1
- Failure to inject $transition$ into a downgraded ng2 component HOT 9
- Angular 15 compatibility HOT 3
- random error: Cannot find module '@uirouter/angularjs' or its corresponding type declarations. HOT 3
- Add support for v16 in @uirouter/angular-hybrid HOT 3
- After update to v15.0.2 I get this error "Cannot read properties of undefined (reading 'inherit')"
- Wrong NATIVE_INJECTOR_TOKEN import HOT 2
- Add support for v17 in @uirouter/angular-hybrid HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-hybrid.