【问题标题】:Can an Angular 7/1.x hybrid app support HMR?Angular 7/1.x 混合应用程序可以支持 HMR 吗?
【发布时间】:2019-05-30 20:27:02
【问题描述】:

我正在尝试使用 downgradeModule 策略在混合 Angular 应用程序上实现 HMR,但它失败了。我是从另一个问题Can an Angular 5/1.x hybrid app support HMR? 来到这里的,因为没有可接受的答案,而且我认为@scipper 答案不起作用(解释如下)。
我用 HMR 设置了 webpack 配置(不是 ng-cli,自定义配置)(添加了 new webpack.HotModuleReplacementPlugin(),添加了 devServer.hot:true 和其他东西),我可以看到它正在工作,我的条目文件正在重新加载,而没有使用新源重新加载整页并且 webpack 很好地应用了热更新,但是 angular 和 angularjs 应用程序无法正常工作(使用旧的缓存代码)。
我的计划是:
1) 将模块热接受添加到入口文件中。
2) 如果存在,则销毁 angular.js 应用程序(使用 $rootScope 销毁?)。
3) 如果存在,则销毁根 angular.js 应用程序节点。
4) 使用

之类的代码构建 Angular 模块
// bootstrap you new Angular 7 main module
const bootstrapFn = (extraProviders) => {
  const platformRef = platformBrowserDynamic(extraProviders);
  return platformRef.bootstrapModule(MyAngularSevenModule);
};
const downgradedModule = downgradeModule(bootstrapFn);

5) 调用或重新调用 angularjs 模块和依赖项 + 我的 angular 模块 - 我认为这是我的主要问题。
6) 引导 angularjs 应用程序(或 $compile + $digest)。

已经试过了:
- https://github.com/PatrickJS/angular-hmr - 由于 downgradeModule 策略(根节点是 ajs)而不起作用。
- https://github.com/vitaliy-bobrov/angular-hot-loader - 由于提供者和其他拦截器未实现而导致的很多错误。
- https://github.com/noppa/ng-hot-reload

我预计引导程序会更新缓存的角度实体,但在 hmr 重新加载 angular 后使用旧的控制器/组件/指令(在源选项卡中使用新代码)。
有什么建议吗?

【问题讨论】:

    标签: javascript angularjs angular webpack-hmr


    【解决方案1】:

    我在入口文件中设置错误,@scipper 是对的,它正在工作。但是通过这种策略,我们正在重新加载整个应用程序(并丢失任何状态),我想找到仅重新启动更改部分的解决方案。

    【讨论】:

    • 您能准确解释一下您为实现这一目标所做的工作吗?
    猜你喜欢
    • 2018-08-11
    • 2019-02-01
    • 2016-05-23
    • 1970-01-01
    • 1970-01-01
    • 2020-01-07
    • 1970-01-01
    • 1970-01-01
    • 2012-09-29
    相关资源
    最近更新 更多