Angular把某个库添加到运行时的全局范围中，比如：添加bootstrap、jquery等样式

那些没有导入到应用中的旧版 JavaScript 库可以添加到运行时的全局作用域中，并像在 script 标签中一样加载。可以在 CLI 配置文件angular.json 中的构建目标（build target）的 "scripts" 和 "styles" 选项中配置 CLI，以便在构建期间添加这些文件。

例如，要使用 Bootstrap 4，首先就要使用 npm 包管理器来安装该库及其依赖：

npm install jquery --save
npm install popper.js --save
npm install bootstrap --save
复制代码

或者

cnpm install jquery --save
cnpm install popper.js --save
cnpm install bootstrap --save
复制代码

在 angular.json 配置文件中，把关联的脚本文件添加到 "scripts" 数组中：

"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
],
复制代码

把 Bootstrap 的 CSS 文件添加到 "styles" 数组中：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.css"
],
复制代码

运行或重启 ng serve，看看你的应用是否正在使用 Bootstrap 4。

注意：

当你用 "scripts" 数组导入一个库后，就不应该在你的 TypeScript 代码中再用 import 语句来导入它了（比如：import * as $ from 'jquery';）。 如果你这样做，就会得到该库两个不同的副本：一个作为全局库导入，另一个作为模块导入。这对于那些带有插件的库来说特别糟糕，比如JQuery，因为每个副本都会有不同的插件。