Wildcard paths while mixing AngularJS and Angular 2 routing - angularjs

Question

I don't know how to do wildcard path routing in an app that's half-upgraded from AngularJS to ng2.
In general, you mix both kinds of routing like this:
The first step to have a dual router setup is to add an Angular root
component containing one outlet for each router. AngularJS will use
ng-view, and Angular will use router-outlet. When one is using it's
router, the other outlet will be empty.
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<router-outlet></router-outlet>
<div ng-view></div>
`,
})
export class AppComponent { }
https://angular.io/docs/ts/latest/guide/upgrade.html#!#dividing-routes-between-angular-and-angularjs
In Angular 2 you can specify a wildcard path like this:
{ path: '**', component: PageNotFoundComponent }
In AngularJS you can have a wildcard path like this:
$routeProvider
.otherwise({
template: '<page-not-found></page-not-found>',
});
When I put everything together and a path isn't handled, how do avoid both routers from emitting <page-not-found> ?

Answer 1

I can confirm that <div ng-view></div> does work in the angular 2 AppComponent component if everything else is set up right. (Add AppComponent to AppModule's bootstrap array).
Use HybridUrlHandlingStrategy to prevent Angular from throwing an error when an ng1 route is requested.
Add dummy routes with empty ("") templates to prevent ng1 from rendering 404 page when an ng2 page is requested:
$routeProvider
.when('/some/ng1/path', {template: '<something></something>'})
.when('/some/ng2/path', {template: ''}) // ng2 route
.otherwise({template: '<page-not-found></page-not-found>'});