@ angular / router无法在angular.js应用程序中运行

Question

我正在逐步将一个大的angular.js应用程序（使用ui-router）迁移到angular，我选择以angular.js应用程序为基础，一次迁移不同的路由，一旦我完成，就立即将所有内容切换为角度。

这些是我遵循的步骤：

在我的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]);

在我的index.html内

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

这很好。

在我的主要angular.js组件内部，添加了降级的主要Angular组件的标签：

<div class="app__view" id="appContent">
  <ui-view></ui-view>
  <app-root></app-root>
</div>

这是我的主模块的配置方式

const COMPONENTS = [
  TestComponent,
  RootComponent,
];

@NgModule({
  declarations: COMPONENTS,
  imports: [
    BrowserModule,
    NxModule.forRoot(),
    RouterModule.forRoot(routes, {
      initialNavigation: 'enabled',
      useHash: true
    })
  ],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/' }
  ],
  entryComponents: COMPONENTS,
  exports: COMPONENTS
})
export class AppModule {
  ngDoBootstrap(): void { }
}

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

当我将其添加到我的主根组件时出现问题 即使路线匹配，我也可以看到路由器出口的渲染，但没有显示在其旁边。

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

当我将浏览器指向 /＃/ dashboard 时，这是我看到的路由器跟踪：

测试组件无法渲染。

我需要一些帮助，想不出要尝试的其他方法。

Answer 1

解决方案涉及：

• 完全摆脱UrlHandlingStrategy
• 禁用initialNavigation
• 在两种路由配置中创建空路由

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