Hybrid apps using both routers can instantiate components twice, breaking change detection.

I’m submitting a … (check one with “x”)

[x] bug report
[ ] feature request
[ ] support request

Current behavior When:

• bootstrapping a hybrid ng1/ng2 app that uses both routers
• routing to ng2 components with selectors that have been downgraded to ng1 with the same selector
• navigating to one such component

The component is instantiated twice, which leads to constructor logic being ran twice, and also seems to break change detection in async ngIf conditions upon further (non-reload) navigation.

Expected behavior Components should not be instantiated twice, nor should change detection stop working.

Minimal reproduction of the problem with instructions

git clone https://github.com/filipesilva/hybrid-router-bug
cd hybrid-router-bug
npm install
npm start

1 - browser opens page, also open browser console 2 - notice foo constructor called twice in console 3 - click async ngIf link to baz (routerLink inside ngIf, changed via setTimeout) 4 - notice page only shows baz component, but console also says async content loaded 5 - click anywhere on the page, async content loaded will show up (message inside ngIf, changed via setTimeout) 6 - click the bar link at the top 7 - notice bar component, id: 1 in the page, and bar constructor called and id: 1 in the console 8 - refresh the page 9 - notice the page now says bar component, id:, and the console shows the constructor being called twice with id: undefined the second time.

In step 4/5, change detection needed to be triggered via a click on the page to detect that the message had changed.

In step 9, the instantiated component doesn’t show the correct content.

Both these cases seem to be triggered by a component being instantiated twice, hence double constructor calls, when bootstrapping the application.

What is the motivation / use case for changing the behavior? Components should not be instantiated twice, nor should change detection stop working.

Please tell us about your environment: Windows 10, VSCode, npm, lite-server, Angular 2 quickstart

• Angular version: 2.2.2

• Browser: [ Chrome 54 ]

• Language: [ TypeScript 2.0.10 ]

/cc @petebacondarwin @vsavkin @wardbell @naomiblack

[petebacondarwin]

Just to be clear on the problem here: the Angular 2 router is doing its initial navigation before the Angular 1 module has been bootstrapped which has the following repercussions:

• upgraded Angular 1 services are not available during this initial route navigation
• components that are created by the Angular 2 router may then get “re-compiled” during Angular 1 bootstrap.

[nasreddineskandrani]

For those who are still dealing with hybrid port of app or plan to do a move to angular2+.

I suggest to consider moving your app directly to a full angular2+ router solution in a hybrid code base (even if all your views remain in angular1). Based on this example repo: https://github.com/aminpaks/angular-hybrid

This was done in a week our side… wish you the best

note: $location injection was causing problem so make sure => to remove any other angular1 router service injection in your code even if not used.

by the way my 2 cents: https://www.xfive.co/blog/testing-angular-faster-jest/ Or https://wallabyjs.com/docs/index.html say hello to karma for me if you see it.