Почему у меня возникает эта ошибка при попытке интегрировать шаблон начальной загрузки в угловое приложение?

Question

Я не очень-то привык к фронтальной разработке.Поэтому для своего проекта я использую готовый шаблон начальной загрузки.И я пытаюсь интегрировать его в свой проект.
Как вы заметите, я пытаюсь сделать это интуитивно, а не на технической экспертизе, поскольку, как я уже сказал, я новичок в разработке переднего плана.
Итак, вот шаблонфайлы и папки:

В угловом приложении я создал четыре компонента:
- о - контакт - портфолио - работа
В который я скопировал корреспондента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">

Правильно ли я делаю это?
Если да, то почему я продолжаю получать эту ошибку:

GET http://localhost:4200/assets/css/bootstrap.css 404 (не найдено)

Answer 1

Каждый раз, когда используется angular, он запускает сервер с каталогом PROJECT_DIR/src - то есть localhost: 4200 указывает на папку src, и вы пытаетесь получить bootstrap.css из ../assets/css, т. Е. PROJECT_DIR, а папка assets находится в папка 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
            ],
...