ofhouse / babel-plugin-ng-hot-reload Goto Github PK

The following code cannot be processed:

import * as angular from 'angular';

export * from './Widget';

Hi, I'm trying to use this plugin with Vite, but it doesn't work, giving me error:
require is not defined.

Here is the configuration:

vite.config.js:

import babel from 'vite-plugin-babel'
...
    plugins: [
      babel({
        babelConfig: {
          plugins: [
            [
              "babel-plugin-ng-hot-reload",
              {
                angularGlobal: "angular",
              },
            ],
          ],
        },
      }),
    ]
...

And here is the generated code where error happens:

And here's index.js:

import { bootstrap } from "angular";

import KeycloakService from "./app/scripts/services/KeycloakService";

const component = () => {
  const element = document.createElement("div");

  element.style.height = "100%";

  element.innerHTML = `
            <app></app>
      `;

  return element;
};

(async () => {
  try {
    await KeycloakService.initKeycloak();
  } catch (error) {
    console.error(error);
    // TODO: handle this better way.
    alert(
      "Failed to initialize application. Please contact support"
    );
    return;
  }

  const { default: app } = await import("./app/app");
  angular.element(() => {
    bootstrap(document, [app.name]);
  });
})();

document.body.appendChild(component());

It's definetely not an issue with vite-babel-plugin(owlsdepartment/vite-plugin-babel#10), because it works fine when I don't use your plugin.

Hi there,

I've trying to add hot reloading to an app which uses angularJS and react (using react2anglar) using the following config:
"babel-plugin-ng-hot-reload": "^3.2.1", "webpack": "^4.46.0", "webpack-babel-jest": "^1.0.4", "webpack-cli": "^4.6.0", "webpack-dev-server": "^3.11.2", "angular": "^1.5.11" "react2angular": "^4.0.4", "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3", "react": "^16.13.1", "react-dom": "^16.13.1",

This is the rule i'm using in my webpack config:
{ loader: 'babel-loader', options: { cacheDirectory: true, presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react'], plugins: [ '@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime', isDevelopment && 'babel-plugin-ng-hot-reload', isDevelopment && 'react-refresh/babel' ].filter(Boolean) } }

I've also added these 2 plugins isDevelopment && new ReactRefreshWebpackPlugin(), isDevelopment && new webpack.HotModuleReplacementPlugin() to the plugins key in the webpack config. devServer is set to hot and the entry is identical to webpack config in the example folder.

Fast refresh on the react side works. But for some reason, every time I make a change to an angular directive, whether to the html or the js file, the directive gets destroyed instead of getting hot reloaded. The console shows that HMR has recognized which file changed:

[WDS] App hot update... log.js:24 [HMR] Checking for updates on the server... bootstrap:82 XHR finished loading: GET "http://localhost:9002/e9e1ca62ca7acc5af561.hot-update.json". (anonymous) @ raven.js:1485 push../src/services/xhrInterceptors.ts.XMLHttpRequest.send @ xhrInterceptors.ts:35 (anonymous) @ bootstrap:82 hotDownloadManifest @ bootstrap:73 hotCheck @ bootstrap:316 check @ dev-server.js:14 (anonymous) @ dev-server.js:55 emit @ events.js:153 reloadApp @ reloadApp.js:23 warnings @ client:147 (anonymous) @ socket.js:47 sock.onmessage @ SockJSClient.js:67 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:891 SockJS._transportMessage @ sockjs.js:889 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2965 log.js:24 [HMR] Updated modules: log.js:24 [HMR] - ./src/path/to/myDirective.html log.js:24 [HMR] - ./src/path/to/myDirective.js log.js:24 [HMR] App is up to date.

But the component actually gets removed from the DOM tree.

Any idea what I could be doing wrong?