3

I have used the Yeoman Angular-Fullstack generator to create a new component and I am attempting to inject the Modal service into it.

ng-annotate is being used to inject the service however I get this:

Error: [$injector:strictdi] CampaignsComponent is not using explicit annotation and cannot be invoked in strict mode

The controller looks like so:

'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;

The generator automatically scaffolds out a Component that looks like so:

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;

Attempting to inject $http into the Campaigns controller like

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

still causes the same error so it's not down to the Modal service at this point and I am completely stumped.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Suavelizard
  • 147
  • 3
  • 16
  • did you find any solution? – gmodrogan Sep 08 '16 at 18:00
  • Unfortunately not. I ended up avoiding the use of the ng-inject annotation. – Suavelizard Sep 11 '16 at 00:03
  • 1
    I fixed this by using require('./path to file'). For example when you load a app.services module and then you have different services(factories) defined in separate files, in the file where you define the app.services module you can write at the end of the file require('./path to file') and it works great – gmodrogan Sep 12 '16 at 08:30

2 Answers2

0

You can fix this error by using $inject property. Basically, the solution to your problem is to inject the '$http' dependency. 

CampaignsComponent.$inject['$http'];

This error occurs when attempting to invoke a function or provider which has not been explicitly annotated, while the application is running with strict-di mode enabled. You can read the details here.

RBT
  • 24,161
  • 21
  • 159
  • 240
Yunhan Li
  • 153
  • 1
  • 3
  • 8
0

Add the following method to your MainController class:

$onInit(){}
hopkinsrush
  • 461
  • 4
  • 2