AngularJS -$compileProvider.preAssignBindingsEnabled is not a function

Question

I'm getting the following error message when attempting to do a gulp serve on my AngularJS (ver 1.6.10) app:

Error: [$injector:modulerr] Failed to instantiate module myAppName due to:
$compileProvider.preAssignBindingsEnabled is not a function
@http://localhost:9805/app/scripts/app.js:43:9
invoke@http://localhost:9805/lib/angular/angular.js:5108:16
runInvokeQueue@http://localhost:9805/lib/angular/angular.js:4997:11
loadModules/<@http://localhost:9805/lib/angular/angular.js:5007:11
forEach@http://localhost:9805/lib/angular/angular.js:387:11
loadModules@http://localhost:9805/lib/angular/angular.js:4987:5
createInjector@http://localhost:9805/lib/angular/angular.js:4904:19
doBootstrap@http://localhost:9805/lib/angular/angular.js:1936:20
bootstrap@http://localhost:9805/lib/angular/angular.js:1957:12
angularInit@http://localhost:9805/lib/angular/angular.js:1842:5
@http://localhost:9805/lib/angular/angular.js:35431:5
mightThrow@http://localhost:9805/lib/jquery/dist/jquery.js:3534:21

The calling code looks like this:

 /*
 * Main module of the application.
 */
angular
    .module('dataPipelineApp', [
        //various parameters
    ])
    .config(['$compileProvider', '$httpProvider', '$breadcrumbProvider', function ($compileProvider, $httpProvider, $breadcrumbProvider) {
        //initialize get if not there
        if (!$httpProvider.defaults.headers.get) {
            $httpProvider.defaults.headers.get = {};
        }
        $compileProvider.preAssignBindingsEnabled(true); //err here
    $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
    // extra
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';

    $compileProvider.debugInfoEnabled(false); // speed up angular performance to not print debug info;
    $breadcrumbProvider.setOptions({
        templateUrl: 'app/views/headerBar.html'
    });
    //$httpProvider.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
    $httpProvider.interceptors.push("AddToken");
    $httpProvider.interceptors.push("UnauthorizeInterceptor");
}])

Similar searches seem to insist that this is a versioning discrepancy. Similar searches for this issue also seem to say there is an issue with the versioning of angular-mocks, however we are not using angular mocks at all. I have tried downgrading my Angular to 1.5.5, which other searches suggest you cannot exceed - despite all my colleagues running this on Angular 1.6.10 or higher. I have also tried using npm to install angular-mocks, despite being unused, and syncing the version to match that of our Angular, but to no avail. I'm really not sure what to do, nor am I sure what's actually happening, why can't it find that function?

EDIT: I also checked in the browser, searching using the console by running a angular.version search - and it turns up 1.7.2 as my Angular version, despite me redoing gulp build and gulp inject serve after npm installing the older versions. It seems it isn't properly choosing the right version - is there something I'm missing to enforce the downgraded installations?

Answer 1

The $compileProvider.preAssignBindingsEnabled flag is deprecated in AngularJS V1.6 and has been removed from AngularJS V1.7.

The AngularJS team strongly recommends migrating your applications to not rely on it as soon as possible. AngularJS V1.6 went end-of-life on 1July2018.

From the Docs:

Due to 38f8c9, directive bindings are no longer available in the constructor.

Previously, the $compileProvider.preAssignBindingsEnabled flag was supported. The flag controlled whether bindings were available inside the controller constructor or only in the $onInit hook. The bindings are now no longer available in the constructor.

To migrate your code:

• If you specified $compileProvider.preAssignBindingsEnabled(true) you need to first migrate your code so that the flag can be flipped to false. The instructions on how to do that are available in the "Migrating from 1.5 to 1.6" guide. Afterwards, remove the $compileProvider.preAssignBindingsEnabled(true) statement.

— AngularJS Developer Guide - Migrating to V1.7 - Compile

From the Docs:

Due to bcd0d4, pre-assigning bindings on component/directive controller instances is disabled by default, which means that they will no longer be available inside the constructors. It is still possible to turn it back on, which should help during the migration. Pre-assigning bindings has been deprecated and will be removed in a future version, so we strongly recommend migrating your applications to not rely on it as soon as possible.

Initialization logic that relies on bindings being present should be put in the controller's $onInit() method, which is guaranteed to always be called after the bindings have been assigned.

— AngularJS Developer Guide - Migrating to 1.6 - Compile

Note:

On 1July2018, support for AngularJS 1.6 ended. For more information, see AngularJS MISC - Version Support Status.

Answer 2

It is not supported anymore since AngularJS 1.6. For people who are still migrating their application to a more recent version of AngularJs, If you specified $compileProvider.preAssignBindingsEnabled(true) you need to first migrate your code so that the flag can be flipped to false. and take a look to this guide https://docs.angularjs.org/guide/migration#migrating-from-1-5-to-1-6

AngularJs commit reference: https://github.com/angular/angular.js/commit/38f8c97af74649ce224b6dd45f433cc665acfbfb