RouterModule does not initialize correctly when using UpgradeModule

[bedag-moo]

I'm submitting a ...

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

Current behavior
initialRouterNavigation (from upgrade.ts) is not called during bootstrap. As a consequence, RouterModule does not navigate to the initial URL, and does not subscribe to location changes caused by ngRoute, causing it to not deactivate a route when navigating to a route managed by ngRoute.

Expected behavior
initialRouterNavigation is invoked, the RouterModule navigates to the initial URL, subscribes to location changes caused by ngRoute and deactivates the current route when ngRoute changes location.

Minimal reproduction of the problem with instructions

I have been trying to follow the approach documented at @angular/router/upgrade.ts:

main.ts:

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
  (<any>window).angular.module("angularschulung").directive('appRoot', downgradeComponent({component: AppComponent}));
  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(document.body, ['angularschulung'], {strictDi: true});
});

app.module.ts:

const routes : Routes = [
  {path: "ng2/issue/new", component: ReportIssueComponent},
  {path: "**", component: EmptyComponent}  // for routes managed by ngRoute
]

@NgModule({
  declarations: [
    AppComponent,
    EmptyComponent,
    NgViewComponent,  // upgraded ng-view for use by AppComponent
    ReportIssueComponent,
  ],
  entryComponents: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(routes),
    UpgradeModule
  ],
  providers: [
    RouterUpgradeInitializer
  ],
})
export class AppModule {
  // suppress automatic bootstrapping
  ngDoBootstrap() { }
}

Please tell us about your environment:

                             _                           _  _
  __ _  _ __    __ _  _   _ | |  __ _  _ __         ___ | |(_)
 / _` || '_ \  / _` || | | || | / _` || '__|_____  / __|| || |
| (_| || | | || (_| || |_| || || (_| || |  |_____|| (__ | || |
 \__,_||_| |_| \__, | \__,_||_| \__,_||_|          \___||_||_|
               |___/
angular-cli: 1.0.0-beta.25.5
node: 7.4.0
os: win32 x64
@angular/common: 2.4.3
@angular/compiler: 2.4.3
@angular/core: 2.4.3
@angular/forms: 2.4.3
@angular/http: 2.4.3
@angular/platform-browser: 2.4.3
@angular/platform-browser-dynamic: 2.4.3
@angular/router: 3.4.3
@angular/upgrade: 2.4.3
@angular/compiler-cli: 2.4.3

• Browser: all (verified in Firefox and Chrome. Bootstrapping issues are probably not browser related)

• Language: TypeScript

[pkt-zer0]

To unravel the issue one step further, it seems that in this case, the application bootstrap listeners (APP_BOOTSTRAP_LISTENER) are not invoked at all.

Which kind of makes sense, since with the UpgradeModule, we're running an NG1 application. On the other hand, it's not what various NG2 components, including the RouterModule, expect.

Calling the listeners manually still doesn't fix the issue, the ApplicationRef is still not correctly set up then.

[gkalpak]

Could you create a minimal, runnable demo. It is hard to investigate this without a reproduction.

[bedag-moo]

I'm about to leave for my christmas holidays, but the following looks close to what I had back in January and exhibits similar symptoms:

https://github.com/bedag/reproducer-for-angular-14081

[gkalpak]

It turns out that APP_BOOTSTRAP_LISTENERS are only invoked when bootstrapping a component. Since with UpgradeModule we are usually not bootstrapping any components (but bootstrapping AngularJS inside ngDoBootstrap() instead), APP_BOOTSTRAP_LISTENERS are indeed not run at all.

I am not sure what the reasoning is for not running APP_BOOTSTRAP_LISTENERS when using ngDoBootstrap(), but it is easy to work-around that by manually calling what you need. In this case, you just need to call setUpLocationSync(ngUpgrade: UpgradeModule):

import {..., setUpLocationSync} from '@angular/router/upgrade';
...

@NgModule({
  imports: [ ... ],
  providers: [
    {provide: UrlHandlingStrategy, useClass: CoexistingUrlHandlingStrategy},
  ],
  declarations: [ ... ],
  entryComponents: [ ... ],
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) {}

  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['old'], {strictDi: true});
    setUpLocationSync(this.upgrade);
  }
}