Question

我们正在使用升级适配器来设置Angular 1/2 Hybrid应用程序。我们像这样引导应用程序（如Angular docs 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模块已经被引导错误。

如果没有引导角度1，尝试仅有条件地运行该代码也不起作用，因为当组件刷新时，它不会重新加载新的更新。

我们已经使用了似乎有用的东西，但是不太理想，即删除了angular 1 app元素并重新创建它，以便引导程序不会出错。

这样的事情：

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工作？

使用Angular 2升级版启用热模块替换

0 个答案: