{"action":"opened","issue":{"url":"https://api.github.com/repos/vitaliy-bobrov/angular-hot-loader/issues/26","repository_url":"https://api.github.com/repos/vitaliy-bobrov/angular-hot-loader","labels_url":"https://api.github.com/repos/vitaliy-bobrov/angular-hot-loader/issues/26/labels{/name}","comments_url":"https://api.github.com/repos/vitaliy-bobrov/angular-hot-loader/issues/26/comments","events_url":"https://api.github.com/repos/vitaliy-bobrov/angular-hot-loader/issues/26/events","html_url":"https://github.com/vitaliy-bobrov/angular-hot-loader/issues/26","id":249793537,"number":26,"title":"Can't make the hot swapping work","user":{"login":"NeverwinterMoon","id":1917308,"avatar_url":"https://avatars3.githubusercontent.com/u/1917308?v=4","gravatar_id":"","url":"https://api.github.com/users/NeverwinterMoon","html_url":"https://github.com/NeverwinterMoon","followers_url":"https://api.github.com/users/NeverwinterMoon/followers","following_url":"https://api.github.com/users/NeverwinterMoon/following{/other_user}","gists_url":"https://api.github.com/users/NeverwinterMoon/gists{/gist_id}","starred_url":"https://api.github.com/users/NeverwinterMoon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/NeverwinterMoon/subscriptions","organizations_url":"https://api.github.com/users/NeverwinterMoon/orgs","repos_url":"https://api.github.com/users/NeverwinterMoon/repos","events_url":"https://api.github.com/users/NeverwinterMoon/events{/privacy}","received_events_url":"https://api.github.com/users/NeverwinterMoon/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-08-12T06:50:07Z","updated_at":"2017-08-12T06:50:07Z","closed_at":null,"body":"I understand, this is more of a SO question, but I've seen other people being helped here, so I decided to give it a go.\r\n\r\n\r\n`webpack.config.coffee`:\r\n```\r\nentry:\r\n  booking: './src/app/index.js'\r\nplugins: [\r\n  new webpack.LoaderOptionsPlugin debug: true\r\n  new HtmlWebpackPlugin\r\n    filename: 'index.html'\r\n    template: './src/index.jade'\r\n    chunks: ['booking']\r\n  new webpack.HotModuleReplacementPlugin()\r\n  new webpack.NamedModulesPlugin()\r\n]\r\nresolve:\r\n  extensions: ['.ts', '.js']\r\n  modules: [\r\n    'node_modules'\r\n    path.resolve __dirname, 'src'\r\n  ]\r\nmodule:\r\n  rules: [\r\n      {\r\n        test: /\\.js$/\r\n        exclude: /node_modules/\r\n        use: jsLoaders\r\n      }\r\n      {\r\n        test: /\\.ts$/\r\n        exclude: /node_modules/\r\n        use: [\r\n          {\r\n            loader: 'angular-hot-loader'\r\n            options:\r\n              rootElement: 'body'\r\n              log: true\r\n          }\r\n          'babel-loader'\r\n        ]\r\n      }\r\n      {\r\n        test: /\\.js$/\r\n        exclude: /node_modules/\r\n        use: [\r\n          {\r\n            loader: 'angular-hot-loader'\r\n            options:\r\n              rootElement: 'body'\r\n              log: true\r\n            }\r\n            {\r\n            loader: 'awesome-typescript-loader'\r\n            options:\r\n              useBabel: true\r\n            }\r\n        ]\r\n      }\r\n  ]\r\n\r\ndevServer:\r\n  hot: true\r\n```\r\n\r\nMy babel is configured through `.babelrc`, so ng annotations are done there:\r\n```\r\n{\r\n  \"presets\": [\r\n    \"es2015\"\r\n  ],\r\n  \"plugins\": [\r\n    \"babel-plugin-transform-function-bind\",\r\n    \"babel-plugin-transform-class-properties\",\r\n    \"babel-plugin-angularjs-annotate\"\r\n  ]\r\n}\r\n```\r\n\r\nThe entry point looks like this:\r\n\r\n```\r\n'use strict'\r\n\r\nimport angular from 'angular'\r\nimport mobile from 'components/mobile/mobile'\r\nimport Util from './../util/util'\r\nimport 'app/index.scss'\r\nimport 'app/vendor.scss'\r\n\r\nangular.module('miki', [\r\n  mobile.name\r\n])\r\n\r\nangular.bootstrap(document.body, ['miki'], {\r\n  strictDi: false\r\n})\r\n```\r\n\r\nAnd this is a part `components/mobile/mobile.js`\r\n\r\n```\r\n'use strict'\r\n\r\nimport angular from 'angular'\r\n\r\nimport bookingPage from 'app/booking/booking'\r\n\r\nexport default angular.module('miki-main', [\r\n  bookingPage.name\r\n])\r\n```\r\n\r\nThis is part of `app/booking/booking.js`:\r\n\r\n```\r\n'use strict'\r\n\r\nimport angular from 'angular'\r\nimport uiRouter from 'angular-ui-router'\r\nimport BookingController from './booking.controller'\r\nimport bookingTemplate from './booking.html'\r\n\r\nexport default angular.module('booking', [\r\n  uiRouter\r\n])\r\n  .controller('BookingController', BookingController)\r\n  .config(config)\r\n\r\nfunction config($stateProvider) {\r\n  'ngInject'\r\n\r\n\r\n  $stateProvider\r\n  .state('app.booking', {\r\n      url: ''\r\n      , views: {\r\n        'content@': {\r\n          template: bookingTemplate\r\n          , controller: BookingController\r\n        }\r\n      }\r\n  })\r\n}\r\n```\r\n\r\nSo, first of all, I had to change configuration of the project a bit to make AHL detect my ng modules - the following syntax was used everyhwere in the project before the change:\r\n\r\n```\r\nimport { module } from 'angular'\r\n\r\nexport default module('booking', [])\r\n```\r\n\r\nBut if `module` is used instead of `angular.module` I see that AHL fails to wrap the stuff around.\r\n\r\nI've shown only a chunk of code, the rest of the code remained unchanged, so only the things I've shown are detected by AHL (mentioning this to make all the info available).\r\n\r\nSo, what I did after the configuration - I tried changing the `bookingTemplate` file (`'./booking.html'`). Hot reloader kicked in and didn't reload the whole app page like before. I saw that only the changed chunks were received and even saw that AHL did this bit:\r\n\r\n```\r\nthis.logger('Reloading UI Router State', 'info');\r\n\r\nvar $state = elm.injector().get('$state');\r\n\r\n$state.transitionTo...\r\n```\r\n\r\nBut nothing was changed on screen."}}
{"actor":{"display_login":"NeverwinterMoon"}}