Comments (12)
happy to help, glad you got it all figured out!
from angular-hybrid.
It looks like the view is being loaded by AngularJS not Angular v10. I'd make sure that the angular-hybrid code is getting invoked and that the state decorator is being applied to your states. The views in the state definition (i.e.: angular.element($0).injector().get('$uiRouter').stateRegistry.get('widget2-demo').$$state().views
) should have $type: 'ng1-to-ng2'
. If they do not, you can try to hard code the $type
on the state declaration and see if there's any difference in behavior:
{
name: 'widget2-demo',
url: '/widget2-demo',
$type: 'ng1-to-ng2',
component: WidgetDemoComponent,
},
If there is a different behavior observed, my guess would be that the boostrapping order for modules changed. The hybrid module must be loaded before any modules which register states (the hybrid code is supposed to make sure this is the case).
If you can reproduce the problem, then I can probably help get to the bottom of it.
FYI, the actual code in @uirouter/angular-hybrid
that bootstraps Angular/AngularJS hasn't changed much in years. I updated the sample app is to angular 11 and the latest angular-hybrid and it seems OK.
from angular-hybrid.
So, I've done a few things, and I'm still unable to get it to work:
- I updated our app to Angular 11 - same error still occurring.
- I tried hard-coding the
$type
- same error. When I run the snippet you gave, I get an object roughly shaped like:
views = {
$default: {
$uiViewName: '$default',
$name: '$default',
$type: 'ng1',
resolveAs: '$resolve',
component: WidgetDemoComponent,
$context: {
...
name: 'widget2-demo',
self: {
name: 'widget2-demo',
url: '/widget2-demo',
$type: 'ng1-to-ng2',
component: WidgetDemoComponent,
}
}
}
}
- I reorganized the app bootstrapping to match the sample app repo and - you guessed it - still the same error. Only real difference now in the structure of my app vs the sample app is that I'm loading a root state synchronously, and in the sample app it's a nested state loaded asynchronously. No idea if that would be relevant to this issue, though.
The hybrid module must be loaded before any modules which register states (the hybrid code is supposed to make sure this is the case).
By "hybrid module" do you mean @uirouter/angular-hybrid
, or do you mean the hybrid Angular/AngularJS app? My app right now is a single Angular module using NgUpgrade to bootstrap a single AngularJS module - could it be an issue that the routes aren't broken out?
from angular-hybrid.
By "hybrid module" do you mean @uirouter/angular-hybrid,
yes
could it be an issue that the routes aren't broken out?
If I understand your comment correctly, no I don't think that's the problem.
Can you try running this command to verify that you haven't conflicting versions of the uirouter libraries?
npm ls @uirouter/core @uirouter/angular @uirouter/angularjs @uirouter/angular-hybrid
You should see something very similar to this and no libraries with differing versions (i.e., you should not see two different versions of @uirouter/core
):
[email protected] /Users/cthielen/projects/uirouter/sample-app-angular-hybrid
├── @uirouter/[email protected]
├── @uirouter/[email protected]
├─┬ @uirouter/[email protected]
│ └── @uirouter/[email protected] deduped
└── @uirouter/[email protected]
from angular-hybrid.
I get identical output to you:
[email protected] /home/dylan/projects/fts/website
├── @uirouter/[email protected]
├── @uirouter/[email protected]
├─┬ @uirouter/[email protected]
│ └── @uirouter/[email protected] deduped
└── @uirouter/[email protected]
from angular-hybrid.
@dpraul can you provide some way of reproducing this? Alternatively, can we screenshare a debug session (I have 15 minutes right now)?
from angular-hybrid.
Kind of you to offer to screenshare - if you think that would be useful, I am happy to give it a shot. Otherwise I might try pulling down the sample app and trying to reproduce the issue
from angular-hybrid.
@dpraul join my meet
from angular-hybrid.
Just to record, Chris was kind enough to spend some time stepping through the issue on a screen-share with me, here's what we found:
Part of our webpack config is babel-plugin-angularjs-annotate. We are also transpiling Angular modules - including ui-router - down with babel from ES2015 to ES5. The result is a part of the ui-router bundle was getting automatic annotations where it shouldn't, which was causing the Angular state to be recognized as an AngularJS state.
Tomorrow I'll be taking that plugin out and seeing if I can make any more progress here.
from angular-hybrid.
Good news is I'm no longer getting the "Unknown provider" issue. I temporarily disabled all babel transpilation of node_modules and the issue went away. It was definitely babel-plugin-angularjs-annotate causing that - thanks for all your help.
I'm sadly still banging away at this one, though, as now I'm getting infinite digest cycle loops and Zone.js is complaining. Going to do more investigation there to see if there are any other inconsistencies I need to address.
That said, this issue is solved, so I suppose this can be closed and I'll make a new issue if I can't resolve the infinite loops.
from angular-hybrid.
I've finally fixed it! The fix probably won't be useful to anyone else, but in case it is, it basically boiled down to an issue with AngularJS using $q
for Promises instead of the Promise global.
In our app, we had a blocking Promise in AngularJS that was using $q
, since $q
hooks into the AngularJS $digest
cycle. Because of that last fact, no $q
promises can resolve until AngularJS has loaded. This meant our AngularJS routes worked fine, but in the Angular routes something fishy was happening with ZoneAwarePromise
and $q
that was causing an infinite loop.
Thanks again for all the help here. Happy to finally have these routes working correctly.
from angular-hybrid.
I ran into this issue too. Issue #55 helped me resolve the issue by excluding ui-router
from being transcompiled.
exclude: resource => /@uirouter/.test(resource)
@christopherthielen ng-annotate
and ng-annotate-loader
are widely used with hybrid applications. Could you add a reference or note to that issue on the README?
Not going to lie, I spent a few days trying to get this to work. Today I was actually going to create a new ticket to document our shortcomings and came across this issue.
I know it's my own fault for not triaging the issues sooner. But I would like to try and save the next struggling developer some time and frustration.
from angular-hybrid.
Related Issues (20)
- Angular 10 Compatibility HOT 2
- 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
- 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
- After update to 15: UI router error TypeError: this.factory is undefined HOT 19
- 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
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.