Angularjs @angular/router在angular.js应用程序内不工作

我正在一点一点地将一个大型angular.js应用程序（使用ui路由器）迁移到angular，我选择使用angular.js应用程序作为基础，一次一个地迁移不同的路由，这样一旦完成，我就可以立即将所有内容切换到angular

以下是我遵循的步骤：

在my main.ts文件中启动angular.js应用程序：

export function bootstrapAngular(extra: StaticProvider[]): any {
  setAngularJSGlobal(angular);
  if (environment.production) {
    enableProdMode();
  }
  return platformBrowserDynamic(extra)
    .bootstrapModule(AppModule)
    .catch(err => console.log(err));
}

const downgraded = angular
  .module('downgraded', [downgradeModule(bootstrapAngular)])
  .directive('appRoot', downgradeComponent({ component: RootComponent, propagateDigest: false }))
  ;

angular.bootstrap(document, ['app', downgraded.name]);

在my index.html中

<app id="app"></app>

到目前为止一切正常。我可以在angular.js应用程序中看到我的angular组件

当我向我的主根组件添加 我可以看到路由器出口渲染，但旁边什么也看不到，即使路由匹配

export const routes: Route[] = [
  { path: 'dashboard', component: TestComponent }
];

当我将浏览器指向/#/仪表板时，我看到的是路由器跟踪：

测试组件只是不渲染

---

我需要一些帮助，想不出还有什么可以尝试的。

首先：如果你想混合并开始将ng1的部分移动到ngx，你需要像以前一样从ngx引导你的ng1应用程序，但不能降级：

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
  (<any>platformRef.instance).upgrade.bootstrap(document.body, ['nameOfNg1App']);
});

至于处理策略，我使用路径前缀将ng1和ngx路由分开，但如果需要，您可以选择更简单的分开方式：

import { UrlHandlingStrategy } from '@angular/router';

export class Ng1Ng2UrlHandlingStrategy implements UrlHandlingStrategy {
    private ng1Urls: string[];

    constructor() {
        this.ng1Urls = [
            'prefix1',
        ];
    }

    shouldProcessUrl(url) {
        url = url.toString();
        return this.ng1Urls.findIndex(ng1Url => new RegExp(`^\/${ng1Url}([|\?|\/](.*)){0,1}$`).test(url)) === -1;
    }

    extract(url) {
        return url;
    }

    merge(url, whole) {
        return url;
    }
}

哦，出于某些原因，我不得不在运行hybrid时坚持使用

#

URL

通过此设置，您可以启动一个ngx应用程序，该应用程序有一个运行ui路由器的容器。在ng1应用程序中，您可以使用降级的ngx组件和服务。 要使ngx路由和ng1路由并行，您的（ngx）app.component.html包括

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

您可以在此处找到此策略的更多详细信息：

所涉及的解决方案：

• 彻底摆脱这一策略
• 禁用初始导航
• 在两种路由配置中创建空路由
• 在ng1应用程序中注入ng2路由器并添加以下逻辑

  angular.module('app').config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('ng2', { });
  
    $urlRouterProvider.otherwise(($injector, $location) => {
      const $state = $injector.get('$state');
      const ng2Routes = ['dashboard'];
      const ng2Router = $injector.get('ng2Router');
      const url = $location.url();
      if (ng2Routes.some(feature => url.startsWith('/' + feature))) {
        $state.go('ng2');
        ng2Router.navigate([url]);
      } else {
        $state.go('messages');
      }
    });
  }]);
  

---

我真的看不出Angular路由器和ui路由器能很好地结合在一起。我可能错了，但你如何看待路由更改由正确的路由器处理？@AdrianBrand你需要两个路由器中的一些逻辑，使它们在不相关时隐藏自己。我尝试了这种方法，但它对我们不起作用，我需要ng1组件作为外壳（它有一些导航条）。我需要主ng2组件位于主ng1组件内部。下面是我试图实现的一个图表：红色是ng1，蓝色是ng2。我设法使组件呈现良好，我的问题是ng2主组件内的路由不起作用，html呈现，但在其路由器出口中没有附加任何内容：（由于我的努力，我奖励了这个答案。请看下面我的解决方案我在这里注入“ng2Router”？您需要首先提供它。platformBrowserDynamic（）.bootstrapModule（CoreModule）。然后（ref=>{angular.module（'app'）.factory（'ng2Router'，降级注入（路由器））（ref.instance）。upgrade.bootstrap。）（document.body，['app']；}）；你能分享一下你的angular2路线吗？

@NgModule({
  imports  : [
    RouterModule.forRoot(routes, {useHash: true})
  ],
  exports  : [
    RouterModule
  ],
  // provide custom UrlHandlingStrategy to separate AngularJs from Angular routes
  providers: [
    {
      provide : UrlHandlingStrategy,
      useClass: Ng1Ng2UrlHandlingStrategy
    }
  ]
})
export class AppRoutingModule {
}

import { UrlHandlingStrategy } from '@angular/router';

export class Ng1Ng2UrlHandlingStrategy implements UrlHandlingStrategy {
    private ng1Urls: string[];

    constructor() {
        this.ng1Urls = [
            'prefix1',
        ];
    }

    shouldProcessUrl(url) {
        url = url.toString();
        return this.ng1Urls.findIndex(ng1Url => new RegExp(`^\/${ng1Url}([|\?|\/](.*)){0,1}$`).test(url)) === -1;
    }

    extract(url) {
        return url;
    }

    merge(url, whole) {
        return url;
    }
}

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

angular.module('app').config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  $stateProvider.state('ng2', { });

  $urlRouterProvider.otherwise(($injector, $location) => {
    const $state = $injector.get('$state');
    const ng2Routes = ['dashboard'];
    const ng2Router = $injector.get('ng2Router');
    const url = $location.url();
    if (ng2Routes.some(feature => url.startsWith('/' + feature))) {
      $state.go('ng2');
      ng2Router.navigate([url]);
    } else {
      $state.go('messages');
    }
  });
}]);