【发布时间】: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) 使用
// 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