11

我正在将一个大的 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 应用程序中看到我的 angular 组件。

当我将其添加到我的主根组件时，问题就出现了，即使路由匹配，我也可以看到路由器插座渲染，但旁边没有任何内容。

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

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

路由器追踪

并且测试组件只是不渲染。

在此处输入图像描述

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

4

2 回答 2

5

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

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

你应该在 app.component.html 中提供 ui-router 的入口点：

<div ui-view></div>

您还需要提供一个 url 处理策略来告诉 angular，要处理哪些路由。我有一个 AppRoutingModule，它是由 AppModule 导入的。这个提供了处理程序：

@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 {
}

以及处理策略，我使用路径前缀将 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;
    }
}

哦，由于某些原因，我不得不#在运行混合时坚持使用 URL。

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

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

您可以在此处找到此策略的更多详细信息：https ://blog.nrwl.io/upgrading-angular-applications-upgrade-shell-4d4f4a7e7f7b

于 2018-09-12T12:48:34.903 回答
1

涉及的解决方案：

  • 彻底摆脱 UrlHandlingStrategy
  • 禁用初始导航
  • 在两种路由配置中创建空路由

  • 在 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');
    }
  });
}]);
于 2018-09-17T07:23:30.337 回答