使用 Angular 1.X 和 WebPack 注入 ES6 类构造函数不起作用

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

有人可以指出我做错了什么？我很感激任何帮助！

/* 编辑 */

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

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