标签: webpack-hmr

在Angular中,有一种方法可以在模块热重新加载后保留应用程序状态吗？与VueJS中发生的情况类似:

到目前为止,我已经让HMR在几个教程之后工作了,但它所做的只是重新加载应用程序而不进行实际的页面刷新.快满了,是的.但仍然不是它可能的地方.

有没有人得到这个实际工作？

PS:它与https://github.com/beeman/tutorial-angular-cli-hmr/issues/4有关

我越来越喜欢的消息[HMR] Waiting for update signal from WDS...和[WDS] Hot Module Replacement enabled.在开发工具的控制台两次。这是为什么？难道我做错了什么？

我的webpack.config.js档案：

...
module.exports = () => {
    return {
        entry: {
            bundle: './src/app/App.jsx',
            sw: './src/app/sw.js'
        },
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, 'dist'),
            globalObject: 'this'
        },
        devtool: 'source-map',
        devServer: {
            contentBase: path.resolve(__dirname, 'dist'),
            historyApiFallback: true
        },
...
        node: {
            fs: 'empty',
            net: 'empty',
            tls: 'empty'
        }
    };
};

版本："webpack": "^4.27.1"，"react-hot-loader": "^4.6.0"，"webpack-dev-server": "^3.1.10"

我有以下功能的文件@/lang/index.js：

async function fetchMessages(locale) {
  const module = await import(/*
    webpackChunkName: "lang/[request]",
    webpackExclude: /index/
  */ `@/lang/${locale}`)

  return module.default
}

我想热重载此功能导入的模块。我尝试了几种不同的方法，module.hot.accept()但没有成功。

这是我无法正常运行的同一文件末尾的热重装代码：

if (process.env.NODE_ENV !== "production" && module.hot) {
  module.hot.accept(["./en-US"], () => {
    const { locale } = i18n
    fetchMessages(locale).then((strings) => {
      i18n.setLocaleMessage(locale, strings)
    })
  })
}

有什么想法吗？当检测到更改时，我想热重载我的语言文件。

谢谢！

我希望将 HMR 添加到纯 Node.js 代码或使用原生 ES 模块编写的浏览器代码中。

没有 Babel，没有 Webpack，没有转译，只有普通的 JS 文件和 ES 模块import和export调用。

我们可以在普通的 Node 或浏览器中做 HMR 吗？

受影响的包裹

HMR + 常春藤

这是回归吗？

常春藤之前，它有效

描述

好像 IVY 和 HMR 不能很好地一起玩？但是我已经看到他们的票已经关闭了，所以我想这应该是可能的。我在代码更改后重新加载：

未处理的承诺拒绝：类型 AppComponent 是 2 个模块声明的一部分：AppModule 和 AppModule！请考虑将 AppComponent 移至导入 AppModule 和 AppModule 的更高模块。您还可以创建一个新的 NgModule 来导出并包含 AppComponent，然后在 AppModule 和 AppModule 中导入该 NgModule。Type Background 是 2 个模块声明的一部分：AppModule 和 AppModule！请考虑将 Background 移至导入 AppModule 和 AppModule 的更高模块。您还可以创建一个新的 NgModule 来导出并包含 Background，然后在 AppModule 和 AppModule 中导入该 NgModule。

...

我们可以看到其他人如何更好地进行调查：https : //www.gitmemory.com/issue/storybookjs/storybook/8494/551763214

当前环境

角度版本：

ng 9.0.1

cli 9.0.1

到目前为止,我已成功完成以下工作:

✓HMR(热模块重新加载)设置
✓角度(5)和材料运行良好
✓打开一个对话框(下面的代码片段)

// ...
constructor(private dialog: MatDialog){}
//...
public openDialog(){
    this.dialogRef = this.dialog.open(someDialogComponent, {
      width: '300px'
    });
}

✓在对话框或对话框的父控制器上进行更改
✓MMR被触发(yay)
✖对话框挂起死机状态,由于对话框和背景被"卡住"而无法点击,页面基本上被冻结

我试图挂钩ngOnInit和ngOnDestroy在父或对话框控制器中关闭对话框引用,如果存在,我也尝试过dialog.closeAll(),但这没有用.此外,理想情况下,对话框不必关闭,但我似乎无法修复此僵尸对话框问题.

有没有遇到过这个？

我已经阅读了很多有关此错误的信息，但找不到解决方案。

热重载不起作用，我有一个错误：

EventSource 的响应具有不是“text/event-stream”的 MIME 类型（“text/html”）。中止连接。

"webpack": "^2.5.1",
"webpack-dev-middleware": "^1.8.4",
"webpack-hot-middleware": "^2.22.1",

