AngularJS error [$injector:unpr] Unknown provider: in IE11

问题

I couldn't find help in google neither here.

I'm new to Angular and I'm facing this error only in IE11 and below.

The error I'm getting is this: console error shown in IE

My IE is in portuguese so the translate of the first error is: it's not possible to get property of "getAttribute" of undefined or null

this is my app.config.js file

// Checking if an optional module is registered.
// If it's not, register an empty one to prevent errors.
(function(optDeps){
	optDeps.forEach(function(dep){
		try{
			angular.module(dep);
		}catch(e){
			angular.module(dep, []);
		}
	})
})(['ui.carousel', 'ui.mask', 'vAccordion', 'ngAnimate']);

angular

.module('poletto', [
	// Third party
	'smoothScroll',
	'ui.carousel',
	'ui.mask',
	'vAccordion',
	'ngAnimate',
	
	// Components
	'poletto.components',

	// Controllers
	'poletto.controllers',

	// Directives
	'poletto.directives',

	// Factories
	'poletto.factories',

	// Filters
	'poletto.filters',

	// Services
	'poletto.services'
])

.constant('CONSTANTS', {
	BASE_URL: document.currentScript.getAttribute('data-base-url')
})

.config(function($httpProvider){
	$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
})

.config(function($locationProvider){
	if(window.history.pushState){
		$locationProvider.html5Mode({ enabled: true, requireBase: false, rewriteLinks: false });
	}
})

// Extending JQLite with a function that find nodes by className
.run(function(){
	angular.element.prototype.findBySelector = function(selector){
		var matches = [];
		
		for(key in this){
			// Pushing only HTMLElement's
			if(this[key].nodeType){
				// NodeList to array
				var results = Array.prototype.slice.call(this[key].querySelectorAll(selector));

				matches.push.apply(matches, results);
			}
		}

		return angular.element(matches);
	};
})

I've searched google and tryied some solutions such as:

add <meta http-equiv="X-UA-Compatible" content="IE=11" />
wrap all my declarations in:

(function (angular) { "use strict"; //code }(window.angular));

add this in html tag: <html lang="pt-br" xmlns:ng="http://angularjs.org">
Also I couldn't find any angular polyfills neither src/ folder, wich I saw in a similar question with angular 2.

I don't know wich file I should put here, so if you need some more info, you can ask me and I update the question.

Thanks!!

回答1:

Unfortunately document.currentScript is not supported on IE and can't be polyfilled so it can't done that way. Perhaps, you can embed the base url somewhere else or maybe add an id to your script and retrieve it in old school javascript.

<script id="main" data-base-url="https://my-api.com"></script>

And then retrieve it like this:

var currentScript = document.getElementById('main');

In your CONSTANTS provider you can do something like this:

.constant('CONSTANTS', {
    BASE_URL: document.getElementById('main').getAttribute('data-base-url')
})

回答2:

The problem stems from using document.currentScript, which isn't supported in IE 11 and apparently can't be polyfilled (easily at least). So you'll have to find a different way to declare your BASE_URL constant.

来源：https://stackoverflow.com/questions/46891527/angularjs-error-injectorunpr-unknown-provider-in-ie11

标签

angularjs

internet-explorer-11