<router-outlet> and <div ng-view>, AngularJS and Angular routing at the same time

Question

My app component (an Angular 2 component, downgraded for index.html) contains this:

  <router-outlet></router-outlet>
  <div ng-view></div>

This is just like it says to do in "Dividing routes between Angular and AngularJS" https://angular.io/docs/ts/latest/guide/upgrade.html#!#adding-the-angular-router-and-bootstrap

But the ng-view isn't picking up any AngularJS routes.

How would ng-view work in an Angular 2 template anyway? How am I supposed to be able to use both types of routers at the same time?

<router-outlet></router-outlet> isn't working either -- this html just shows up on the page statically as-is.

I have <base href="/"> and the javascript console has no errors in it.

Google, message me :) who/ajxtaylor

Alexander Taylor Alexander Taylor · Accepted Answer · 2017-02-18T02:30:04

This has gotten me closer in the right direction but it's still not working.

<router-outlet> wasn't working because I was missing the top level app component in the bootstrap array:

@NgModule({
  bootstrap: [
    AppComponent,
  ],
})
export class AppModule {
  ngDoBootstrap() {}
}

https://angular.io/docs/ts/latest/guide/upgrade.html#!#dividing-routes-between-angular-and-angularjs

Submitted GitHub issue regarding lack of error message: https://github.com/angular/angular/issues/14572

I don't know if the Angular AppComponent is supposed to have downgradeComponent called on it and if so, whether the index.html should use the AngularJS selector or the Angular selector.

<router-outlet> and <div ng-view>, AngularJS and Angular routing at the same time

1 Answers