Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

UI-router hybrid: NG2 states not working before an NG1 state with an NG2 component is triggered

I have a large angularjs 1.7.4 app with UI-router in HTML5 mode with multiple entrypoints.

(The project uses babel 7.6 to compile typescript and corejs3 polyfills, so I am not using angular-cli).

I am trying to migrate one of the entry points to a hybrid application (Angular 8.2.13, @uirouter/angular-hybrid 9.0.0).

I have followed the migration guide @ https://angular.io and the guide at https://github.com/ui-router/angular-hybrid and everything seem to be working except state definitions in Angular. They only work AFTER an angularjs state with an Angular component has been triggered.

There is nothing in the console (with trace enabled for ui-router) when trying to use the NG2 states before that.

I've been stuck on this for days now and I am out of ideas...

ng1hello - ng1 state with angular component ng2hello - angular state with angular component ng1hi - ng1 state with angular component ng2hi - ng2 state with angular component

Case 1:

  1. Reload "/": OK.
  2. Click on ui-sref for "ng1hello". OK
  3. Click on ui-sref for "ng2hello". OK
  4. Click on ui-sref for "ng2hi". OK

Case 2:

  1. Reload "/": OK.
  2. Click on ui-sref for "ng2hello". NOT OK
  3. Click on ui-sref for "ng2hi". NOT OK
  4. Click on ui-sref for "ng1hello". OK
  5. Click on ui-sref for "ng2hello". OK
  6. Click on ui-sref for "ng2hi". OK

Case 3:

  1. Reload on "/ng1hello" OK.

Case 4:

  1. Reload on "/ng2hello" NOT OK.

edit: I reproduced the problem in Stackblitz here: https://angular-hybrid-issue.stackblitz.io/ https://stackblitz.com/edit/angular-hybrid-issue

like image 919
Stefan Norberg Avatar asked Nov 04 '19 15:11

Stefan Norberg


1 Answers

I was apparently using the wrong method to get hold of the UrlService in main.ts (Angular context)

Was:

    import {getUIRouter} from "@uirouter/angular-hybrid";
    const urlService: UrlService = getUIRouter(platformRef.injector).urlService;

Should've been:

const urlService: UrlService = platformRef.injector.get(UrlService); 

https://github.com/ui-router/angular-hybrid/issues/368

like image 76
Stefan Norberg Avatar answered Nov 04 '22 19:11

Stefan Norberg