AngularJS 应用程序无法在 iPad/iPhone Safari 上加载(仅在页面刷新/第二次加载后及之后工作)

Question

我在 iPad/iPhone safari 上使用 AngularJS 应用程序时遇到了一个非常奇怪的问题。

此问题仅在首次加载时发生(清除历史记录/网站数据后)。

应用程序根本无法启动的问题 - 我得到一个白页并且控制台(来自 MacBook 开发工具)充满了错误，

有时我会得到很多

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
...

有时我会收到错误:$injector:unpr - 未知提供商

有时错误:$injector:nomod - 未知提供者

但是，如果我在收到白页/错误后点击页面刷新 - 一切正常。

这是我在 index.html 中包含的第三方 js 库/插件的一部分

<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>

我真的迷路了......

<小时/>

另一件事:我注意到在我的 Mac 上(资源 -> 脚本)，如果我打开一个文件，假设资源 -> 脚本 ->FileNameOne.js 的内容实际上是另一个文件的内容文件名Two.js ???是Mac的开发工具的一个缺陷导致名称/内容混淆还是与问题有关？？？

有什么想法吗？

<小时/>

这是 Grunt 的完整解决方案

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']);
};

然后只需从相关文件夹中调用 grunt 即可获取文件

Answer 1

您使用什么构建工具链。一种选择是将所有包含内容连接到一个文件中，这应该会阻止加载错误脚本的错误 - 正如 Marcus H 所提到的

咕噜咕噜 https://github.com/contra/gulp-concat

咕噜声 https://github.com/gruntjs/grunt-contrib-concat