为什么在尝试将引导程序模板集成到角度应用程序时出现此错误？

Question

我不是很习惯前端开发。因此，对于我的项目，我使用的是现成的引导程序模板。我正在尝试将其集成到我的项目中。
您会注意到，由于我是前端开发的新手，因此我是凭直觉尝试此操作，而不是基于技术专长。
这是模板文件和文件夹：

在angular应用程序中，我创建了四个组件：
- 关于 - 联系 -投资组合 -工作
我在其中复制了相应的html文件。
索引文件进入了app.component.html文件。
这有道理吗？
无论如何，在app.component.html（原始模板文件夹中的index.html）中，我已经更改了文件路径，因为不同的资产（css / fonts / images / js / sass）不再与app.component.html（原始模板文件夹中以前为index.html）。 例如：

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

成为：

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

我这样做正确吗？
如果是这样，为什么我总是收到此错误：

  

获取http://localhost:4200/assets/css/bootstrap.css 404（未找到）

Answer 1

只要有角服务，它就会使用PROJECT_DIR/src目录启动服务器-即localhost：4200指向src文件夹，而您正尝试从../assets/css即PROJECT_DIR和资产文件夹中获取bootstrap.css在src文件夹中。这就是为什么找不到404的原因。

您可以在index.html中添加样式表，例如

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

由于服务器目录dir而忽略../，是PROJECT_DIR / src文件夹。

否则，您也可以在样式数组中的angular.json文件中包含样式表

{
  ...
  "projects": {
    "vjs-ng-data-sharing-poc": {
      ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "src/assets/css/bootstrap.css" <-- your css file path
            ],
...