如何在已编译的js文件上调试未捕获的错误：[$ injector：modulerr]？

Question

我使用 Laravel Elixir 编译了我所有的js和css Gulp

在加载我的网站时，我在控制台上看到了这个错误

all-04432621a2.js：1 是一个已编译的文件。

链接

  

http://errors.angularjs.org/1.5.6/ $注射器/ modulerr P0 = signinApp＆安培; P1 =错误％3A％20％5B％24injector％3Aunpr％5D％20http％3A％2F％2Ferrors.angularjs.org％2F1.5.6％2F ％24injector％2Funpr％3Fp0％3DE％0A％20％20％20％20原子％20http％3A％2F％2Fbheng.dev％2Fbuild％2Fassets％2Ffe％2Fjs％2Fall-04432621a2.js％3A1％3A412％0A％20 ％20％20％20原子％20http％3A％2F％2Fbheng.dev％2Fbuild％2Fassets％2Ffe％2Fjs％2Fall-04432621a2.js％3A1％3A18991％0A％20％20％20％20原子％20I％20（HTTP ％3A％2F％2Fbheng.dev％2Fbuild％2Fassets％2Ffe％2Fjs％2Fall-04432621a2.js％3A1％3A17735）％0A％20％20％20％20原子％20R％20（HTTP％3A％2F％2Fbheng。 dev的％2Fbuild％2Fassets％2Ffe％2Fjs％2Fall-04432621a2.js％3A1％3A17969）％0A％20％20％20％20原子％20Object.invoke％20（HTTP％3A％2F％2Fbheng.dev％2Fbuild％2Fassets ％2Ffe％2Fjs％2Fall-04432621a2.js％3A1％3A18059）％0A％20％20％20％20原子％20I％20（HTTP％3A％2F％2Fbheng.dev％2Fbuild％2Fassets％2Ffe％2Fjs％2Fall- 04432621a2.js％3A1％3A17204）％0A％20％20％20％20原子％20http％3A％2F％2Fbheng.dev％2Fbuild％2Fassets％2Ffe％2Fjs％2Fall-04432621a2.js％3A1％3A17328％0A％20 ％20％20％20原子％20I％20（HTTP％3A％2F％2Fbheng.dev％2Fbuild％2Fassets％2Ffe％2Fjs％2Fall-04432621a2.js％3A1％3A86 0）％0A％20％20％20％20原子％20升％20（HTTP％3A％2F％2Fbheng.dev％2Fbuild％2Fassets％2Ffe％2Fjs％2Fall-04432621a2.js％3A1％3A17105）％0A％20％ 20％20％20原子％20Be％20（HTTP％3A％2F％2Fbheng.dev％2Fbuild％2Fassets％2Ffe％2Fjs％2Fall-04432621a2.js％3A1％3A19151

如何进一步调试？

Answer 1

所以，initial error是这样的：

  

未知提供者：e

我很确定您没有明确指定您的提供商之一＆＃39; e＆＃39;或类似的东西，所以我猜测e是一个缩小的名称，用于引用你的一个提供者或服务，并且你期望它被注入。

AngularJS使用dependency injection在启动时连接应用程序，但为了做到这一点，它需要知道要注入的事物的名称。在未分类的文件中，这很容易，参数名称对应于组件名称。

但是，缩小文件必须为annotated properly才能使进样器工作。注释看起来像这样：

someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {
  // ...
}]);

注意数组条目如何映射到参数，而参数又与组件名称相对应。

为了让您的应用正常工作，您需要确保所有注射网站都经过正确注释。

如果您不喜欢这些笨重的阵列（我也不喜欢），那么您可以使用ng-annotate来避免它们。

Answer 2

关于依赖注入，

Andrew Eisenberg是正确的。 styleguide也建议使用.$inject和其他注入方法。

然而，仍有可能存在问题。我在运行gulp --production时遇到了这个问题，问题是变量名在输出文件中被破坏了。

以下是解决问题的方法：

// need to stop mangling, i.e. angular.module being converted to e.module and then wondering what is e?
elixir.config.js.uglify.options.mangle = false;

elixir(function (mix) {
    // mix stuff
});

在我的实例中，我在预先缩小的供应商脚本上使用.combine，例如angular和bootstrap以及.scripts（因此缩小）我的角度代码，角度代码被修剪（角度为e）所以毫不奇怪它是如何起作用的。

以下是JS缩小的代码：

/**
 * Minify the Gulp JS files.
 */
function minifyJs() {
    return Elixir.Plugins.uglify(
        Elixir.config.js.uglify.options
    );
}

  

https://github.com/laravel/elixir/blob/b1aa077b0b2ba757c1a8781a68fcca16a823e765/src/tasks/utilities/minifier.js#L44

以下是JS缩小的默认配置：

uglify: {
    options: {
        compress: {
            drop_console: Elixir.inProduction
        }
    }
}

  

https://github.com/laravel/elixir/blob/b1aa077b0b2ba757c1a8781a68fcca16a823e765/src/Config.js#L284

我花了一些时间自己想出这个，我希望这对你也有帮助。