Angular 8 - 如何在资产静态文件中导入引导程序 4？答案

【问题标题】：Angular 8 - How to import bootstrap 4 in assets static files?Angular 8 - 如何在资产静态文件中导入引导程序 4？
【发布时间】：2019-12-18 03:50:44
【问题描述】：

我正在为静态文件使用 import bootstrap 4 library 的语法

<link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">

angular.json

{
...
"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angularapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/browser-not-supported.html"
            ],
            "styles": [
              "src/styles.less"
            ]
            ...
          }
}
...

browser-not-supported.html

<link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">

结果：

有人有同样的问题吗？

谢谢！

【问题讨论】：

标签： javascript node.js angular typescript single-page-application

【解决方案1】：

将引导参考链接添加到 angular.json 文件中的样式属性

示例：

        "styles": [
          "src/styles.less",
          "../node_modules/bootstrap/dist/css/bootstrap.min.css"
        ]

【讨论】：

它只适用于 index.html 文件，我希望它对资产部分中的静态文件有什么用
一个简单的解决方法是从引导网站复制链接，但是由于它在您的资产文件夹中，那么您的 href 可能应该是“../../../node_modules/bootstrap /dist/css/bootstrap.min.css" 代替？编辑：同样在你做出这些改变之后，确保你停止你的服务器并关闭你的命令行/终端然后再次运行
当我没有任何方式从 node_modules 导入时，我会考虑使用 CDN

【解决方案2】：

将你的 css 文件放在你的 assets/css 文件夹中，然后像这样改变

<link rel="stylesheet" type="text/css" href="./assets/css/bootstrap.min.css">

或者包含在你的 angular.json 文件中

 "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ]

【讨论】：

如何在 node_modules 中直接使用它，我不想将它复制到 css 文件夹中。对于将其包含在样式部分中，这种方式仅适用于 index.html 文件（主），不适用于静态文件
你只能通过像我刚才提到的那样包含在你的 angular.json 中来做到这一点

【解决方案3】：

1) 安装引导程序

npm i bootstrap

2) 编辑 angular.json 或 .angular-cli.json 中的“style”数组

"styles": [
          "src/styles.less",
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ]

3) 再次将其导入至styles.less

@import "~bootstrap/dist/css/bootstrap.css";

【讨论】：

哦，不，不，它只适用于 index.html(main)，不适用于静态文件：D
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['../../node_modules/bootstrap/dist/css/ bootstrap.min.css'] }) 你能试试这个吗
不是组件，是静态页面browser-not-supported.html
创建一个新的样式表文件并将其导入您的 html 文件并检查它是否工作。如果正常，请将 bootstrap.min.css 中的所有代码复制到新样式表并尝试

【解决方案4】：

尝试使用 npm 安装它：

npm install ngx-bootstrap bootstrap --save

【讨论】：

谢谢，但这种方法只适用于 index.html 文件
@dangchithao，Angular 是一个单页应用程序。所有其他内容都在 index.html 中呈现。所以你不需要将它导入到任何其他组件中，你可以直接包含引导类，它会完美呈现。
我需要它与我在资产部分 browser-not-supported.html 中声明的静态文件一起使用
@dangchithao，尝试将其作为 CDN 直接添加到文件中。
我在上面的评论中说过我会考虑使用 CDN，但现在我想在 node_module 中使用它：D