Webpack 不使用 require() 方法在 AngularJs 中添加依赖项答案

【问题标题】：Webpack doesn't add dependencies in AngularJs using the require() methodWebpack 不使用 require() 方法在 AngularJs 中添加依赖项
【发布时间】：2018-08-29 01:28:05
【问题描述】：

我可能对 webpack 配置有问题，因为 AngularJS DI 中的 require() 方法不能正常工作。在我的应用中使用 AngularJS、Webpack 和 ES6。

我正在尝试添加一个库 angular-formly-templates-bootstrap。在 GitHub 上的源代码中，我看到添加了以下依赖项：

const ngModule = angular.module(ngModuleName, [require('angular-formly')]);

在文件中使用 Npm 安装库后我可以看到：

var ngModule = angular.module(ngModuleName, [__webpack_require__(4)]);

不幸的是，触发此代码会返回一个错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module formlyBootstrap due to:
Error: [$injector:modulerr] Failed to instantiate module {"version":{"full":"1.6.9","major":1,"minor":6,"dot":9,"codeName":"fiery-basilisk"},"callbacks":{}} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object

我可以通过在库代码中输入依赖名来快速修复错误：

var ngModule = angular.module(ngModuleName, ['formly']);

此时，一切正常。显然，这不是正确的解决方案。唯一的问题是为什么 require() 方法没有正确注入依赖项？

【问题讨论】：

标签： javascript angularjs webpack dependency-injection

【解决方案1】：

Require 在浏览器中不起作用。基本上，require 是一个 node_module，我们可以通过它访问其他模块或文件。因此，如果您在浏览器端使用它，请尝试其他方法，例如 import 或 self.import 或注入。

将此添加到您的项目中：require.js

看看这个Require Api

【讨论】：

可能我们还没有完全了解对方。在应用程序中，我使用导入/导出来管理文件。 require() 方法不仅来自 Webpack 的 requireJS 库。
可能仍然会纠正你，因为 webpack 没有任何 node_module 或方法 require 是 node_module。这一切都由 node 完成。