CODEWITHSUNDEEP
angularjssafari
Daniel
Daniel

Reputation: 37061

AngularJS app does not load on iPad / iPhone Safari (works only after page refresh / second load and afterwards)

I have a really weird issue with my AngularJS app on iPad / iPhone safari.

The issue occurs only of first load (after clearing history / website data).

The issue that the application wont start at all - I get a white page and the console (from MacBook develop tools) is full with errors,

Sometimes I'm getting lots of 

TypeError: undefined is not an object (evaluating 'd.module')
ReferenceError: Can't find variable: angular
TypeError: undefined is not an object (evaluating 'd.$$minErr')
ReferenceError: Can't find variable: angular
TypeError: undefined is not an object (evaluating 't.noop')
ReferenceError: Can't find variable: angular
ReferenceError: Can't find variable: angular
...

Sometimes I'm getting Error: $injector:unpr - Unknown Provider

And sometimes Error: $injector:nomod - Unknown Provider

But if I hit page refresh after getting the white page / errors - all works just fine.

This is part of the third party js libs/plugins I include on my index.html

<script src="resources/plugins/head.load.min.js"></script>
<script src="resources/plugins/modernizr-custom.js"></script>

<script src="resources/lib/jquery/jquery-2.1.0.min.js"></script>

<script src="resources/lib/angular/angular.min.js"></script>
<script src="resources/lib/angular/angular-resource.min.js"></script>
<script src="resources/lib/angular/angular-route.min.js"></script>
<script src="resources/lib/angular/angular-animate.min.js"></script>

<script src="resources/lib/angular-translate/angular-translate.min.js"></script>
<script src="resources/lib/angular-translate/angular-translate-loader-static-files.js"></script>

<script src="resources/lib/angular-ui/ui-bootstrap-custom-tpls-0.14.1.min.js"></script>

<script src="resources/lib/ng-table/ng-table.min.js"></script>

<script src="resources/lib/file-upload/ng-file-upload-shim.min.js"></script>
<script src="resources/lib/file-upload/ng-file-upload.min.js"></script>

I'm really lost here...

Another thing: I have noticed on my Mac (Resources->Scripts) that if I open a file, lets say Resources->Scripts->FileNameOne.js the content is actually of another file FileNameTwo.js ??? is it a flaw of the dev tools of the Mac that confuses the names/content or can it be related to the problem???

Any Ideas?

Here is the complete solution with Grunt

Content of the Gruntfile.js

'use strict';
module.exports = function(grunt){
    grunt.initConfig({
      concat: {
        dist: {
          src: ['WebContent/resources/plugins/head.load.min.js', 'WebContent/resources/plugins/modernizr-custom.js',
                'WebContent/resources/lib/jquery/jquery-2.1.0.min.js', 
                'WebContent/resources/lib/angular/angular.min.js', 'WebContent/resources/lib/angular/angular-resource.min.js', 'WebContent/resources/lib/angular/angular-route.min.js', 'WebContent/resources/lib/angular/angular-animate.min.js',
                'WebContent/resources/lib/angular-translate/angular-translate.min.js', 'WebContent/resources/lib/angular-translate/angular-translate-loader-static-files.js',
                'WebContent/resources/lib/angular-ui/ui-bootstrap-custom-tpls-0.14.1.min.js',
                'WebContent/resources/lib/ng-table/ng-table.min.js',
                'WebContent/resources/lib/websockify/util.js', 'WebContent/resources/lib/websockify/base64.js', 'WebContent/resources/lib/websockify/websock.js',
                'WebContent/resources/lib/file-upload/ng-file-upload.min.js', 
                'WebContent/resources/js/services/*',
                'WebContent/resources/js/services/dialogs/*',
                'WebContent/resources/js/controllers/*',
                'WebContent/resources/js/directives/*',
                'WebContent/resources/plugins/*'],
          dest: 'dist/myWebAppInOneFile.js',
        },
      },
    });
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.registerTask('default', ['concat']);
};

Then just call grunt from the relevant folder and you'll get your file

Upvotes: 4

Views: 6441

Answers (1)

Ant Kennedy
Ant Kennedy

Reputation: 1240

What build toolchain are you using. One option would be to concatenate all of the includes into a single file, this should stop the error where the wrong scripts are being loaded - As mentioned by Marcus H

Gulp https://github.com/contra/gulp-concat

Grunt https://github.com/gruntjs/grunt-contrib-concat

Upvotes: 3

Related Questions