使用 webpack、角度全栈生成器注入 ngMaterial

Posted 2023-03-08

【中文标题】使用 webpack、角度全栈生成器注入 ngMaterial

【英文标题】：Inject ngMaterial using webpack, angular fullstack generator

【发布时间】：2017-07-31 23:41:31

【问题描述】：

我想构建一个 Web 应用程序，我已经开始使用 angular fullstack 生成器来构建它。这个生成器使用 webpack，这是我第一次使用 webpack。

我一直在尝试通过以下方式安装 ngMaterial 依赖项：

npm install angular-material --save

我已经在webpack.make.js 文件中的config.entry.vendor 中添加了依赖项，但是当我尝试导入ngMaterial 时收到以下错误：

ERROR in ./client/app/app.js Module not found: Error: Cannot resolve module 'ngMaterial' in path\client\app @ ./client/app/app.js 21:18-39

如何使用 webpack 注入依赖项？

【参考方案1】：

我假设你在 webpack 配置中指出了错误的依赖名称：ngMaterial 而不是 angular-material。

ngMaterial 是 angularjs 模块名称，您将其作为 Angular 应用模块中的依赖项，如下所示：

angular.module('app', ['ngMaterial'])

但是在webpack 依赖中你必须指向node.js 模块名称，即angular-material（通过npm install 命令安装后它位于node_modules 文件夹中）

编辑：

如果您的app.js 需要，您还必须通过import 'angular-material' 或require('angular-material') 导入该模块。但是，如果您将此依赖项包含在单独的 vendor.js 文件中（通过 webpack），那么您不应该将此模块包含在您的 app.js 中，因为它将上传到 vendor.js 中的页面。如果这样做，您将在项目中包含 2 次。

【讨论】：

感谢您的解释，我解决了这个问题。你能告诉我在哪里可以找到更多关于 webpack 的文档，以便我可以在这个主题上记录自己吗？谢谢

这里是 Matthew Hsiung 的 webpack lessons 的优秀 youtube 播放列表。基础知识和一些高级配置示例。