Wildcard paths while mixing AngularJS and Angular 2 routing

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> ?

Alexander Taylor Alexander Taylor · Accepted Answer · 2017-02-22T20:32:53

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>'});

Wildcard paths while mixing AngularJS and Angular 2 routing

1 Answers