Angularjs 如何在Angular Fullstack生成的Angular 1.5组件中注入依赖项

我已经使用Yeoman Angular Fullstack生成器创建了一个新组件，我正在尝试将模式服务注入其中

ng annotate

用于注入服务，但我得到以下信息：

错误：[$injector:strictdi]活动组件未使用显式批注，无法在严格模式下调用

控制器看起来是这样的：

'use strict';
const angular = require('angular');
const uiRouter = require('angular-ui-router');
import routes from './campaigns.routes';

export class CampaignsComponent {
  /*@ngInject*/
  constructor(Modal) {
    console.log('campaigns');
          this.confirmDelete = Modal.confirm.delete();

  }
}
// CampaignsComponent.$inject['Modal'];
export default angular.module('myApp.campaigns', [uiRouter])
  .config(routes)
  .component('campaigns', {
    template: require('./campaigns.html'),
    controller: CampaignsComponent,
    controllerAs: 'campaignsCtrl'
  })
  .name;

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import routing from './main.routes';

export class MainController {

  /*@ngInject*/
  constructor($http) {
    this.$http = $http;
    console.log('main')
  }

  $onInit() {
    this.$http.get('/api/things')
      .then(response => {
        this.awesomeThings = response.data;
      });
  }

  addThing() {
    if (this.newThing) {
      this.$http.post('/api/things', {
        name: this.newThing
      });
      this.newThing = '';
    }
  }

  deleteThing(thing) {
    this.$http.delete('/api/things/' + thing._id);
  }
}

export default angular.module('myApp.main', [uiRouter])
  .config(routing)
  .component('main', {
    template: require('./main.html'),
    controller: MainController
  })
  .name;

生成器自动搭建出一个组件，如下所示：

'use strict';
const angular = require('angular');
const uiRouter = require('angular-ui-router');
import routes from './campaigns.routes';

export class CampaignsComponent {
  /*@ngInject*/
  constructor(Modal) {
    console.log('campaigns');
          this.confirmDelete = Modal.confirm.delete();

  }
}
// CampaignsComponent.$inject['Modal'];
export default angular.module('myApp.campaigns', [uiRouter])
  .config(routes)
  .component('campaigns', {
    template: require('./campaigns.html'),
    controller: CampaignsComponent,
    controllerAs: 'campaignsCtrl'
  })
  .name;

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import routing from './main.routes';

export class MainController {

  /*@ngInject*/
  constructor($http) {
    this.$http = $http;
    console.log('main')
  }

  $onInit() {
    this.$http.get('/api/things')
      .then(response => {
        this.awesomeThings = response.data;
      });
  }

  addThing() {
    if (this.newThing) {
      this.$http.post('/api/things', {
        name: this.newThing
      });
      this.newThing = '';
    }
  }

  deleteThing(thing) {
    this.$http.delete('/api/things/' + thing._id);
  }
}

export default angular.module('myApp.main', [uiRouter])
  .config(routing)
  .component('main', {
    template: require('./main.html'),
    controller: MainController
  })
  .name;

正在尝试将$http注入活动控制器，如

  /*@ngInject*/
  constructor($http) {
    this.$http = $http;
    console.log('main')
  }

---

仍然会导致相同的错误，因此现在还不是模态服务的问题，我完全被难住了。

您可以使用

$inject

属性修复此错误。基本上，问题的解决方案是注入

“$http”

依赖项

CampaignsComponent.$inject['$http'];

---

当应用程序在启用严格di模式的情况下运行时，尝试调用未显式注释的函数或提供程序时，会发生此错误。您可以阅读详细信息

将以下方法添加到MainController类中：

$onInit(){}

---

你找到解决办法了吗？不幸的是没有。我最终避免了使用ng inject注释。我通过使用require（“./path to file”）解决了这个问题。例如，当您加载一个app.services模块，然后在单独的文件中定义了不同的服务（工厂），在定义app.services模块的文件中，您可以在文件末尾写入require（“./path to file”），并且效果很好