将 bootstrap 4 html 项目转换为 Angular 9答案

【问题标题】：Converting a bootstrap 4 html project into Angular 9将 bootstrap 4 html 项目转换为 Angular 9
【发布时间】：2020-08-05 09:29:24
【问题描述】：

所以我找到了一个我想使用的非常好的模板，但它只是使用引导程序的 HTML。我找到了一些关于如何转换类似项目的教程，看起来很简单（比如here）

我添加了第一个组件，头部显示如下（我注释掉了大多数，但当时只有一个链接标签可以使用）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Some Html Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" type="text/css" href="../../assets/css/animate.css">
    <!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/line-awesome.css">
    <link rel="stylesheet" type="text/css" href="css/line-awesome-font-awesome.min.css">
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.min.css">
    <link rel="stylesheet" type="text/css" href="lib/slick/slick.css">
    <link rel="stylesheet" type="text/css" href="lib/slick/slick-theme.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.css"> -->
</head>

我在 angular.json 中添加了以下内容：

"styles": [
    "src/styles.css",
    "src/assets/css/animate.css"
],
"scripts": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

我在styles.css中添加了：

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

我也安装了

npm i bootstrap ngx-bootstrap jquery tether

当我尝试运行 npm start 时，出现以下错误：

ERROR in HostResourceLoader: loader(/Users/felipe/Documents/mtalents/frontend/src/assets/css/animate.css) returned a Promise

当我在没有链接标签的情况下运行它时，它运行得很好，但是所有样式都丢失了（就像我只得到一个文本块一样）。

我还没有修改脚本标签，但他们似乎还没有抱怨。

为了清楚起见，我从 src/assets 中的引导模板添加了 css、字体、图像、js、libs、供应商文件夹。

我不确定我错过了什么？提前致谢！

【问题讨论】：

这也不是那么重要，但我很好奇是否有人知道：我尝试在链接标签href="assets/css/animate.css" 中将其用于href，我认为将其添加到angular.json 样式中标签将使其随处可用。也许这是个问题？

标签： css angular bootstrap-4

【解决方案1】：

在脚本数组中应该只有 javascript 文件或打字稿（我不确定打字稿）所以删除这个

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

选项 1：如果您不使用 scss 样式，您可以在添加其他样式时将其添加到 angular.json 文件中

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/assets/css/animate.css",
              "src/styles.css",
           ],
"scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/@popperjs/core/dist/umd/popper.js",
              "node_modules/bootstrap/dist/js/bootstrap.js"
            ]

并注意此样式数组中的顺序，因为它们会相互覆盖

选项 2：应将其添加到您的 styles.scss 文件中，但应将引导脚本添加到 angular.json

@import '~node_modules/bootstrap/dist/css/bootstrap.min.css';

【讨论】：

【解决方案2】：

Eric Aska 发布的内容是正确的，如果您在 angular.json 中引用它，您还需要从 html 中删除 css 文件引用。将其放入 angular.json 实质上是在编译期间将引用放入 html 文件的 head 部分。没有理由在两个地方都有它，对于脚本也是如此。

“脚本”部分中还有一个 css 文件，需要将其删除，然后您还将这个 css 文件导入到您的 styles.css 中。也不需要在这里双重浸泡。我通常将与引导程序一样全局的东西放入我的 angular.json 中，因为应用程序的几乎每个部分都将使用它。但是，一旦它在您的 angular.json 中，您就不需要再次将其导入到您的 styles.css 中。

如果您想自定义引导 SCSS 变量，导入到 styles.scss 文件夹将是上述段落中描述的情况的例外。

【讨论】：