Javascript 在Angular 1.X和WebPack不工作的ES6类构造函数上进行注入

我在一个新项目中遵循这个样式指南：

所以我创建了一个模块，如下所示：

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）都不起作用。。。当登录控制台时，它们是未定义的

我怀疑这与我的网页过程有关，所以让我在这里发布代码：

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' }
        ]
    }
}

有人能告诉我我做错了什么？谢谢你的帮助

/*编辑*/

在我的包中，我已经生成了这个，所以我猜它正在被注入，但仍然不起作用。有线索吗

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;
  }()
};

---

我正在使用Angular 1.5+网页包，我也在遵循该风格指南。我正在对我的加载程序使用

ng annotate

这是我的

webpack.config.js

文件

示例角度服务文件

---

我使用的是Angular 1.5+网页包，我也在遵循该风格指南。我正在对我的加载程序使用

ng annotate

这是我的

webpack.config.js

文件

示例角度服务文件

---

console.log（这是$http）；console.log（this.service）；它是否返回未定义的？是的，返回未定义的。谢谢你的回答。我会查看你的webpack.config.js。我试图避免使用这种方式，因为我使用的方式不应该用$inject明确通知每一次注射。如果解决方案没有出现，我可能会更改为加载程序，并使用您所使用的方式。console.log（this.$http）；console.log（this.service）；它是否返回未定义的？是的，返回未定义的。谢谢你的回答。我会查看你的webpack.config.js。我试图避免使用这种方式，因为我使用的方式不应该用$inject明确通知每一次注射。如果解决方案没有出现，我可能会切换到加载程序并使用您的方式。您也可以查看angular es6 webpack starter的我的回购作为指南：）您也可以查看angular es6 webpack starter的我的回购作为指南：）