How to check if angular is loaded correctly

Question

Let's say that I want to reference angularjs from a CDN but I would also like a fallback in case the call to the CDN fails, e.g. pointing to a local js-file. When it comes to JQuery I have seen examples where you would do something like this in javascript:

if(typeof jQuery == 'undefined') {
    ....
}

Is there anything similar for angularjs I can do?

This answer may help: http://stackoverflow.com/a/538823/987185 — musically_ut, Nov 02 '13 at 13:21
I feel very embarrassed...don't know what to say. Why didn't I try this? Of course it works :-) — Stig Perez, Nov 02 '13 at 13:23

score 33 · Answer 1 · edited Jan 29 '14 at 00:19

33

if(typeof angular == 'undefined') {
    ....
}

edited Jan 29 '14 at 00:19

followben

9,067
4
40
42

answered Jan 29 '14 at 00:00

Doron Segal

2,242
23
22

score 15 · Answer 2 · answered May 27 '15 at 16:42

I just opened the console by hitting F12 (or right-clicking and selecting Inspect element, then typed in angular.

If you get the message Object {version: Object, callbacks: Object}, angular is loaded.

If you get the message Uncaught ReferenceError: angular is not defined, angular is not loaded.

score 7 · Answer 3 · answered Feb 14 '14 at 10:22

You can detect if the angular CDN (Content Delivery Network) has loaded the angular object correctly (i.e. this happens if the CDN is down) by testing if the angular JavaScript object is undefined.

You should then fallback to a local copy loaded using a document.write

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script type="text/javascript">
    if(typeof angular == 'undefined') {
       document.write(unescape("%3Cscript type='text/javascript' src='/Scripts/angular.min.js'%3E%3C/script%3E"));
     }
<script type="text/javascript">

score 5 · Answer 4 · edited Aug 21 '15 at 11:50

5

if(window.angular === undefined) {
    ....
}

edited Aug 21 '15 at 11:50

Luke

11,426
43
60
69

answered Aug 21 '15 at 09:08

pixelbyaj

1,178
1
9
22

score 3 · Answer 5 · answered Feb 28 '18 at 12:14

3

For angular 2 and newer try

window.ng

in a console

answered Feb 28 '18 at 12:14

Eric Herlitz

25,354
27
113
157

score 1 · Answer 6 · answered Dec 21 '20 at 17:17

1

For angular 11 you can use:

if(document.getElementsByTagName('app-root')[0].attributes['ng-version'] === undefined){
...
}

answered Dec 21 '20 at 17:17

alastairtree

3,960
32
49

This is the cleanest solution that is future friendly... – John Spiteri Jul 04 '23 at 14:51

score 0 · Answer 7 · answered Aug 21 '14 at 22:38

0

Or do it like so :

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script>(typeof angular != 'undefined') || document.write('<script src="js/angular.min.js")<\/script>')</script>

answered Aug 21 '14 at 22:38

Otman Bouchari

196
1
6

score 0 · Answer 8 · answered Apr 15 '17 at 18:35

0

I use this simple code before starting to know if the code has loaded

<body ng-app="">
 {{3  + 3}}
</body>

If this results in 6 then it means your angular is loaded else not.

answered Apr 15 '17 at 18:35

Black Mamba

13,632
6
82
105

score 0 · Answer 9 · answered Jun 28 '21 at 07:19

0

You can try something like this, this will return false when angular app has completed loading.

window.getAllAngularTestabilities()[0]._ngZone.hasPendingMacrotasks

answered Jun 28 '21 at 07:19

Ram

451
10
18

How to check if angular is loaded correctly

9 Answers9

Linked

Related