用 grunt 缩小 angularjs 项目答案

【问题标题】：minification of angularjs project with grunt用 grunt 缩小 angularjs 项目
【发布时间】：2023-03-30 09:19:02
【问题描述】：

当我用 grunt 缩小我的 angularJS 项目时，我遇到了注入问题。为了做一个简单的测试，在使用 npm 生成器创建 angular 项目后，我尝试对我们拥有的示例做同样的事情，如下所示：

npm install -g generator-angular
yo angular

我只是在凉亭中添加了一些东西。这是我的凉亭文件：

{
  "name": "angular-test",
  "version": "0.0.0",
 "dependencies": {
"angular": "1.2.15",
"json3": "~3.2.6",
"es5-shim": "~2.1.0",
"jquery": "~1.11.0",
"bootstrap": "~3.0.3",
"angular-route": "~1.2.15",
"angular-bootstrap": "~0.10.0",
"angular-sanitize": "~1.2.15",
"angular-cookies": "~1.2.15",
"angular-resource": "~1.2.15"
},
"devDependencies": {
"angular-mocks": "1.2.15",
"angular-scenario": "1.2.15"
},
"resolutions": {
  "angular": "1.2.6"
}
}

然后我像这样更改了 app.js 文件：

'use strict';

angular
.module('angularTestApp', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute'
])
.config(['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) {
    $httpProvider.interceptors.push(function ($q) {
        //We don't care about that ...
        return {
        'responseError': function (rejection) {
            if(rejection.status === 401) {
                console.log("Unauthorized page. Must redirect to ");

                return;
            }
            return $q.reject(rejection);
        }
    };
});
}]);

如果我启动“grunt serve”任务，一切正常。但是，如果我执行“grunt build”然后尝试通过 Apache 访问 index.html 文件，则会出现以下错误：

Uncaught Error: [$injector:unpr] Unknown provider: aProvider <- a <- $http <- $compile
http://errors.angularjs.org/1.2.15/$injector/unpr?p0=aProvider%20%3C-%20a%20%3C-%20%24http%20%3C-%20%24compile

我在几篇文章中读到我必须使用 ngmin 任务来缩小，但它已经在示例 yeoman 项目中完成。 Si 请问我该如何解决这个问题？

非常感谢

克莱门特

【问题讨论】：

在我的 Windows 机器上复制了它，并使用 IIS 作为网络服务器。相同的错误信息。我试图找出它是什么
找不到。导致问题的行是 return $q.reject(rejection);但代码是正确的，遵循角度文档
你好，问这个问题我终于明白了这篇文章：stackoverflow.com/questions/17238759/… 对于下一个用户：你必须取消注释 grunt 配置文件中的“uglify”任务并将以下内容添加到该任务中：“选项： { mangle: false }”，我只是不明白为什么最初会这样评论。有人可以告诉我这个解决方案是否好用吗？为什么会这样评论？究竟是什么选项 "mangle:false" ？非常感谢
你可能想在这里阅读缩小部分：branchandbound.net/blog/web/2013/08/some-angularjs-pitfalls
我花了一些时间重现您的问题，希望我的回答对您有所帮助。除了我的回答，你能这么好意吗？

标签： angularjs gruntjs yeoman

【解决方案1】：

如果您查看缩小的 scripts.js，您会注意到 $q 服务获得了缩小的名称“a”。这就是您收到错误消息 aProvider is unknown 的原因。

$q 必须定义为依赖项并正确注入。

而不是

$httpProvider.interceptors.push(function ($q) {

放

$httpProvider.interceptors.push(['$q', function ($q) { ... }]);

【讨论】：