警告:尝试多次加载angular.Angular + Ionic + Require JS



我正在使用ionic构建一个混合应用程序。在这个应用程序中,我决定将Require.js作为依赖加载器(可能不是最好的选择,但我已经习惯了使用它,因为我有很多项目,对我来说更容易为WebApps和应用程序提供一个独特的标准)。

问题是,在我的main.js中,我一个接一个地需要angular和ionic (ionic.bundle),而ionic,因为它有自己的angular实现,即使已经加载了,也会尝试加载angular。

这不是一个坏的东西,它只是一个日志,但我想知道如何让它消失,一个最好的方法。

这是我的main.js

require.config({
    paths: {
        "angular": "../bower_components/angular/angular.min",
        "ionic": "../bower_components/ionic/release/js/ionic.bundle.min",
        "angular-animate": "../bower_components/angular-animate/angular-animate.min",
        "angular-touch": "../bower_components/angular-touch/angular-touch.min",
        "angular-cookies": "../bower_components/angular-cookies/angular-cookies.min",
        "angular-aria": "../bower_components/angular-aria/angular-aria.min",
        "angular-material": "../bower_components/angular-material/angular-material.min",
        "angular-ui-router": "../bower_components/angular-ui-router/release/angular-ui-router.min",
        "angular-modal-service": "../bower_components/angular-modal-service/dst/angular-modal-service.min",
        text: "../bower_components/text/text",
        "angular-file-model": "../bower_components/angular-file-model/angular-file-model.min",
        "moment": "../bower_components/moment/min/moment.min",
        "angular-moment": "../bower_components/angular-moment/angular-moment.min",
        "moment-it": "../bower_components/moment/locale/it",
    },
    shim: {
        angular: {
            exports: "angular"
        },
        ionic: {
            deps: ["angular", "angular-aria", "angular-animate"],
            exports: "ionic"
        },
        "angular-ui-router": ["angular"],
        "angular-modal-service": ["angular"],
        "angular-file-model": ["angular"],
        "angular-cookies": ["angular"],
        "angular-moment" : [
            "angular",
            "moment",
        ],
        "moment-it": ["moment"],
        "angular-animate": ["angular"],
        "angular-aria": ["angular"],
        "angular-touch": ["angular"],
        "angular-material": ["angular", "angular-animate", "angular-aria"]
    }
});
require([
    "angular",
    "./dependencies",
    "./configs/configs",
    "./services/services",
    "./states/states",
    "./directives/directives",
    // "./dialogs/dialogs",
    "./toasts/toasts",
], function(angular) {
    "use strict";
    var modules = Array.prototype.slice.call(arguments, 1).map(function(module) {
        return module.name;
    });
    angular.module("app", modules);
    angular.bootstrap(document, ["app"]);
});

我决定以以下方式更改main.js:

我把angular命名为ionic.bundle.js。别忘了把ionic作为angular的依赖项

require.config({
    paths: {
        //"angular": "../bower_components/angular/angular.min",
        "angular": "../bower_components/ionic/release/js/ionic.bundle.min",
        "angular-animate": "../bower_components/angular-animate/angular-animate.min",
        "angular-cookies": "../bower_components/angular-cookies/angular-cookies.min",
        "angular-aria": "../bower_components/angular-aria/angular-aria.min",
        "angular-material": "../bower_components/angular-material/angular-material.min",
        "angular-ui-router": "../bower_components/angular-ui-router/release/angular-ui-router.min",
        "angular-modal-service": "../bower_components/angular-modal-service/dst/angular-modal-service.min",
        text: "../bower_components/text/text",
        "angular-file-model": "../bower_components/angular-file-model/angular-file-model.min",
        "moment": "../bower_components/moment/min/moment.min",
        "angular-moment": "../bower_components/angular-moment/angular-moment.min",
        "moment-it": "../bower_components/moment/locale/it",
    },
    shim: {
        angular: {
            exports: "angular"
        },
        "angular-ui-router": ["angular"],
        "angular-modal-service": ["angular"],
        "angular-file-model": ["angular"],
        "angular-cookies": ["angular"],
        "angular-moment" : [
            "angular",
            "moment",
        ],
        "moment-it": ["moment"],
        "angular-animate": ["angular"],
        "angular-aria": ["angular"],
        "angular-material": ["angular", "angular-animate", "angular-aria"]
    }
});
require([
    "angular",
    "./dependencies",
    "./configs/configs",
    "./services/services",
    "./states/states",
    "./directives/directives",
    // "./dialogs/dialogs",
    "./toasts/toasts",
], function(angular) {
    "use strict";
    var modules = Array.prototype.slice.call(arguments, 1).map(function(module) {
        return module.name;
    });
    angular.module("app", modules.concat(["ionic"]));
    angular.bootstrap(document, ["app"]);
});

最新更新