Injection на ES6 классы конструкторов с угловой 1.X и WebPack не работает

Question

Я после этого стилистического справочника по новому проекту: https://github.com/toddmotto/angular-styleguide

Так что я создал модуль вроде этого:

import angular from 'angular'; 
import { IndicatorSelectorComponent } from './indicatorSelector.component'; 
import { IndicatorSelectorService } from './indicatorSelector.service'; 
import './indicatorSelector.css'; 

export const IndicatorSelectorModule = angular 
    .module('indicatorSelector', []) 
    .component('indicatorSelector', IndicatorSelectorComponent) 
    .service('IndicatorSelectorService',IndicatorSelectorService) 
    .name; 

В основном импорта и регистрировать на модуле компонент и службу.

Затем создал этот основной компонент:

import templateUrl from './indicatorSelector.html'; 

export const IndicatorSelectorComponent = { 
    templateUrl, 
    controller: class IndicatorSelectorComponent { 
    contructor($http,IndicatorSelectorService) { 
     'ngInject'; 
     this.$http = $http; 
     this.service = IndicatorSelectorService; 
    } 

    $onInit() { 
     console.log(this.$http); 
     console.log(this.service); 
    } 
    } 
} 

Проблема заключается в том, что обе мои инъекции ($ HTTP и IndicatorSelectorService) не работают ... при входе в консоль они не определены.

Я подозреваю, что это что-то делать с моим процессом WebPack, поэтому позвольте мне разместить код здесь:

import path from 'path'; 
import HtmlWebpackPlugin from 'html-webpack-plugin'; 
import webpack from 'webpack'; 
import ngAnnotatePlugin from 'ng-annotate-webpack-plugin'; 

export default { 
    debug: true, 
    devtool: 'inline-source-map', 
    noInfo: false, 
    entry: [ 
     path.resolve(__dirname, 'src/app/app.module') 
    ], 
    target: 'web', 
    output: { 
     path: path.resolve(__dirname, 'src'), 
     publicPath: '/', 
     filename: 'bundle.js' 
    }, 
    plugins: [ 

     // Runs ng-annotate on generated bundles 
     new ngAnnotatePlugin({ 
      add: true 
     }), 

     // Inject implicit globals for jquery 

     new webpack.ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery", 
      "window.jQuery": "jquery" 
     }), 

     // Create HTML file that includes reference to bundled JS. 
     new HtmlWebpackPlugin({ 
      template: 'src/index.html', 
      inject: true 
     }) 
    ], 
    module: { 
     loaders: [ 
      { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel' }, 
      { test: /\.css$/, loader: 'style-loader!css-loader' }, 
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file?name=fonts/[name].[ext]" }, 
      { test: /\.(woff|woff2)$/, loader: "url?prefix=font/&limit=5000&name=fonts/[name].[ext]" }, 
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream&name=fonts/[name].[ext]" }, 
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml&name=fonts/[name].[ext]" }, 
      { test: /\.(jpg|jpeg|gif|png)$/, exclude: /node_modules/, loader: 'url?limit=1024&name=images/[name].[ext]' }, 
      { test: /\.html$/, exclude: path.resolve(__dirname, 'src/index.html'), loader: 'ngtemplate!html' } 
     ] 
    } 
} 

Некоторые один мог указать мне, что я делаю неправильно? Я ценю любую помощь!

/* EDIT */

В моей пачке я это генерируется, так что я предполагаю, что это впрыскивается, но до сих пор не работают. Любая подсказка?

var IndicatorSelectorComponent = exports.IndicatorSelectorComponent = { 
    templateUrl: _indicatorSelector2.default, 
    controller: function() { 
    function IndicatorSelectorComponent() { 
     _classCallCheck(this, IndicatorSelectorComponent); 
    } 

    _createClass(IndicatorSelectorComponent, [{ 
     key: "contructor", 
     value: ["$http", function contructor($http) { 
     "ngInject"; 

     this.$http = $http; 
     }] 
    }, { 
     key: "$onInit", 
     value: function $onInit() { 
     console.log(this.$http); 
     } 
    }]); 

    return IndicatorSelectorComponent; 
    }() 
}; 

Answer 1

Я использую Angular 1.5 + webpack, и я также следую этому руководству по стилю. Я использую ng-annotate для моих погрузчиков.

вот мой файл webpack.config.js.

https://gist.github.com/vistajess/7cf451471bd06dc1b636e81eaf15e7d6

образец файла угловой службы.

https://gist.github.com/vistajess/d49090e538baca96d6a9c1f884a2cac6