小编Daf*_*onk的帖子

我们正在使用升级适配器来设置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尚未被引导,则尝试仅有条件地运行该代码也将不起作用,因为虽然组件刷新,但它不会使用新更新重新加载.

我们已经使用了似乎有用的东西,但是不太理想,它正在移除角度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工作？