我找到了https://github.com/webpack-contrib/webpack-hot-middleware/issues/26但这对我没有帮助

你知道如何摆脱这个错误吗？

我的 webpack.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const project = require('../project.config')

const inProject = path.resolve.bind(path, project.basePath)
const inProjectSrc = (file) => inProject(project.srcDir, file)

const __DEV__ = project.env === 'development'
const __TEST__ = project.env === 'test'
const __PROD__ = project.env === 'production'

const config = {
  entry: {
    normalize: [
      inProjectSrc('normalize'),
    ],
    main: [ …

HMR（热模块更换）是一项出色的功能，如果不存在“路由解析”（请参阅​​下文），该功能将正常运行。

如果我resolve在这里删除：

  {
    path: 'new',
    component: BookNewComponent,
    data: {
      breadcrumb: 'book.new.breadcrumb'
    },
    resolve: {
      staticData: StaticDataResolve
    }
  },

HMR重新工作。如果resolve存在-> HMR将重新加载整个应用程序，而不是特定组件。

我怎么解决这个问题？

我有一个项目结构，如：

.
+-- Common
|   +-- MyCommonVueComponent.Vue
+-- MainProject
|   +-- webpack.config.js
|   +-- package.json
|   +-- node_modules
|   +-- src

当我从控制台构建时，webpack 没有抱怨，因为对于从 Common 导入到 MainProject 的组件，它似乎具有指向 node_modules 文件夹的正确路径。当我尝试在浏览器中调试 Vue.js 应用程序时，我收到以下错误：

../Common/MyCommonVueComponent.Vue
Module not found: Error: Can't resolve 'vue-hot-reload-api' in 'D:\Projects\Cb\CommonVue'

我已经添加：

resolveLoader: {
        modules: [path.resolve(__dirname, './node_modules')],
    },

在控制台中运行 webpack 时，这似乎确实解决了路径问题，但在浏览器中调试时却没有。任何帮助表示赞赏。希望已经设置了类似项目结构的人可以有所启发！

我已经使用 TypeORM 一段时间了，没有出现任何问题，但是在进行 API 调用时突然弹出此错误：

EntityMetadataNotFound: No metadata for "BusinessApplication" was found.
    at new EntityMetadataNotFoundError (C:\Users\Robbie\Code\fit-society\node_modules\typeorm\error\EntityMetadataNotFoundError.js:10:28)
    at Connection.getMetadata (C:\Users\Robbie\Code\fit-society\node_modules\typeorm\connection\Connection.js:336:19)
    at EntityManager.<anonymous> (C:\Users\Robbie\Code\fit-society\node_modules\typeorm\entity-manager\EntityManager.js:459:44)
    at step (C:\Users\Robbie\Code\fit-society\node_modules\tslib\tslib.js:136:27)
    at Object.next (C:\Users\Robbie\Code\fit-society\node_modules\tslib\tslib.js:117:57)
    at C:\Users\Robbie\Code\fit-society\node_modules\tslib\tslib.js:110:75
    at new Promise (<anonymous>)
    at Object.__awaiter (C:\Users\Robbie\Code\fit-society\node_modules\tslib\tslib.js:106:16)
    at EntityManager.find (C:\Users\Robbie\Code\fit-society\node_modules\typeorm\entity-manager\EntityManager.js:456:24)
    at module.exports../src/pages/api/business-applications/[id].ts.__webpack_exports__.default.Object (C:\Users\Robbie\Code\fit-society\.next\server\static\development\pages\api\business-applications\[id].js:1648:65)
    at process._tickCallback (internal/process/next_tick.js:68:7)

当调用此代码时会发生这种情况：

EntityMetadataNotFound: No metadata for "BusinessApplication" was found.
    at new EntityMetadataNotFoundError (C:\Users\Robbie\Code\fit-society\node_modules\typeorm\error\EntityMetadataNotFoundError.js:10:28)
    at Connection.getMetadata (C:\Users\Robbie\Code\fit-society\node_modules\typeorm\connection\Connection.js:336:19)
    at EntityManager.<anonymous> (C:\Users\Robbie\Code\fit-society\node_modules\typeorm\entity-manager\EntityManager.js:459:44)
    at step (C:\Users\Robbie\Code\fit-society\node_modules\tslib\tslib.js:136:27)
    at Object.next (C:\Users\Robbie\Code\fit-society\node_modules\tslib\tslib.js:117:57)
    at C:\Users\Robbie\Code\fit-society\node_modules\tslib\tslib.js:110:75
    at new Promise (<anonymous>)
    at Object.__awaiter (C:\Users\Robbie\Code\fit-society\node_modules\tslib\tslib.js:106:16)
    at …