带有primeng 404问题的angular-cli@webpack

Posted 2023-03-07

【中文标题】带有primeng 404问题的angular-cli@webpack

【英文标题】：angular-cli@webpack with primeng 404 issues

【发布时间】：2017-01-20 14:30:58

【问题描述】：

我在使用 angular2、angular-cli@webpack 和 primeng 的入门项目中遇到以下错误。 PrimeNG 中唯一的 ui 组件是一个呈现的下拉菜单，它有它的值，但从来没有应用 css 主题。（请参阅下面关于 CSS 的错误）。我不知道为什么我会收到这个错误并且花了无数个小时没有结果，所以我现在不知所措。组件是使用 ng 命令生成的，并且 ng serve 运行 Web 服务器。有人知道吗？我也尝试过 node.js 6.5.0 和 4.5.0（使用 nvm 切换和管理它们）。

非常感谢任何帮助。

加载资源失败：服务器响应状态为 404 （未找到） http://localhost:3000/node_modules/primeng/resources/primeng.min.css 加载资源失败：服务器响应状态为 404 （未找到） http://localhost:3000/src/app/resources/css/font-awesome-4.6.3/css/font-awesome.min.css 加载资源失败：服务器响应状态为 404 （未找到） http://localhost:3000/node_modules/primeui/primeui-ng-all.min.css 加载资源失败：服务器响应状态为 404

顺便说一句，现在我将代码发布在：https://github.com/GregHila/primeng-angular-cli。

【参考方案1】：

在src/ 下应该有一个文件styles.css。我想你可以在这里导入样式。

例如：

@import '../node_modules/primeng/resources/primeng.min.css';

另一种方法是在styles 数组中的angular-cli.json 文件中提及它们。

【讨论】：

切换到使用 css 而不是 scss 并清理了 angular-cli.json 样式数组，styles.css 除外。然后在styles.css 中导入以下内容并将它们从 index.html 中删除，现在只导入 styles.css 但现在连主题都停止工作了。 @import '../node_modules/primeng/resources/themes/bootstrap/theme.css'; @import '../node_modules/font-awesome/css/font-awesome.min.css'; @import '../node_modules/primeng/resources/primeng.min.css';

您的 index.html 不应明确导入 styles.css。 AFAIK 这是由 angular-cli 管理的。无论如何，你的 node_modules 目录中真的有primeng 目录吗？

是的，我在 node_modules 中确实有 primeng，并且在安装 primeng 时 primeui 也随之而来

找到这篇文章：forum.primefaces.org/… 并将导入放在 styles.css 中，我再也看不到 get 错误，也没有无效字符，但下拉列表看起来还是搞砸了 @import "../node_modules/font-awesome/css/font-awesome.min.css"; @import "../node_modules/primeng/resources/themes/afterdark/theme.css"; @import "../node_modules/primeng/components/dropdown/dropdown.css"; @import "../node_modules/primeng/components/galleria/galleria.css";

一个疯狂的猜测：尝试在node_modules/primeng 和node_modules/primeui 中搜索primeui-ng-all.min.css 或primeui-all.min.css。只需链接它。

【参考方案2】：

如果您使用的是 webpack 分支，则服务目录中将不存在node_modules。你必须导入你想要使用的库，这将导致 webpack 为你打包它们。或者修改angular-cli.json 的apps[0].scripts 和apps[0].styles 属性，如https://github.com/angular/angular-cli#global-library-installation。

【讨论】：

我尝试了第二个选项：修改 angular-cli.json 并且主题现在似乎可以工作，但我仍然收到所有 4 个 css 和一个更奇怪的 js 库的 404 错误。我不确定你指的是什么“进口”。

顺便说一句，我使用的是 webpack 分支。

Webpack 是一个模块加载器，它会根据您导入的模块自动计算出要服务的模块。通过使用webpack，angular-cli 可以抽象出很多包含外部库的手动过程。如果您之前没有使用过导入，那么我建议您阅读有关 es6 模块 exploringjs.com/es6/ch_modules.html.

我熟悉这些模块，但我对以下语句感到困惑：“您必须导入要使用的库，这将导致 webpack 为您捆绑它们。或者修改应用程序[0 ].脚本”。如果您指的是我已经做过的角度组件中的导入，并且我正在导入 app.module.ts 中的模块，那么您是否暗示一旦我这样做了，我就不需要担心 css 和 js 文件webpack 是否已经包含该模块？我的困惑是关于 import 在这种情况下描述的内容，也许一个例子会有所帮助。感谢您的耐心等待。

"我不需要担心 css 和 js 文件，因为 webpack 已经包含了模块？" - 一旦你导入一个外部模块（并在你的应用程序中使用它？），webpack 应该将它包含在它的包中。这就是 angular-cli 设置 webpack 的方式。这也适用于 css 导入。对于仅 webpack 示例：github.com/shanewilson/react-webpack-example

【参考方案3】：

好像 1.0.0-beta.11-webpack.9-4 也修复了这个错误