Подстановочные дорожки при смешивании AngularJS и Angular 2 routing

Question

Я не знаю, как сделать маршрутную маршрутизацию в приложении, которое частично обновлено с AngularJS до ng2.

В общем, вы смешиваете оба вида маршрутизации, как это:

Первого шаг, чтобы иметь двойную установку маршрутизатора добавить угловой корень компонента, содержащий один выход для каждого маршрутизатора. AngularJS будет использовать ng-view, а Angular будет использовать роутер-выход. Когда используется маршрутизатор , другая розетка будет пуста.

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

В Угловое 2 вы можете указать путь по шаблону, как это:

{путь: '**', компонент: PageNotFoundComponent}

В AngularJS вы можете имеют подстановочный путь следующим образом:

$routeProvider 
    .otherwise({ 
    template: '<page-not-found></page-not-found>', 
    }); 

Когда я складываю все вместе, и путь не обрабатывается, как избежать того, чтобы оба маршрутизатора испускали <page-not-found>?

Answer 1

Я могу подтвердить, что <div ng-view></div> работает в угловом компоненте 2 AppComponent, если все остальное настроено правильно. (Добавить AppComponent в AppModulebootstrap).

Используйте HybridUrlHandlingStrategy, чтобы предотвратить отклонение Angular от ошибки при запросе маршрута ng1.

Добавить фиктивные маршруты с пустыми («») шаблонами для предотвращения ng1 от предоставления 404 страницы, когда страница NG2 предлагается:

$routeProvider 
    .when('/some/ng1/path', {template: '<something></something>'}) 
    .when('/some/ng2/path', {template: ''}) // ng2 route 
    .otherwise({template: '<page-not-found></page-not-found>'});