7

我们正在使用升级适配器来设置 Angular 1/2 Hybrid 应用程序。我们正在像这样引导应用程序（如 Angular 文档https://angular.io/guide/upgrade中所述）：

class AppModule {
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['ngApp'], { strictDi: true });
  }
}

对于我们的 HMR 设置，我们使用 Angular CLI 并遵循这些说明https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/configure-hmr.md

问题是，当 HMR 运行并尝试再次运行该引导代码时，它会尝试重新引导 Angular 1 应用程序，这会导致 Angular 1 模块已被引导的错误。

如果尚未引导 angular 1，则尝试仅有条件地运行该代码也行不通，因为虽然组件确实刷新，但它不会重新加载新的更新。

我们采用了一些似乎可行但不太理想的方法，即删除 angular 1 应用程序元素并重新创建它，以便引导程序不会出错。

像这样的东西：

ngDoBootstrap() {
    // reinitialize angular 1 app
    var element = document.getElementById('ng-app');
    let windowRef = <any>window;

    if(!windowRef.appContents) {
        windowRef.appContents = element.innerHTML;
    } else {
        document.body.removeChild(element);
        element = document.createElement('div');
        element.id = 'ng-app';
        element.innerHTML = windowRef.appContents;
        document.body.appendChild(element);
    }
    this.upgrade.bootstrap(element, ['ngApp'], { strictDi: true });
}

虽然有点 hacky，但至少似乎可以让 HMR 正常工作。然而，因为它导致整个 angular 1 应用程序重新启动，而不是仅仅刷新更改的模块，这仅比简单的 livereload 快一点。

有没有更好的方法来重新启动混合应用程序以允许 HMR 工作？

4

0 回答 0