Failed to instantiate module ng due to $injector:strictdi

Question

I have "migrated" my Angular project to ES6 by simply adding babelify to my gulp browserify task. Everything was working fine, though I come back from the weekend and something broke...

My app is now complaining of the following:

angular.min.js:formatted:7382 Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=ng&p1=Error%3A%20%5…0%20%20at%20bb%20(http%3A%2F%2Flocalhost%3A3000%2Fjs%2Flibs.js%3A173%3A246)
    at Error (native)
    at http://localhost:3000/js/libs.js:136:412
    at http://localhost:3000/js/libs.js:170:134
    at q (http://localhost:3000/js/libs.js:137:355)
    at g (http://localhost:3000/js/libs.js:169:222)
    at bb (http://localhost:3000/js/libs.js:173:246)
    at c (http://localhost:3000/js/libs.js:151:19)
    at Object.yc [as bootstrap] (http://localhost:3000/js/libs.js:151:332)
    at http://localhost:3000/js/app.js:745:11
    at http://localhost:3000/js/libs.js:260:226

When opening the link to the error:

Failed to instantiate module ng due to:
Error: [$injector:strictdi] http://errors.angularjs.org/1.5.5/$injector/strictdi?p0=f...)
    at Error (native)
    at http://localhost:3000/js/libs.js:136:412
    at Function.bb.$$annotate (http://localhost:3000/js/libs.js:328:487)
    at e (http://localhost:3000/js/libs.js:170:442)
    at Object.invoke (http://localhost:3000/js/libs.js:171:163)
    at d (http://localhost:3000/js/libs.js:169:321)
    at http://localhost:3000/js/libs.js:169:445
    at q (http://localhost:3000/js/libs.js:137:355)
    at g (http://localhost:3000/js/libs.js:169:222)
    at bb (http://localhost:3000/js/libs.js:173:246

When opening the error further:

function($provide is not using explicit annotation and cannot be invoked in strict mode

What I do not understand from this is that last part function($provider... That is not in my code, and well... it worked before re-running the gulp task today.

Here is how I bootstrap my app:

import appConstant from './app.constant';
import appConfig from './app.config';
import appRun from './app.run';
import AppComponent from './app.component';
import coreModule from './core/core';
import viewsModule from './views/views';
import permissionsModule from './permissions/permissions';
import formModules from './forms-directives/form-blocks';
import DAOModules from './DAO/dao';
import './templates';

const requires = [
  'ngCookies',
  'ngLocale',
  'ngAnimate',
  'ngMessages',
  'ngRoute',
  'ngSanitize',
  'permission',
  'permission.ng',
  'mgcrea.ngStrap',
  'ui.tinymce',
  'ui.mask',
  'pascalprecht.translate',
  'templates',
  coreModule.name,
  viewsModule.name,
  permissionsModule.name,
  formModules.name,
  DAOModules.name,
];

// require('./templates');
// requires.push('templates');

function extractRoles(userData) {
  const regex = /^ind/i;

  return _(userData)
    .map((value, prop) => {
      const role = regex.test(prop) && value === true
        ? prop.replace(/([A-Z])/g, '_$1').toUpperCase().substr(4)
        : null;

      return role;
    })
    .compact() // remove falsy from array
    .value();
}

function getRoles() {
  const initInjector = angular.injector(['ng']);
  const $http = initInjector.get('$http');

  return $http.get('some-real-here') // I removed the real url for privacy reasons
    .then((response) => response)
    .catch((e) => console.log('error loading userData', e));
}

// create and bootstrap application
getRoles()
  .then((roles) => {
    angular.module('app', requires)
      .config(appConfig)
      .run(appRun)
      .constant('APP_SETTINGS', appConstant({
        protocol: 'https',
        host: 'some-real-here', // I removed the real url for privacy reasons
        port: 3000, 
        mock: false,
      }))
      .constant('STATUT_MAP', {
        NOUV: '/completeoffre',
        COMP: '/analyseroffre',
        ACCP: '/documenter',
        DOCU: '/statueroffre',
        APPR: '/enregistreroffre',
        ENRE: '/evalueroffre',
      })
      .value('userObj', {
        user: roles.data,
        roles: extractRoles(roles.data),
      })
      .component('app', AppComponent);

    angular.bootstrap(document, ['app'], {
      strictDi: true,
    });
  });

The error gets triggered when angular.bootstrap(...) gets executed.

Answer 1

remove strictDi:true, like so

angular.bootstrap(document, ['app']);