问题

一个angularjs1.x的历史项目，webpack3做的打包，打出来的包一起有几十M，因为一直内网运行，虽然包大了点，但是还能够接受。

因为最近有一些客户对这个项目很感兴趣，就拿去演示，这就不能忍受了，然后受命去看看是什么问题。

在package.json的scripts中，是做了压缩代码脚本的，问了之前项目的同事说是压缩脚本出来的代码有部分页面是跑不起来的。so，就测试了一波，发现是Angular $injector:unpr Unknown provider错误。

原因

某些祖传代码在写的时候不规范，对$scope没有使用依赖注入的写法。

不规范的写法

app.controller('BadController', function($scope) {$scope.a = 1;$scope.b = 2;
});

依赖注入的写法

//使用了详细的注释，数组形式注入
app.controller('GoodController1', ['$scope', function($scope) {$scope.a = 1;$scope.b = 2;
}]

以上两种写法在不使用JavaScript构件工具的时候是没有问题的，使用类似webpack压缩打包的时候，对代码做了很多压缩混淆的处理，不规范写法中的$scope通过名字就匹配不到需要注入的参数了，所以就杯具了。

问题找到了，怎么解决呢，那么多代码难道一个一个改过去？？？

解决

webpack 配置中使用了UglifyJsPlugin这个工具对JavaScript代码做了压缩和混淆处理，然后UglifyJsPlugin的文档告诉我们，它有个配置参数叫mangle，是用来处理混淆的，更妙的是mangle有个选项叫reserved，可以用一个数组来设置可以不被混淆的变量名。

这里用的是webpack3.x，使用webpack4.x的小伙伴，要注意下，4.x 中的压缩混淆工具已经换了

然后就有了下面这一段配置，问题就被解决了。

uglifyOptions: {mangle: {reserved: ["$scope","scope",],},compress: {warnings: false,drop_console: true,},output: {comments: false,},
},

附

mangle 用于混淆属性/指定压缩配，下表是mangle的可配置项列表

属性	作用
builtins	混淆那些与标准JS全局变量重复的名字。
debug	添加debug前缀和后缀。
domprops	混淆那些与DOM属性名重复的名字
keep_quoted	只混淆没有被引号包起来的属性名
regex	只混淆匹配（该正则）的名字
reserved	不需要混淆的名字的列表（即保留）

<完结>

webpack打包angularjs后出现Angular $injector:unpr Unknown provider的错误及解决相关推荐

AngularJS报错：[$injector:unpr] Unknown provider: $templateRequestProvider
在页面中由上到下引用了: angular.js angular-route.js 创建model的时候也写明了依赖: var someApp = angular.module('someApp',[' ...
[ISSUE]angularjs resolve: $injector:unpr] Unknown provider:
使用框架 ionic,使用resolve做数据共享 http://learn.ionicframework.com/formulas/sharing-data-between-views/# 出现错误 ...
[$injector:unpr] Unknown provider:--angular.module()函数解答
在使用angularjs开发项目过程中,无疑遇到这个问题是最棘手的问题: ionic.bundle.js:26799 Error: [$injector:unpr] Unknown provider: ...
关于angular模态框遇到的坑 Error: [$injector:unpr] Unknown provider
记录今天在修改angular的模态框遇到的问题: AngularJs的UI组件ui-Bootstrap:Tooltip和Popover 先说tooltip,tooltip有三种使用方式: (1) ui ...
angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider - $scope - testServe
angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...
Angular $injector:unpr Unknown provider 问题原因汇总
Unknown provider: tProvider <- t 对于很多Angular 1.x 的使用者来说,是非常头疼的一件事情,因为使用者根本不知道原因在哪里. 本文总结了迄今为止所有导致 ...
Error: [$injector:unpr] Unknown provider: $scopeProvider - $scope -错误解决方案
做项目的时候因为懒,在写service时直接复制了控制器的依赖注入,之后就出现了这个错误,查了半天. 解决其实很简单,删除掉service中注入的$scope即可. 转载于:https://www.c ...
使用webpack打包的后，公共请求路径的配置问题
在我们公司,和后台接接口时,公共的请求路径我们是单独抽出来的,放在一个独立的public.js中,在public.js中存入那个公共变量公共变量是这样在其他地方使用ajax时,我们就这样使用这种 ...
vue使用webPack打包发布后页面显示空白
今天笔者将打包后,进行访问,访问到index.html,但是出现的是空白页. 打包命令:npm run build,打包后的文件如下: 这是因为index.html中引入的css ,js 的路径不对: ...

webpack打包angularjs后出现Angular $injector:unpr Unknown provider的错误及解决

文章目录

问题

原因

解决

附

webpack打包angularjs后出现Angular $injector:unpr Unknown provider的错误及解决相关推荐

最新文章

热门文章