{"id":15705699,"url":"https://github.com/ofhouse/babel-plugin-ng-hot-reload","last_synced_at":"2025-05-12T18:38:42.512Z","repository":{"id":96085481,"uuid":"223782931","full_name":"ofhouse/babel-plugin-ng-hot-reload","owner":"ofhouse","description":"Hot reloading for AngularJS apps via babel plugin.","archived":false,"fork":false,"pushed_at":"2020-09-11T15:54:59.000Z","size":1758,"stargazers_count":5,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-10T14:28:46.303Z","etag":null,"topics":["angularjs","babel-plugin","hot-module-replacement","hot-reload"],"latest_commit_sha":null,"homepage":"https://dev.to/ofhouse/angularjs-hot-module-replacement-with-babel-plugin-176f","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ofhouse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-24T17:29:50.000Z","updated_at":"2021-12-14T13:42:35.000Z","dependencies_parsed_at":"2023-07-25T22:47:00.354Z","dependency_job_id":null,"html_url":"https://github.com/ofhouse/babel-plugin-ng-hot-reload","commit_stats":{"total_commits":37,"total_committers":3,"mean_commits":"12.333333333333334","dds":0.3783783783783784,"last_synced_commit":"48deef50f0ce6e0be5f23afd5f2fb0827a7c4e21"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ofhouse%2Fbabel-plugin-ng-hot-reload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ofhouse%2Fbabel-plugin-ng-hot-reload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ofhouse%2Fbabel-plugin-ng-hot-reload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ofhouse%2Fbabel-plugin-ng-hot-reload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ofhouse","download_url":"https://codeload.github.com/ofhouse/babel-plugin-ng-hot-reload/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230859362,"owners_count":18291153,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angularjs","babel-plugin","hot-module-replacement","hot-reload"],"created_at":"2024-10-03T20:19:08.085Z","updated_at":"2024-12-22T16:55:11.496Z","avatar_url":"https://github.com/ofhouse.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🔥 babel-plugin-ng-hot-reload [![Build status](https://travis-ci.org/ofhouse/babel-plugin-ng-hot-reload.svg?branch=master)](https://travis-ci.org/ofhouse/babel-plugin-ng-hot-reload)\n\nA babel plugin which enables hot module replacement in AngularJS applications.\u003cbr /\u003e\nThe plugin is based on the [ng-hot-reload](https://github.com/noppa/ng-hot-reload) webpack loader but is rewritten as babel plugin so that it is compatible with es-module syntax and every bundler which supports the hot-replacement API (e.g. [webpack](https://webpack.js.org/) or [parcel](https://parceljs.org/)).\n\n## Getting started\n\n\u003e To see it in action you can simply checkout the examples on CodeSandbox:\n\u003e\n\u003e - [Webpack / JavaScript demo on CodeSandbox ](https://codesandbox.io/s/github/ofhouse/babel-plugin-ng-hot-reload/tree/master/examples/javascript-webpack)\n\u003e - [Webpack / TypeScript demo on CodeSandbox](https://codesandbox.io/s/github/ofhouse/babel-plugin-ng-hot-reload/tree/master/examples/typescript-webpack)\n\u003e - [Parcel / TypeScript demo on CodeSandbox](https://codesandbox.io/s/github/ofhouse/babel-plugin-ng-hot-reload/tree/master/examples/typescript-parcel) (There is an issue with HTML import, see: [FAQ](#known-issues-with-parcel))\n\n```sh\nnpm i -D babel-plugin-ng-hot-reload     # npm or\nyarn add -D babel-plugin-ng-hot-reload  # yarn\n```\n\nAdd the following to your `babelrc.js` file:\n\n```js\n// without options\nmodule.exports = {\n  plugins: ['babel-plugin-ng-hot-reload'],\n};\n\n// with options\nmodule.exports = {\n  plugins: [\n    [\n      'babel-plugin-ng-hot-reload',\n      {\n        angularGlobal: false,\n        forceRefresh: true,\n        preserveState: true,\n        angularReference: \"require('angular'), angular\",\n      },\n    ],\n  ],\n};\n```\n\n### Options\n\n| Option             | Default                                  | Description                                                                                                                                                                                                                                                                                                                                                                  |\n| ------------------ | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `angularGlobal`    | `false` (false or string)                | Define whether angular is provided as global variable. Set to `'angular'` when `angular` is your global variable.                                                                                                                                                                                                                                                            |\n| `forceRefresh`     | `true` (boolean)                         | Whether to reload window automatically when a change in source files can't be hot-reloaded. Note that Webpack DevServer also has its own option hotOnly, which should also be configured correctly to get the behavior you want when hot reloading fails.\u003cbr /\u003e([ng-hot-reload option](https://github.com/noppa/ng-hot-reload#client-options))                               |\n| `preserveState`    | `true` (boolean)                         | If true, the library attempts to preserve some state in scope and controller instances when they are reloaded. Preserving state is an experimental feature and quite \"hackish\" so it may cause problems in some cases. Setting this to `false` might help if you run into weird errors.\u003cbr /\u003e([ng-hot-reload option](https://github.com/noppa/ng-hot-reload#client-options)) |\n| `angularReference` | `\"require('angular'), angular\"` (string) | JavaScript expression that will be evaluated to get a reference to angular.\u003cbr /\u003e([ng-hot-reload option](https://github.com/noppa/ng-hot-reload#client-options))                                                                                                                                                                                                             |\n\n## FAQ\n\n### Use together with `@babel/preset-env`\n\nThis plugin should work nicely together with the [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) plugin.\nIn opposite to the original ng-hot-reload webpack-loader it's **not** required to transpile your code to commonjs modules:\n\n```js\nmodule.exports = {\n  presets: [\n    [\n      '@babel/preset-env',\n      {\n        modules: false, // Don't transpile the modules (default)\n      },\n    ],\n  ],\n  plugins: ['babel-plugin-ng-hot-reload'],\n};\n```\n\nFor an example check out the [Webpack / Javascript example](./examples/javascript-webpack/).\n\n### Use AngularJS as global variable\n\nPer default the plugin looks for imports of `'angular'`-package and only adds the hot-module-reload code to this modules.\nHowever in some environments angular is used as a global variable without being imported, so the plugin has a `angularGlobal` setting which supports the use of angular as a global variable:\n\n```js\n// Default mode: Add hot-module-reload only to files which import 'angular'\n// app.module.js\nimport * as angular from 'angular'; // or\nimport angular from 'angular'; // or\nimport 'angular';\n\nangular.module('hot-reload-demo', []);\n\n////////////////////////////////////////////////////////////////////////////////\n\n// Setting angularGlobal option: Use `angular` as global variable\n// .babelrc.json\nmodule.exports = {\n  plugins: [\n    [\n      'babel-plugin-ng-hot-reload',\n      {\n        angularGlobal: 'angular', // Name of the global angular variable\n      },\n    ],\n  ],\n};\n\n// app.module.js\nangular.module('hot-reload-demo', []);\n```\n\nFor an example check out the [Webpack / Javascript example](./examples/javascript-webpack/).\n\n### Use together with `ngAnnotate`\n\nYou can also use the plugin together with [`babel-plugin-angularjs-annotate`](https://github.com/schmod/babel-plugin-angularjs-annotate).\n\nFor an example check out the [Webpack / TypeScript example](./examples/typescript-webpack/).\n\n### Lazy-loading with `oclazyload`\n\nThis plugin also works with the lazy-loading library [ocLazyLoad](https://oclazyload.readme.io/).\n\nFor an example check out the [Webpack / TypeScript example](./examples/typescript-webpack/).\n\n### Known issues with parcel\n\nSince this plugin only requires babel, you can use every build tool which supports hot-module-replacement.\u003cbr /\u003e\nYou can check out the [Parcel / TypeScript example](./examples/typescript-parcel/) to see how it works with other bundlers than webpack.\n\nUnfortunately there is currently an issue related to parcel:\n\n- No hot-module-replacement for HTML templates ([parcel#943](https://github.com/parcel-bundler/parcel/issues/943))\n\n### Browser-compatibility\n\nThe plugin is compatible with the latest versions of Chrome, Firefox and IE11.\n\n## Author\n\n\u003c!-- prettier-ignore-start --\u003e\n\n| [\u003cimg src=\"https://avatars0.githubusercontent.com/u/472867?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFelix Haus\u003c/b\u003e\u003c/sub\u003e](https://github.com/ofhouse)\u003cbr /\u003e\u003csub\u003e[Website](https://felix.house/) • [Twitter](https://twitter.com/ofhouse)\u003c/sub\u003e|\n| :---: |\n\n\u003c!-- prettier-ignore-end --\u003e\n\n## License\n\nMIT - see [LICENSE](./LICENSE) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fofhouse%2Fbabel-plugin-ng-hot-reload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fofhouse%2Fbabel-plugin-ng-hot-reload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fofhouse%2Fbabel-plugin-ng-hot-reload/lists"}