UglifyJS2打破了Angular.js应用程序中的依赖注入

时间:2016-03-31 18:06:12

标签: angularjs annotations minify gulp-uglify

我有一个Angular.js应用程序,我想缩小它。

首先,我设置了一个gulp管道,以便自动处理注释和缩小。

为了检查隐式注释的工作情况,我使用ngAnnotate添加了注释,然后使用strict-di选项运行应用程序以捕获所有错过的注释。然后,我已经为我发现的所有遗漏注释添加了评论提示。之后,一切运行良好,ngAnnotate自动注释我的代码,strict-di不再有警告。

但是,当我使用UglifyJS2实际缩小代码时,它无法启动应用程序,说某些服务未找到。

这是实际的错误消息:

  

状态更改错误错误:[$ injector:unpr]未知提供者:tProvider< - t

如果我向mangle: false添加UglifyJS2选项,则可以正常使用。

- 问题是,我如何找到罪魁祸首以及为什么strict-di没有抓住它?

1 个答案:

答案 0 :(得分:0)

好!我终于设法解决了这个问题。

我将在这里发布一个帮助我有效解决问题的策略。

策略

我有一个非常大的代码库,所有内容都在一个JavaScript文件中。所有依赖项,第三方以及本地,都在其中声明并与gulp插件捆绑在一起。

我做的第一件事就是将代码分成两个文件:vendor.jsapplication.js。我已将所有第三方依赖项移动到第一个文件,并将所有本地依赖项留在第二个文件中。在那之后,我尝试在application.js缩小和vendor.js未分化的情况下运行我的应用程序。这个简单的技巧帮助我确定问题实际上是第三方代码,而不是我的应用程序。

我已经指定了34个外部依赖项,所以我再次创建了两个文件vendor.jsvendor-cleared.js并开始将依赖项从第一个文件移动到第二个文件(通过一半) )。这一次,我编写了第二个,并且第一个未经证实。经过几次迭代后,我发现了一个没有正确注释的有问题的第三方库。

我已修好它,并将所有内容重新组合在我的application.js中。在那之后,我的应用程序开始完美运行。

我希望这个简单的想法可以帮助您将大型代码库转换为正确注释的代码库并最终缩小它!

之后,只需在添加新依赖项时检查缩小是否正常。并且不要忘记始终使用strict-di。它不会一直有效,但它做得相当不错。