在Angular5中正确引入样式表与脚本的方法是什么？

嘿，我来帮你梳理下Angular 5里正确引入样式和脚本的几种方式，顺便给你的代码提些优化建议～

一、通过 index.html 全局引入（适合第三方全局资源） #

这是你目前在用的方式，但有几个需要注意的细节：

• 避免重复引入：你当前同时加了bootstrap.css和bootstrap.min.css，这完全没必要！min后缀的是压缩后的版本，体积更小、加载更快，只保留这一个就够了。
• 路径要准确：确保你的资源确实在assets/bower_components/...这个路径下，Angular会自动把assets目录下的文件打包到输出目录，所以这个路径是没问题的。
• 脚本引入技巧：如果要加第三方脚本（比如jQuery、bootstrap.js），建议放在<body>标签的末尾，避免阻塞页面渲染，示例如下：

<body>
  <app-root></app-root>
  <script src="assets/bower_components/jquery/dist/jquery.min.js"></script>
  <script src="assets/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</body>

二、通过 .angular-cli.json 全局引入（更推荐的规范方式） #

Angular 5 使用的是根目录下的 .angular-cli.json 配置文件，在这里统一管理全局资源，Angular CLI会帮你自动处理打包，比手动写index.html更省心：

1. 打开项目根目录的 .angular-cli.json
2. 找到styles数组，添加你的全局样式路径：

"styles": [
  "assets/bower_components/bootstrap/dist/css/bootstrap.min.css",
  "styles.css" // 项目默认的全局样式文件
]

3. 找到scripts数组，添加全局脚本路径：

"scripts": [
  "assets/bower_components/jquery/dist/jquery.min.js",
  "assets/bower_components/bootstrap/dist/js/bootstrap.min.js"
]

配置完成后，CLI会自动把这些资源整合到最终构建文件中，开发和生产环境都能完美适配，还能避免手动修改index.html时的失误。

三、组件内局部引入样式（专属样式不污染全局） #

如果某个样式只给特定组件用，就别全局引入了，用Angular的组件化样式更合适：

• 方式1：在组件元数据里配置
  在组件的.component.ts文件中，通过styleUrls指定专属样式：

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css', './path/to/other-specific-style.css']
})

• 方式2：在组件CSS里用@import
  直接在组件的.component.css文件中引入：

@import '../path/to/component-only-style.css';

这种方式的样式只会作用于当前组件，不会影响其他组件，完全符合Angular的组件化设计思想。

针对你当前代码的优化建议 #

把你index.html里重复的bootstrap样式删掉，只保留压缩版：

<link rel="stylesheet" href="assets/bower_components/bootstrap/dist/css/bootstrap.min.css">

如果是生产环境，更推荐用.angular-cli.json来管理全局资源，后续维护起来会更方便哦～

内容的提问来源于stack exchange，提问作者klianlopez