Angular2 - 自定义 CSS / JS 文件的文件夹是什么？答案

【问题标题】：Angular2 - What folder for custom CSS / JS files?Angular2 - 自定义 CSS / JS 文件的文件夹是什么？
【发布时间】：2017-06-08 14:15:42
【问题描述】：

我必须在我的 angular2 应用程序中包含一组 CSS 和 JS 文件。

为了在我进行构建时包含它们，正确的文件夹是什么？

我应该将它们放在 SRC\Assets 内还是 SRC\myFolder 下？

定义后，如何将它们包含在我的 app.component.html 中以及如何正确配置<base href="/">？

感谢支持

【问题讨论】：

将它们放入您的资产中。
您使用什么来构建应用程序？也许是 Webpack？您可以在 github 的 AngularClass/angular-starter repo 中查看最佳实践。会给你一些关于现在事情是如何做的线索:)
我只是做“ng build --prod”

标签： angular

【解决方案1】：

如果您使用 Angular CLI，那么您可以将它们放在任何地方，但我建议您放在 src/assets 文件夹中合理的逻辑位置。

从那里为您的 angular.cli.json 文件中的 js 和 css 文件添加条目。

apps 节点中的每个对象/应用程序下都有一个脚本数组和一个样式数组。

寻找类似...的东西

apps: [
 {
   ...
   "styles": [ "assets/styles/myCustomStyles.css" ],
   "scripts": [ "assets/js/dragevents.js" ]
 }
]

如果正确完成，cli 将在构建时自动将它们添加到您的索引中。

【讨论】：

【解决方案2】：

我正在使用 webpack，在我的应用程序中，我已将它们放在 src/assets 文件夹中，现在我可以像这样使用它了

<img class="photo-icon" src="/assets/img/user-default.png">

您可以在资产文件夹中为 javascript、图像和样式表等创建单独的文件夹并附加到路径中。

【讨论】：

Abdul 在 assets 文件夹下，CSS/JS 渲染正确，但图像没有。你能帮我吗？
是否出现 404 错误？如果你在新窗口中打开图片网址，你能看到图片吗？
不，我看不到图片...我尝试通过直接 url "localhost:4200/assets/distAdminLte2/img/icon-user.png" 访问它，但我无法联系到她，如果我尝试加载像 "@ 987654322@" ，有效
使用它可以工作，但我认为一旦我构建了生产解决方案，我将面临一些问题......
我在生产环境中也使用过 java spring 并且没有任何问题。

【解决方案3】：

如果您询问将样式放在哪里，官方 Angular 样式指南会说：

这是一种推荐的方式，但作为下面的评论，您可以按照对您更有意义的顺序排列它们。

【讨论】：